mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 05:17:24 +02:00
Code Issues Releases 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
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 - [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`. checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
*/ */
.tabs { .nav-tabs {
position: relative; position: relative;
min-height: 250px; min-height: 250px;
width: 100%; } width: 100%; }
.tabs input[type="radio"] { .nav-tabs input[type="radio"] {
display: none; } display: none; }
.tabs input[type="radio"] + div { .nav-tabs input[type="radio"] + div {
display: inline; } display: inline; }
.tabs input[type="radio"] + div > label { .nav-tabs input[type="radio"] + div > label {
position: reative; position: reative;
float: left; float: left;
margin-right: 3px; margin-right: 3px;
left: 1px; left: 1px;
height: 40px; height: 20px;
padding: 8px 14px; padding: 10px 18px;
color: #337ab7; color: #337ab7;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ddd;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
cursor: pointer; } 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; } background: #e6e6e6; }
.tabs input[type="radio"] + div > label + div { .nav-tabs input[type="radio"] + div > label + div {
position: absolute; position: absolute;
z-index: -2; z-index: -2;
left: 0; left: 0;
top: 39px; top: 19px;
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border: 1px solid #ccc; } border: 1px solid #ddd; }
.tabs input[type="radio"]:checked + div > label { .nav-tabs input[type="radio"]:checked + div > label {
color: #333; color: #333;
background: #fff; background: #fff;
border-top: 3px solid #337ab7; border-top: 1px solid #ddd;
border-bottom: 1px solid #fff; } border-bottom: 1px solid #fff; }
.tabs input[type="radio"]:checked + div > label + div { .nav-tabs input[type="radio"]:checked + div > label + div {
position: absolute; position: absolute;
z-index: -1; } 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. Mixin for modal dialogs.
Parameters: Parameters:
@@ -1294,13 +1304,13 @@ img.thumbnail {
.modal + div > div { .modal + div > div {
z-index: 998; z-index: 998;
position: relative; position: relative;
width: 45%; width: 600px;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
margin: 8.5% auto 0; margin: 30px auto 0;
padding: 18px; padding: 18px;
border: 1px solid #ccc; border: 1px solid #999;
border-radius: 4px; border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal:checked + div { .modal:checked + div {
height: 100%; height: 100%;
@@ -1343,7 +1353,7 @@ img.thumbnail {
display: none; } display: none; }
.navbar input[type="checkbox"]:checked.dropdown + div, .navbar input[type="radio"]:checked.dropdown + div { .navbar input[type="checkbox"]:checked.dropdown + div, .navbar input[type="radio"]:checked.dropdown + div {
display: block; display: block;
font-size: 0.8em; font-size: 80%;
margin-left: 20px; } 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) // Variable definitions for the Tab module (_tab.scss)
//==================================================================== //====================================================================
// Tab class names. // 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 and styles (you can remove things you don't need or define more
// colors if you need them). // 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-content-bg-color: #fff; // Background for the active tab's content
$tabs-color: $a-color; // Color for the text in the tab labels $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-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-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-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.) // Enable tabs (_tab.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/tab'; @import '../scss/mini-extra/tab';
// Use tabs mixin to create tab system with given specs. For more information // Use tabs mixin to create tab system with given specs. For more information
// refer to the _tab.scss file to check the definitions. // 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) // Variable definitions for the Modal module (_modal.scss)
//==================================================================== //====================================================================
// Modal class names. // 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 $modal-class-name: modal; // Name for the modal class
// Colors and styles (you can remove things you don't need or define more // Colors and styles (you can remove things you don't need or define more
// colors if you need them). // colors if you need them).
$modal-bg-color: $body-bg-color; // Background color for the modal $modal-bg-color: $body-bg-color; // Background color for the modal
$modal-color: $body-color; // Color for the text in 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.) // Enable modal (_modal.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/modal'; @import '../scss/mini-extra/modal';
// Use modal mixin to create modal with given specs. For more information // Use modal mixin to create modal with given specs. For more information
// refer to the _modal.scss file to check the definitions. // 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); @include make-modal-close-support($modal-class-name, $close-class-name, 20px);
//==================================================================== //====================================================================
// Variable definitions for the Dropdown module (_dropdown.scss) // Variable definitions for the Dropdown module (_dropdown.scss)
//==================================================================== //====================================================================
// Dropdown class names. // 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.) // Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown'; @import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information // Use dropdown mixin to create dropdown with given specs. For more information
// refer to the _dropdown.scss file to check the definitions. // 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) // 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) // Variable definitions for the Dropdown module (_dropdown.scss)
//==================================================================== //====================================================================
// Dropdown class names. // 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.) // Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown'; @import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information // 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) // Variable definitions for the Dropdown module (_dropdown.scss)
//==================================================================== //====================================================================
// Dropdown class names. // 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.) // Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown'; @import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information // Use dropdown mixin to create dropdown with given specs. For more information