Extra utilities almost complete, only popover remains
This commit is contained in:
Angelos Chalaris
parent
bfda6b5361
commit
e0c4753315
|
|
@ -25,11 +25,8 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
|
|||
TODO:
|
||||
- Components
|
||||
- Utilities
|
||||
- Breadcrumbs
|
||||
- Panels, Wells & Alerts (alerts will support closing via checkbox)
|
||||
- Responsive embed and utils for Media objects
|
||||
- Hover-able styling (maybe)
|
||||
- Button states and groups (mostly for style if impemented, not much more than that)
|
||||
- Popovers
|
||||
- Later down the line
|
||||
- A *material-design* module and/or flavor could be added
|
||||
- An alternative grid system using `flexbox` or `grid`
|
||||
|
|
|
|||
|
|
@ -1487,3 +1487,253 @@ input[type="radio"]:checked.acrd + label {
|
|||
display: block; }
|
||||
.carousel input[type="radio"]:checked + div + label:before {
|
||||
content: '\25cf'; }
|
||||
|
||||
/*
|
||||
Mixin for breadcrumbs style.
|
||||
Parameters:
|
||||
- $breadcrumbs-name : The class name for the breadcrumbs style.
|
||||
- $breadcrumbs-style : The style of the breadcrumbs separator character. [1][2][3]
|
||||
Notes:
|
||||
- [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is
|
||||
supplied, it will be treated as 3.
|
||||
- [2] : The three provided styles are as follows:
|
||||
- $breadcrumbs-style == 1 : forward slash.
|
||||
- $breadcrumbs-style == 2 : greater than symbol.
|
||||
- $breadcrumbs-style == 3 : right angle symbol (default).
|
||||
- [3] : The value of $breadcrumbs-style can be omitted and will default to 3.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic container style.
|
||||
Parameters:
|
||||
- $container-name : The class name for the generic container.
|
||||
- $container-color : The text color of the generic container.
|
||||
- $container-bg-color : The background color of the generic container.
|
||||
- $container-border : The border style of the generic container.
|
||||
- $container-border-radius : The border-radius of the generic container.
|
||||
- $container-padding : The content badding of the generic container.
|
||||
Notes:
|
||||
- [1] : This mixin is also used for making alerts and panels.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic alert style.
|
||||
Parameters:
|
||||
- $alert-name : The class name for the alert.
|
||||
- $alert-color : The text color of the alert.
|
||||
- $alert-bg-color : The background color of the alert.
|
||||
- $alert-border : The border style of the alert.
|
||||
- $alert-border-radius : The border-radius of the alert.
|
||||
- $alert-padding : The content badding of the alert.
|
||||
- $close-name : The class name for the close utility. [1]
|
||||
Notes:
|
||||
- [1] : The value of $close-name must match that of the class specified
|
||||
for close elements for the alert to work correctly.
|
||||
- [2] : This mixin uses `make-generic-container` to partially generate its
|
||||
CSS.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic panel style.
|
||||
Parameters:
|
||||
- $panel-name : The class name for the panel.
|
||||
- $panel-color : The text color of the panel.
|
||||
- $panel-bg-color : The background color of the panel.
|
||||
- $panel-border : The border style of the panel.
|
||||
- $panel-border-radius : The border-radius of the panel.
|
||||
- $panel-padding : The content badding of the panel.
|
||||
- $panel-header-name : The class name for the panel's header.
|
||||
- $panel-header-color : The text color of the panel's header.
|
||||
- $panel-header-bg-color : The background color of the panel's header.
|
||||
- $panel-header-padding : The padding of the panel's header.
|
||||
Notes:
|
||||
- [1] : This mixin uses `make-generic-container` to partially generate its
|
||||
CSS.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic button states.
|
||||
Parameters:
|
||||
- $button-states-name : The class name of the stateful button.
|
||||
Notes:
|
||||
- [1] : This mixin is experimental, it might be buggy.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic button groups.
|
||||
Parameters:
|
||||
- $btn-group-name : The class name of the button group.
|
||||
- $btn-name : The name of the button class. [1][2]
|
||||
- $btn-group-border : The border style of the button group.
|
||||
- $btn-group-border-radius : The border radius at the edges of the button group.
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must match that of the generic button class.
|
||||
- [2] : The value of $btn-name can be hacked to allow for button variants to be styled
|
||||
in custom manners (e.g. if you button class is `btn` and your button variant's class
|
||||
is `blue`, you can style it, using `btn +'.blue'`).
|
||||
- [3] : This mixin is experimental, although it is marked stable for most cases.
|
||||
- [4] : The results of this mixin are purely stylistic and do not provide any grouping
|
||||
functionality.
|
||||
*/
|
||||
.brdcrmb {
|
||||
list-style: none; }
|
||||
.brdcrmb > li {
|
||||
display: inline-block; }
|
||||
.brdcrmb > li + li:before {
|
||||
content: '\27e9\00a0'; }
|
||||
|
||||
.well {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #e7e7e7;
|
||||
color: #222;
|
||||
padding: 20px; }
|
||||
|
||||
.alert-blue + div {
|
||||
border: 1px solid #32688d;
|
||||
border-radius: 4px;
|
||||
background-color: #5e9cc7;
|
||||
color: #244c68;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-blue {
|
||||
display: none; }
|
||||
input[type="checkbox"].alert-blue + div {
|
||||
display: none;
|
||||
position: relative; }
|
||||
input[type="checkbox"].alert-blue + div a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: #173142; }
|
||||
input[type="checkbox"].alert-blue + div a:hover, input[type="checkbox"].alert-blue + div a:active, input[type="checkbox"].alert-blue + div a:focus {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-blue + div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: #244c68; }
|
||||
input[type="checkbox"].alert-blue + div .close:hover, input[type="checkbox"].alert-blue + div .close:active, input[type="checkbox"].alert-blue + div .close:focus {
|
||||
color: #173142; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-blue + div {
|
||||
display: block; }
|
||||
|
||||
.alert-green + div {
|
||||
border: 1px solid #238e37;
|
||||
border-radius: 4px;
|
||||
background-color: #46d160;
|
||||
color: #196527;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-green {
|
||||
display: none; }
|
||||
input[type="checkbox"].alert-green + div {
|
||||
display: none;
|
||||
position: relative; }
|
||||
input[type="checkbox"].alert-green + div a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: #0f3c17; }
|
||||
input[type="checkbox"].alert-green + div a:hover, input[type="checkbox"].alert-green + div a:active, input[type="checkbox"].alert-green + div a:focus {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-green + div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: #196527; }
|
||||
input[type="checkbox"].alert-green + div .close:hover, input[type="checkbox"].alert-green + div .close:active, input[type="checkbox"].alert-green + div .close:focus {
|
||||
color: #0f3c17; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-green + div {
|
||||
display: block; }
|
||||
|
||||
.alert-red + div {
|
||||
border: 1px solid #e51a1a;
|
||||
border-radius: 4px;
|
||||
background-color: #ef7676;
|
||||
color: #b71515;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-red {
|
||||
display: none; }
|
||||
input[type="checkbox"].alert-red + div {
|
||||
display: none;
|
||||
position: relative; }
|
||||
input[type="checkbox"].alert-red + div a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: #891010; }
|
||||
input[type="checkbox"].alert-red + div a:hover, input[type="checkbox"].alert-red + div a:active, input[type="checkbox"].alert-red + div a:focus {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-red + div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: #b71515; }
|
||||
input[type="checkbox"].alert-red + div .close:hover, input[type="checkbox"].alert-red + div .close:active, input[type="checkbox"].alert-red + div .close:focus {
|
||||
color: #891010; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-red + div {
|
||||
display: block; }
|
||||
|
||||
.panel {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
color: #222;
|
||||
padding: 0; }
|
||||
|
||||
.panel > * {
|
||||
padding: 10px; }
|
||||
.panel .head {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #222;
|
||||
background-color: #e7e7e7;
|
||||
padding: 10px;
|
||||
margin: 0; }
|
||||
|
||||
.btn-grp .btn {
|
||||
border: 1px solid #ccc;
|
||||
margin: 0; }
|
||||
.btn-grp .btn:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.blue {
|
||||
border: 1px solid #32688d;
|
||||
margin: 0; }
|
||||
.btn-grp .btn.blue:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.blue:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.blue:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.green {
|
||||
border: 1px solid #238e37;
|
||||
margin: 0; }
|
||||
.btn-grp .btn.green:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.green:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.green:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.red {
|
||||
border: 1px solid 1px solid #e51a1a;
|
||||
margin: 0; }
|
||||
.btn-grp .btn.red:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.red:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.red:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
|
|
|||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -371,3 +371,42 @@ $carousel-control-color: #fafafa; // Color for the carousel's control e
|
|||
// Use carousel mixin to create carousel with given specs. For more
|
||||
// information refer to the _carousel.scss file to check the definitions.
|
||||
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utility module (_utility.scss)
|
||||
//====================================================================
|
||||
// Utility class names.
|
||||
$breadcrumbs-class-name: brdcrmb; // Name for the breadcrumbs class
|
||||
$well-class-name: well; // Name for the well class
|
||||
$alert-style1-class: alert-blue; // Name for the style 1 alert
|
||||
$alert-style2-class: alert-green; // Name for the style 2 alert
|
||||
$alert-style3-class: alert-red; // Name for the style 3 alert
|
||||
$panel-class-name: panel; // Name for the panel class
|
||||
$panel-header-name: head; // Name for the panel's header class
|
||||
$button-states-class-name: stateful; // Name for the stateful button class
|
||||
$button-group-class-name: btn-grp; // Name for the button group class
|
||||
// Utility color variables and styles (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$well-color: $body-color; // Text color for the well
|
||||
$well-bg-color: #e7e7e7; // Background color for the well
|
||||
$panel-color: $body-color; // Text color for the panel
|
||||
$panel-bg-color: $body-bg-color; // Background color for the panel
|
||||
$panel-header-color: $body-color; // Text color for the panel's header
|
||||
$panel-header-bg-color: #e7e7e7; // Background color for the panel's header
|
||||
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/utility';
|
||||
// Use utilities mixins to create utilities with given specs. For more
|
||||
// information refer to the _utility.scss file to check the definitions.
|
||||
@include make-breadcrumbs($breadcrumbs-class-name);
|
||||
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px);
|
||||
@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px);
|
||||
// Use experimental utilities mixins to create utilities with given
|
||||
// specs. Please exercise caution when using these mixins.
|
||||
//@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it.
|
||||
// The folowing mixin is considered stable, you can disable it if you need to.
|
||||
@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
|
||||
|
|
@ -371,3 +371,4 @@ $carousel-control-color: #fafafa; // Color for the carousel's control e
|
|||
// Use carousel mixin to create carousel with given specs. For more
|
||||
// information refer to the _carousel.scss file to check the definitions.
|
||||
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
|
||||
// TODO: Copy the stuff for utility
|
||||
205
scss/mini-extra/_utility.scss
Normal file
205
scss/mini-extra/_utility.scss
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
/*
|
||||
Mixin for breadcrumbs style.
|
||||
Parameters:
|
||||
- $breadcrumbs-name : The class name for the breadcrumbs style.
|
||||
- $breadcrumbs-style : The style of the breadcrumbs separator character. [1][2][3]
|
||||
Notes:
|
||||
- [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is
|
||||
supplied, it will be treated as 3.
|
||||
- [2] : The three provided styles are as follows:
|
||||
- $breadcrumbs-style == 1 : forward slash.
|
||||
- $breadcrumbs-style == 2 : greater than symbol.
|
||||
- $breadcrumbs-style == 3 : right angle symbol (default).
|
||||
- [3] : The value of $breadcrumbs-style can be omitted and will default to 3.
|
||||
*/
|
||||
@mixin make-breadcrumbs($breadcrumbs-name, $breadcrumbs-style: 3){
|
||||
.#{$breadcrumbs-name}{
|
||||
list-style: none;
|
||||
& > li{
|
||||
display: inline-block;
|
||||
& + li:before{
|
||||
@if $breadcrumbs-style == 1{
|
||||
content: '\002f\00a0';
|
||||
}
|
||||
@else if $breadcrumbs-style == 2{
|
||||
content: '\003e\00a0';
|
||||
}
|
||||
@else{
|
||||
content: '\27e9\00a0';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic container style.
|
||||
Parameters:
|
||||
- $container-name : The class name for the generic container.
|
||||
- $container-color : The text color of the generic container.
|
||||
- $container-bg-color : The background color of the generic container.
|
||||
- $container-border : The border style of the generic container.
|
||||
- $container-border-radius : The border-radius of the generic container.
|
||||
- $container-padding : The content badding of the generic container.
|
||||
Notes:
|
||||
- [1] : This mixin is also used for making alerts and panels.
|
||||
*/
|
||||
@mixin make-generic-container($container-name, $container-color, $container-bg-color, $container-border, $container-border-radius, $container-padding){
|
||||
.#{$container-name}{
|
||||
border: $container-border;
|
||||
border-radius: $container-border-radius;
|
||||
background-color: $container-bg-color;
|
||||
color: $container-color;
|
||||
padding: $container-padding;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic alert style.
|
||||
Parameters:
|
||||
- $alert-name : The class name for the alert.
|
||||
- $alert-color : The text color of the alert.
|
||||
- $alert-bg-color : The background color of the alert.
|
||||
- $alert-border : The border style of the alert.
|
||||
- $alert-border-radius : The border-radius of the alert.
|
||||
- $alert-padding : The content badding of the alert.
|
||||
- $close-name : The class name for the close utility. [1]
|
||||
Notes:
|
||||
- [1] : The value of $close-name must match that of the class specified
|
||||
for close elements for the alert to work correctly.
|
||||
- [2] : This mixin uses `make-generic-container` to partially generate its
|
||||
CSS.
|
||||
*/
|
||||
@mixin make-alert($alert-name, $alert-color, $alert-bg-color, $alert-border, $alert-border-radius, $alert-padding, $close-name){
|
||||
@include make-generic-container($alert-name+' + div', $alert-color, $alert-bg-color, $alert-border, $alert-border-radius, $alert-padding);
|
||||
input[type="checkbox"].#{$alert-name}{
|
||||
display: none;
|
||||
& + div{
|
||||
display: none;
|
||||
position: relative;
|
||||
& a{
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: darken($alert-color, 10%);
|
||||
&:hover, &:active, &:focus{
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
& .#{$close-name}{
|
||||
position: absolute;
|
||||
top: $alert-padding;
|
||||
right: $alert-padding;
|
||||
color: $alert-color;
|
||||
&:hover, &:active, &:focus{
|
||||
color: darken($alert-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked.#{$alert-name} + div{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic panel style.
|
||||
Parameters:
|
||||
- $panel-name : The class name for the panel.
|
||||
- $panel-color : The text color of the panel.
|
||||
- $panel-bg-color : The background color of the panel.
|
||||
- $panel-border : The border style of the panel.
|
||||
- $panel-border-radius : The border-radius of the panel.
|
||||
- $panel-padding : The content badding of the panel.
|
||||
- $panel-header-name : The class name for the panel's header.
|
||||
- $panel-header-color : The text color of the panel's header.
|
||||
- $panel-header-bg-color : The background color of the panel's header.
|
||||
- $panel-header-padding : The padding of the panel's header.
|
||||
Notes:
|
||||
- [1] : This mixin uses `make-generic-container` to partially generate its
|
||||
CSS.
|
||||
*/
|
||||
@mixin make-panel($panel-name, $panel-color, $panel-bg-color, $panel-border, $panel-border-radius, $panel-padding, $panel-header-name, $panel-header-color, $panel-header-bg-color, $panel-header-padding){
|
||||
@include make-generic-container($panel-name, $panel-color, $panel-bg-color, $panel-border, $panel-border-radius, 0);
|
||||
.#{$panel-name}{
|
||||
& > *{
|
||||
padding: $panel-padding;
|
||||
}
|
||||
& .#{$panel-header-name}{
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: $panel-border;
|
||||
color: $panel-header-color;
|
||||
background-color: $panel-header-bg-color;
|
||||
padding: $panel-header-padding;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Add popover mixin with directions etc.
|
||||
|
||||
//====================================================================
|
||||
// THE MIXINS SPECIFIED BELOW ARE EXPERIMENTAL AND MIGHT NOT BEHAVE
|
||||
// AS DOCUMENTED. EXERCISE CAUTION IF YOU USE THEM!
|
||||
//====================================================================
|
||||
/*
|
||||
Mixin for generic button states.
|
||||
Parameters:
|
||||
- $button-states-name : The class name of the stateful button.
|
||||
Notes:
|
||||
- [1] : This mixin is experimental, it might be buggy.
|
||||
*/
|
||||
@mixin make-button-states($button-states-name){
|
||||
input[type="checkbox"]{
|
||||
&.#{$button-states-name}{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
& + label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
display: none;
|
||||
& + label{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for generic button groups.
|
||||
Parameters:
|
||||
- $btn-group-name : The class name of the button group.
|
||||
- $btn-name : The name of the button class. [1][2]
|
||||
- $btn-group-border : The border style of the button group.
|
||||
- $btn-group-border-radius : The border radius at the edges of the button group.
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must match that of the generic button class.
|
||||
- [2] : The value of $btn-name can be hacked to allow for button variants to be styled
|
||||
in custom manners (e.g. if you button class is `btn` and your button variant's class
|
||||
is `blue`, you can style it, using `btn +'.blue'`).
|
||||
- [3] : This mixin is experimental, although it is marked stable for most cases.
|
||||
- [4] : The results of this mixin are purely stylistic and do not provide any grouping
|
||||
functionality.
|
||||
*/
|
||||
@mixin make-btn-group($btn-group-name, $btn-name, $btn-group-border, $btn-group-border-radius){
|
||||
.#{$btn-group-name}{
|
||||
& .#{$btn-name}{
|
||||
border: $btn-group-border;
|
||||
margin: 0;
|
||||
&:not(:first-child):not(:last-child){
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&:first-child{
|
||||
border-radius: $btn-group-border-radius 0 0 $btn-group-border-radius;
|
||||
border-right: 0;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0 $btn-group-border-radius $btn-group-border-radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue