beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Bootstrap flavor - Tabs, modals and dropdowns

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-09 17:35:35 +03:00
parent 56ce6acb00
commit daf5d309ca
5 changed files with 60 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
flavors/mini-bootstrap.css
View file

@ -1206,47 +1206,57 @@ img.thumbnail {
- [3] : The values that $tabs-hover-style can take are `lighten` and `darken`. The inside condition only
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
*/
.tabs {
.nav-tabs {
position: relative;
min-height: 250px;
width: 100%; }
.tabs input[type="radio"] {
.nav-tabs input[type="radio"] {
display: none; }
.tabs input[type="radio"] + div {
.nav-tabs input[type="radio"] + div {
display: inline; }
.tabs input[type="radio"] + div > label {
.nav-tabs input[type="radio"] + div > label {
position: reative;
float: left;
margin-right: 3px;
left: 1px;
height: 40px;
padding: 8px 14px;
height: 20px;
padding: 10px 18px;
color: #337ab7;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid #ddd;
border-radius: 4px 4px 0 0;
cursor: pointer; }
.tabs input[type="radio"] + div > label:hover, .tabs input[type="radio"] + div > label:active, .tabs input[type="radio"] + div > label:focus {
.nav-tabs input[type="radio"] + div > label:hover, .nav-tabs input[type="radio"] + div > label:active, .nav-tabs input[type="radio"] + div > label:focus {
background: #e6e6e6; }
.tabs input[type="radio"] + div > label + div {
.nav-tabs input[type="radio"] + div > label + div {
position: absolute;
z-index: -2;
left: 0;
top: 39px;
top: 19px;
bottom: 0;
right: 0;
padding: 20px;
background: #fff;
border: 1px solid #ccc; }
.tabs input[type="radio"]:checked + div > label {
border: 1px solid #ddd; }
.nav-tabs input[type="radio"]:checked + div > label {
color: #333;
background: #fff;
border-top: 3px solid #337ab7;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff; }
.tabs input[type="radio"]:checked + div > label + div {
.nav-tabs input[type="radio"]:checked + div > label + div {
position: absolute;
z-index: -1; }
.nav-tabs input[type="radio"] + div > label + div {
top: 40px; }
.nav-tabs input[type="radio"] + div > label {
border: 0; }
.nav-tabs input[type="radio"]:checked + div > label {
border: 1px solid #ddd;
border-bottom: 0; }
/*
Mixin for modal dialogs.
Parameters:
@ -1294,13 +1304,13 @@ img.thumbnail {
.modal + div > div {
z-index: 998;
position: relative;
width: 45%;
width: 600px;
color: #333;
background-color: #fff;
margin: 8.5% auto 0;
margin: 30px auto 0;
padding: 18px;
border: 1px solid #ccc;
border-radius: 4px;
border: 1px solid #999;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal:checked + div {
height: 100%;
@ -1343,7 +1353,7 @@ img.thumbnail {
display: none; }
.navbar input[type="checkbox"]:checked.dropdown + div, .navbar input[type="radio"]:checked.dropdown + div {
display: block;
font-size: 0.8em;
font-size: 80%;
margin-left: 20px; }
/*

2
flavors/mini-bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

36
flavors/mini-bootstrap.scss
View file

@ -395,47 +395,67 @@ $badge-style5-name: badge-danger; // Name for badges style 5 class
// Variable definitions for the Tab module (_tab.scss)
//====================================================================
// Tab class names.
$tabs-class-name: tabs; // Name for the tab system container class
// --- NOTES: ---
// Bootstrap naming conventions are used, but the structure follows the
// component structure of mini.css.
// Some extra styles are applied at the end of the module definition. This
// is due to the way that Bootstrap's tabs are styled.
// No events and methods are supported as of yet.
// -------------------
$tabs-class-name: nav-tabs; // Name for the tab system container class
// Colors and styles (you can remove things you don't need or define more
// colors if you need them).
$tabs-border-color: #ccc; // Border color for the tabs system
$tabs-border-color: #ddd; // Border color for the tabs system
$tabs-content-bg-color: #fff; // Background for the active tab's content
$tabs-color: $a-color; // Color for the text in the tab labels
$tabs-bg-color: $body-bg-color; // Background color for the tab labels
$tabs-active-color: $body-color; // Color for the text in the active tab's label
$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label
$tabs-active-stripe-style: 3px solid $a-color; // Style for the active tab label's stripe
$tabs-active-stripe-style: 1px solid #ddd; // Style for the active tab label's stripe
// Enable tabs (_tab.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/tab';
// Use tabs mixin to create tab system with given specs. For more information
// refer to the _tab.scss file to check the definitions.
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
@include make-tabs($tabs-class-name, 250px, 3px, 20px, 10px 18px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
.#{$tabs-class-name} input[type="radio"] + div > label + div { top: 40px; }
.#{$tabs-class-name} input[type="radio"] + div > label { border:0; }
.#{$tabs-class-name} input[type="radio"]:checked + div > label { border: $tabs-active-stripe-style; border-bottom: 0; }
//====================================================================
// Variable definitions for the Modal module (_modal.scss)
//====================================================================
// Modal class names.
// --- NOTES: ---
// The modal dialog is all contained in the .modal class.
// Background color of the overlay is not the exact same as Bootstrap.
// Some colors and styles are approximations.
// No alternative sizes, methods or events are supported as of yet.
// -------------------
$modal-class-name: modal; // Name for the modal class
// Colors and styles (you can remove things you don't need or define more
// colors if you need them).
$modal-bg-color: $body-bg-color; // Background color for the modal
$modal-color: $body-color; // Color for the text in the modal
$modal-border: 1px solid #ccc; // Border style for the modal
$modal-border: 1px solid #999; // Border style for the modal
// Enable modal (_modal.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/modal';
// Use modal mixin to create modal with given specs. For more information
// refer to the _modal.scss file to check the definitions.
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 6px, 18px, 30px, 600px);
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
//====================================================================
// Variable definitions for the Dropdown module (_dropdown.scss)
//====================================================================
// Dropdown class names.
$dropdown-class-name: dropdown; // Name for the modal class
// --- NOTES: ---
// Dropdown styling uses the default styling of mini.css as the equivalent
// Bootstrap component is very different.
// -------------------
$dropdown-class-name: dropdown; // Name for the dropdown class
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information
// refer to the _dropdown.scss file to check the definitions.
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 80%);
//====================================================================
// Variable definitions for the Collapse module (_collapse.scss)
//====================================================================

2
flavors/mini-default.scss
View file

@ -303,7 +303,7 @@ $modal-border: 1px solid #ccc; // Border style for the modal
// Variable definitions for the Dropdown module (_dropdown.scss)
//====================================================================
// Dropdown class names.
$dropdown-class-name: dropdown; // Name for the modal class
$dropdown-class-name: dropdown; // Name for the dropdown class
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information

2
flavors/mini-niteowl.scss
View file

@ -303,7 +303,7 @@ $modal-border: 1px solid #304251; // Border style for the modal
// Variable definitions for the Dropdown module (_dropdown.scss)
//====================================================================
// Dropdown class names.
$dropdown-class-name: dropdown; // Name for the modal class
$dropdown-class-name: dropdown; // Name for the dropdown class
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information