272 lines
8.8 KiB
SCSS
272 lines
8.8 KiB
SCSS
/*
|
|
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: 0;
|
|
border-bottom: $panel-border;
|
|
color: $panel-header-color;
|
|
background-color: $panel-header-bg-color;
|
|
padding: $panel-header-padding;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
Mixin for generic popover style.
|
|
Parameters:
|
|
- $popover-name : The name for the popover style
|
|
- $popover-direction : The direction of the popover. [1]
|
|
- $popover-border-radius : The border radius for the popover style.
|
|
- $popover-distance : The distance for the popover style's placement. [2]
|
|
- $popover-color : The text color of the popover style.
|
|
- $popover-bg-color : The background color of the popover style.
|
|
- $popover-padding : The padding of the popover.
|
|
Notes:
|
|
- [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value
|
|
is provided, it will be treated as 'bottom'.
|
|
- [2] : The value of $popover-distance should be treated as a general guideline for the popover
|
|
distance and is supposed to be tweaked with inline styles or helper classes for better use.
|
|
*/
|
|
@mixin make-popover( $popover-name, $popover-direction, $popover-border-radius,
|
|
$popover-distance, $popover-color, $popover-bg-color, $popover-padding ){
|
|
input[type="checkbox"]{
|
|
&.#{$popover-name}{
|
|
display:none;
|
|
+ label{
|
|
position: relative;
|
|
}
|
|
+ label > .#{$popover-name}{
|
|
position: absolute;
|
|
display: none;
|
|
background-color: $popover-bg-color;
|
|
color: $popover-color;
|
|
border-radius: $popover-border-radius;
|
|
padding: $popover-padding;
|
|
z-index: 998;
|
|
width: auto;
|
|
@if $popover-direction == 'top'
|
|
{
|
|
bottom: 49px;
|
|
}
|
|
@else{
|
|
top: 49px;
|
|
}
|
|
&:before{
|
|
position: absolute;
|
|
display: block;
|
|
@if $popover-direction == 'top'
|
|
{
|
|
border-top: 7px solid $popover-bg-color;
|
|
border-right: 7px solid transparent;
|
|
border-left: 7px solid transparent;
|
|
bottom: -7px;
|
|
}
|
|
@else{
|
|
border-bottom: 7px solid $popover-bg-color;
|
|
border-right: 7px solid transparent;
|
|
border-left: 7px solid transparent;
|
|
top: -7px;
|
|
}
|
|
content: '';
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
}
|
|
}
|
|
}
|
|
&:checked.#{$popover-name}{
|
|
+ label > .#{$popover-name}{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//====================================================================
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
} |