Button styles mixins
This commit is contained in:
Angelos Chalaris
parent
850c97dbab
commit
8284e4c320
7 changed files with 441 additions and 56 deletions
|
|
@ -4,7 +4,7 @@ A minimal, responsive CSS framework to get you started.
|
|||
## Components
|
||||
|
||||
- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes
|
||||
- **button**: button styles `GZIPPED SIZE`: 443 bytes
|
||||
- **button**: button styles `GZIPPED SIZE`: 427 bytes
|
||||
- **form**: coming soon
|
||||
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes
|
||||
- **nav**: coming soon
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
margin: 0.7em 0;
|
||||
font-weight: 500; }
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
color: #484848;
|
||||
color: #555555;
|
||||
font-weight: 200; }
|
||||
|
||||
h1 {
|
||||
|
|
@ -306,7 +306,324 @@ textarea {
|
|||
-webkit-appearance: button;
|
||||
font: inherit; }
|
||||
|
||||
/*@import 'mini/button';
|
||||
@import 'mini/grid';
|
||||
// Use grid mixin to create grid with default specs.
|
||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);*/
|
||||
/*
|
||||
Mixin for button color variant.
|
||||
Parameters:
|
||||
- $btn-variant-color : The text color of the button variant.
|
||||
- $btn-variant-bg-color : The background color of the button variant.
|
||||
- $btn-variant-hover-style : Hover/active/focus style of the button variant. [1]
|
||||
- $btn-variant-hover-style-percentage : Hover/active/focus style of the button variant percentage modifier.
|
||||
Notes:
|
||||
- [1] : The values that $btn-variant-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`.
|
||||
- [2] : Do not use this mixin directly, use `make-btn-style` instead.
|
||||
*/
|
||||
/*
|
||||
Mixin for the buttons.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons.
|
||||
- $btn-border : The border of the buttons.
|
||||
- $btn-border-radius : The border-radius of the buttons.
|
||||
- $btn-margin : The margin of the buttons.
|
||||
- $btn-padding : The padding of the buttons.
|
||||
- $btn-color : The text color of the buttons.
|
||||
- $btn-bg-color : The background color of the buttons.
|
||||
- $btn-hover-style : Hover/active/focus style of the buttons. [1]
|
||||
- $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier.
|
||||
- $btn-cursor : The cursor style when hovering over the buttons.
|
||||
- $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled.
|
||||
- $btn-disabled-opacity : The opacity of the buttons when disabled.
|
||||
Notes:
|
||||
- [1] : The values that $btn-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`.
|
||||
- [2] : This only creates a basic button style. For more styles use `make-btn-style`.
|
||||
*/
|
||||
/*
|
||||
Mixin for button styles.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons. [1]
|
||||
- $btn-style-name : The class name of the button style.
|
||||
- $btn-style-color : The text color of the button style.
|
||||
- $btn-style-bg-color : The background color of the button style.
|
||||
- $btn-style-hover-style : Hover/active/focus style of the button style. [2][3]
|
||||
- $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3]
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
||||
the specified style will not work correctly.
|
||||
- [2] : The values that $btn-style-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`.
|
||||
- [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten`
|
||||
and `7.5%` if not specified.
|
||||
- [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
||||
`make-btn`.
|
||||
*/
|
||||
/*
|
||||
Mixin for button sizes.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons. [1]
|
||||
- $btn-size-name : The class name of the button size.
|
||||
- $btn-size-padding : The padding of the button size.
|
||||
- $btn-size-font-size : The font-size of the button size.
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
||||
the specified style will not work correctly.
|
||||
- [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
||||
`make-btn`.
|
||||
*/
|
||||
.btn, a.btn, a.btn:visited {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
margin: 2px 0;
|
||||
padding: 6px 12px;
|
||||
color: #2a2a2a;
|
||||
background: #c2c2c2;
|
||||
cursor: pointer; }
|
||||
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
|
||||
background: #d5d5d5; }
|
||||
.btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
||||
.btn.blue, a.btn.blue, a.btn.blue:visited {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
|
||||
background: #5597c3; }
|
||||
|
||||
.btn.green, a.btn.green, a.btn.green:visited {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
|
||||
background: #3bcf57; }
|
||||
|
||||
.btn.red, a.btn.red, a.btn.red:visited {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
.btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus {
|
||||
background: #ee6a6a; }
|
||||
|
||||
.btn.lg {
|
||||
padding: 9px 15px;
|
||||
font-size: 135%; }
|
||||
|
||||
.btn.sm {
|
||||
padding: 4px 8px;
|
||||
font-size: 80%; }
|
||||
|
||||
/*
|
||||
Mixin for responsive, mobile-first grid.
|
||||
Parameters:
|
||||
- $container-name : The class name of the container for the grid.
|
||||
- $container-padding : The left and right padding of the container. [1]
|
||||
- $row-name : The class name of the grid's rows.
|
||||
- $col-name : The class name of the grid's columns.
|
||||
- $col-number : The amount of columns in the grid.
|
||||
- $xs-prefix : Class prefix for extra small screens.
|
||||
- $sm-prefix : Class prefix for small screens.
|
||||
- $md-prefix : Class prefix for medium screens.
|
||||
- $lg-prefix : Class prefix for large screens.
|
||||
- $hide-suffix : Class suffix for hidden columns. [2]
|
||||
- $sm-breakpoint : Breakpoint for small screens.
|
||||
- $md-breakpoint : Breakpoint for medium screens.
|
||||
- $lg-breakpoint : Breakpoint for large screens.
|
||||
Notes:
|
||||
- [1] : The padding of the container might cause the page to grow by $container-padding to the right. This
|
||||
can be fixed either via @media queries or setting the padding to 0.
|
||||
- [2] : Columns with the $hide-suffix will be only hidden in the screen size specified.
|
||||
- [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information.
|
||||
*/
|
||||
.grid-container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%; }
|
||||
.grid-container * {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.row:before, .row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
padding: 12px; }
|
||||
|
||||
.xs-1 {
|
||||
width: 8.33333%; }
|
||||
|
||||
.xs-2 {
|
||||
width: 16.66667%; }
|
||||
|
||||
.xs-3 {
|
||||
width: 25%; }
|
||||
|
||||
.xs-4 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.xs-5 {
|
||||
width: 41.66667%; }
|
||||
|
||||
.xs-6 {
|
||||
width: 50%; }
|
||||
|
||||
.xs-7 {
|
||||
width: 58.33333%; }
|
||||
|
||||
.xs-8 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.xs-9 {
|
||||
width: 75%; }
|
||||
|
||||
.xs-10 {
|
||||
width: 83.33333%; }
|
||||
|
||||
.xs-11 {
|
||||
width: 91.66667%; }
|
||||
|
||||
.xs-12 {
|
||||
width: 100%; }
|
||||
|
||||
.sm-no,
|
||||
.md-no,
|
||||
.lg-no {
|
||||
display: block; }
|
||||
|
||||
.xs-no {
|
||||
display: none; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sm-1 {
|
||||
width: 8.33333%; }
|
||||
|
||||
.sm-2 {
|
||||
width: 16.66667%; }
|
||||
|
||||
.sm-3 {
|
||||
width: 25%; }
|
||||
|
||||
.sm-4 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.sm-5 {
|
||||
width: 41.66667%; }
|
||||
|
||||
.sm-6 {
|
||||
width: 50%; }
|
||||
|
||||
.sm-7 {
|
||||
width: 58.33333%; }
|
||||
|
||||
.sm-8 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.sm-9 {
|
||||
width: 75%; }
|
||||
|
||||
.sm-10 {
|
||||
width: 83.33333%; }
|
||||
|
||||
.sm-11 {
|
||||
width: 91.66667%; }
|
||||
|
||||
.sm-12 {
|
||||
width: 100%; }
|
||||
|
||||
.xs-no,
|
||||
.md-no,
|
||||
.lg-no {
|
||||
display: block; }
|
||||
|
||||
.sm-no {
|
||||
display: none; } }
|
||||
@media (min-width: 1024px) {
|
||||
.md-1 {
|
||||
width: 8.33333%; }
|
||||
|
||||
.md-2 {
|
||||
width: 16.66667%; }
|
||||
|
||||
.md-3 {
|
||||
width: 25%; }
|
||||
|
||||
.md-4 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.md-5 {
|
||||
width: 41.66667%; }
|
||||
|
||||
.md-6 {
|
||||
width: 50%; }
|
||||
|
||||
.md-7 {
|
||||
width: 58.33333%; }
|
||||
|
||||
.md-8 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.md-9 {
|
||||
width: 75%; }
|
||||
|
||||
.md-10 {
|
||||
width: 83.33333%; }
|
||||
|
||||
.md-11 {
|
||||
width: 91.66667%; }
|
||||
|
||||
.md-12 {
|
||||
width: 100%; }
|
||||
|
||||
.xs-no,
|
||||
.sm-no,
|
||||
.lg-no {
|
||||
display: block; }
|
||||
|
||||
.md-no {
|
||||
display: none; } }
|
||||
@media (min-width: 1280px) {
|
||||
.lg-1 {
|
||||
width: 8.33333%; }
|
||||
|
||||
.lg-2 {
|
||||
width: 16.66667%; }
|
||||
|
||||
.lg-3 {
|
||||
width: 25%; }
|
||||
|
||||
.lg-4 {
|
||||
width: 33.33333%; }
|
||||
|
||||
.lg-5 {
|
||||
width: 41.66667%; }
|
||||
|
||||
.lg-6 {
|
||||
width: 50%; }
|
||||
|
||||
.lg-7 {
|
||||
width: 58.33333%; }
|
||||
|
||||
.lg-8 {
|
||||
width: 66.66667%; }
|
||||
|
||||
.lg-9 {
|
||||
width: 75%; }
|
||||
|
||||
.lg-10 {
|
||||
width: 83.33333%; }
|
||||
|
||||
.lg-11 {
|
||||
width: 91.66667%; }
|
||||
|
||||
.lg-12 {
|
||||
width: 100%; }
|
||||
|
||||
.xs-no,
|
||||
.sm-no,
|
||||
.md-no {
|
||||
display: block; }
|
||||
|
||||
.lg-no {
|
||||
display: none; } }
|
||||
|
|
|
|||
2
css/mini-full.min.css
vendored
2
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,13 @@
|
|||
@import 'mini/variables';
|
||||
@import 'mini/base';
|
||||
/*@import 'mini/button';
|
||||
@import 'mini/button';
|
||||
// Use button mixins to create buttons with default specs.
|
||||
@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color);
|
||||
@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color);
|
||||
@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color);
|
||||
@include make-btn-size(btn, lg, 9px 15px, 135%);
|
||||
@include make-btn-size(btn, sm, 4px 8px, 80%);
|
||||
@import 'mini/grid';
|
||||
// Use grid mixin to create grid with default specs.
|
||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);*/
|
||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
||||
|
|
|
|||
|
|
@ -1,43 +1,106 @@
|
|||
@mixin btn-variant ($color, $background){
|
||||
color: $color;
|
||||
background: $background;
|
||||
/*
|
||||
Mixin for button color variant.
|
||||
Parameters:
|
||||
- $btn-variant-color : The text color of the button variant.
|
||||
- $btn-variant-bg-color : The background color of the button variant.
|
||||
- $btn-variant-hover-style : Hover/active/focus style of the button variant. [1]
|
||||
- $btn-variant-hover-style-percentage : Hover/active/focus style of the button variant percentage modifier.
|
||||
Notes:
|
||||
- [1] : The values that $btn-variant-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`.
|
||||
- [2] : Do not use this mixin directly, use `make-btn-style` instead.
|
||||
*/
|
||||
@mixin btn-variant ($btn-variant-color, $btn-variant-bg-color, $btn-variant-hover-style, $btn-variant-hover-style-percentage){
|
||||
color: $btn-variant-color;
|
||||
background: $btn-variant-bg-color;
|
||||
&:hover, &:active, &:focus{
|
||||
background: lighten($background, 7.5%);
|
||||
@if $btn-variant-hover-style == 'lighten'{
|
||||
background: lighten($btn-variant-bg-color, $btn-variant-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($btn-variant-bg-color, $btn-variant-hover-style-percentage); // 7.5%
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn, a.btn, a.btn:visited{
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
padding: 6px 12px;
|
||||
border: 0;
|
||||
@include btn-variant($btn-color, $btn-background-color);
|
||||
&.disabled, &[disabled], &fieldset[disabled]{
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
/*
|
||||
Mixin for the buttons.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons.
|
||||
- $btn-border : The border of the buttons.
|
||||
- $btn-border-radius : The border-radius of the buttons.
|
||||
- $btn-margin : The margin of the buttons.
|
||||
- $btn-padding : The padding of the buttons.
|
||||
- $btn-color : The text color of the buttons.
|
||||
- $btn-bg-color : The background color of the buttons.
|
||||
- $btn-hover-style : Hover/active/focus style of the buttons. [1]
|
||||
- $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier.
|
||||
- $btn-cursor : The cursor style when hovering over the buttons.
|
||||
- $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled.
|
||||
- $btn-disabled-opacity : The opacity of the buttons when disabled.
|
||||
Notes:
|
||||
- [1] : The values that $btn-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`.
|
||||
- [2] : This only creates a basic button style. For more styles use `make-btn-style`.
|
||||
*/
|
||||
@mixin make-btn( $btn-name, $btn-border, $btn-border-radius, $btn-margin,
|
||||
$btn-padding, $btn-color, $btn-bg-color,
|
||||
$btn-hover-style, $btn-hover-style-percentage,
|
||||
$btn-cursor, $btn-disabled-cursor, $btn-disabled-opacity){
|
||||
.#{$btn-name}, a.#{$btn-name}, a.#{$btn-name}:visited{
|
||||
display: inline-block;
|
||||
border: $btn-border;
|
||||
border-radius: $btn-border-radius;
|
||||
margin: $btn-margin;
|
||||
padding: $btn-padding;
|
||||
@include btn-variant($btn-color, $btn-bg-color, $btn-hover-style, $btn-hover-style-percentage);
|
||||
cursor: $btn-cursor;
|
||||
&.disabled, &[disabled], &fieldset[disabled]{
|
||||
cursor: $btn-disabled-cursor;
|
||||
opacity: $btn-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn.blue, a.btn.blue, a.btn.blue:visited{
|
||||
@include btn-variant($btn-color-alt, $btn-b-background-color);
|
||||
/*
|
||||
Mixin for button styles.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons. [1]
|
||||
- $btn-style-name : The class name of the button style.
|
||||
- $btn-style-color : The text color of the button style.
|
||||
- $btn-style-bg-color : The background color of the button style.
|
||||
- $btn-style-hover-style : Hover/active/focus style of the button style. [2][3]
|
||||
- $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3]
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
||||
the specified style will not work correctly.
|
||||
- [2] : The values that $btn-style-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`.
|
||||
- [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten`
|
||||
and `7.5%` if not specified.
|
||||
- [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
||||
`make-btn`.
|
||||
*/
|
||||
@mixin make-btn-style($btn-name, $btn-style-name, $btn-style-color, $btn-style-bg-color, $btn-style-hover-style: lighten, $btn-style-hover-style-percentage: 7.5%){
|
||||
.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}, a.#{$btn-name}.#{$btn-style-name}:visited{
|
||||
@include btn-variant($btn-alt-color, $btn-style-bg-color, $btn-style-hover-style, $btn-style-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.green, a.btn.green, a.btn.green:visited{
|
||||
@include btn-variant($btn-color-alt, $btn-g-background-color);
|
||||
}
|
||||
|
||||
.btn.red, a.btn.red, a.btn.red:visited{
|
||||
@include btn-variant($btn-color-alt, $btn-r-background-color);
|
||||
}
|
||||
|
||||
.btn.lg{
|
||||
padding: 9px 15px;
|
||||
font-size: 135%;
|
||||
}
|
||||
.btn.sm{
|
||||
padding: 4px 8px;
|
||||
font-size: 80%;
|
||||
/*
|
||||
Mixin for button sizes.
|
||||
Parameters:
|
||||
- $btn-name : The class name of the buttons. [1]
|
||||
- $btn-size-name : The class name of the button size.
|
||||
- $btn-size-padding : The padding of the button size.
|
||||
- $btn-size-font-size : The font-size of the button size.
|
||||
Notes:
|
||||
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
||||
the specified style will not work correctly.
|
||||
- [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
||||
`make-btn`.
|
||||
*/
|
||||
@mixin make-btn-size($btn-name, $btn-size-name, $btn-size-padding, $btn-size-font-size){
|
||||
.#{$btn-name}.#{$btn-size-name}{
|
||||
padding: $btn-size-padding;
|
||||
font-size: $btn-size-font-size;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ $h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
|||
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
||||
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
||||
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
||||
$header-small-color: lighten($body-color, 15%); // Header small text color
|
||||
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||||
$header-small-font-weight: 200; // Header small font weight
|
||||
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
||||
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
||||
|
|
@ -45,12 +45,10 @@ $fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style fo
|
|||
$fieldset-border-radius: 4px; // Border radius for fieldset
|
||||
$fieldset-margin: 0 2px; // Margin for fieldset
|
||||
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
||||
|
||||
|
||||
// Button defaults
|
||||
$btn-color: #2a2a2a;
|
||||
$btn-color-alt: #eeeeee;
|
||||
$btn-background-color: #c2c2c2;
|
||||
$btn-b-background-color: #3f84b3;
|
||||
$btn-g-background-color: #2db747;
|
||||
$btn-r-background-color: #ea4848;
|
||||
// Button default colors
|
||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||
$btn-default-bg-color: #c2c2c2; // Default background color for buttons
|
||||
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
||||
$btn-g-bg-color: #2db747; // Color for button style 2
|
||||
$btn-r-bg-color: #ea4848; // Color for button style 3
|
||||
|
|
@ -56,7 +56,7 @@ Suspendisse varius turpis et dui viverra semper.</pre>
|
|||
<li>Fusce feugiat rhoncus eros, id auctor mauris facilisis quis.</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn red lg">ut justo</a>.
|
||||
<div>Etiam maximus, ante vitae porttitor tincidunt, sem erat pharetra turpis, a ornare tortor purus <a href="https://www.google.com" class="btn lg">ut justo</a>.
|
||||
</div>
|
||||
<br>
|
||||
<button type="button" class="green sm btn">Sample button</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue