chore: split buttons

This commit is contained in:
Kazhnuz 2021-07-30 13:20:53 +02:00
parent 48eea84b59
commit 998886ddd4
10 changed files with 160 additions and 141 deletions

View file

@ -6,6 +6,8 @@
*/ */
@import 'components/buttons'; @import 'components/buttons';
@import 'components/badges';
@import 'components/btn-groups';
@import 'components/breadcrumb'; @import 'components/breadcrumb';
@import 'components/navbars'; @import 'components/navbars';
@import 'components/pagination'; @import 'components/pagination';

View file

@ -5,5 +5,6 @@
@import 'mixins/responsive'; @import 'mixins/responsive';
@import 'mixins/borders'; @import 'mixins/borders';
@import 'mixins/shape'; @import 'mixins/shape';
@import 'mixins/btns';
@import 'mixins/panels'; @import 'mixins/panels';
@import 'mixins/li'; @import 'mixins/li';

View file

@ -0,0 +1,12 @@
.badge {
@include button(0rem);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
@each $name, $color in list-colors() {
&-#{$name} {
@include button-color(get-color($name));
}
}
}

View file

@ -19,7 +19,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
display:inline-block; display:inline-block;
@include button($button-large); @include button($button-large);
@include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2")); @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
margin:0 $breadcrumb_margin 0 $breadcrumb_margin; margin:0 $button-group-margin 0 $button-group-margin;
&.active { &.active {
@include button-fullcontrol($color-primary, $color-primary, $color-font-light); @include button-fullcontrol($color-primary, $color-primary, $color-font-light);

View file

@ -0,0 +1,26 @@
// BUTTONS GROUPS
.btn-toolbar {
padding: 0 $button-large;
}
.btn-group {
& > .btn {
@include border-radius($btn-radius);
margin:0 $button-group-margin 0 $button-group-margin!important;
}
&:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius:0;
&:before {
content: " "!important;
border-left:1px solid rgba(0,0,0,0.2);
}
}
&:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
}

View file

@ -4,72 +4,6 @@
* *
*/ */
$color-button-light: $color-background;
$color-button-dark: get-color("dark");
$button_large: $lineheight;
$button_small: $lineheight_quarter;
$breadcrumb_margin: $button-large/2.5;
@mixin button($size) {
@include button-layout($size);
@include shape-style($size);
@include button-hover();
font-weight: $fontweight_base;
}
@mixin button-layout($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
margin:$size/2;
margin-top: $size/3;
margin-bottom: $lineheight;
//font-size: 4.75mm;
line-height:$lineheight;
height:auto;
}
@mixin button-hover() {
transition: background .2s, border .2s, box-shadow .2s, color .2s;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
&:before {
transition: background-color .2s;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
color:$text-color;
&:visited {
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, lighten($background-color, 7.5%), getTextColorFromBackground($background-color));
}
.btn { .btn {
@include button($button_large); @include button($button_large);
&:hover, &:active { &:hover, &:active {
@ -88,69 +22,14 @@ $breadcrumb_margin: $button-large/2.5;
text-decoration:none; text-decoration:none;
} }
.chip, .badge {
@include button(0rem);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
// NAVBAR SPECIAL BUTTONS
.btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
@include prefer-no-borders();
padding-left: $button_small;
padding-right: $button_small;
}
.btn-readmore {
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
@include prefer-no-borders();
}
// BUTTONS GROUPS
$grouped-test: $button-large/1.5 - 0.05rem ;
.btn-toolbar {
padding: 0 $button-large;
}
.btn-group {
& > .btn {
@include border-radius($btn-radius);
margin:0 $breadcrumb_margin 0 $breadcrumb_margin!important;
}
&:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius:0;
&:before {
content: " "!important;
border-left:1px solid rgba(0,0,0,0.2);
}
}
&:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
}
// COLORIZE BUTTONS // COLORIZE BUTTONS
.btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { .btn {
@each $name, $color in list-colors() { @each $name, $color in list-colors() {
&-#{$name} { &-#{$name} {
@include button-color(get-color($name)); @include button-color(get-color($name));
@include borders();
} }
} }
&-link {
@include button-color(transparent);
color:$color-font!important;
}
} }
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
@ -163,6 +42,7 @@ $grouped-test: $button-large/1.5 - 0.05rem ;
.reagir { .reagir {
text-align:right; text-align:right;
} }
.btn, a.btn { .btn, a.btn {
&-facebook {@include button-color(#3B5998);} &-facebook {@include button-color(#3B5998);}
&-twitter {@include button-color(#55ACEE);} &-twitter {@include button-color(#55ACEE);}
@ -175,3 +55,8 @@ strong.btn-fake {
@include button($button_large); @include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1)); @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
} }
.btn-readmore, .btn-link {
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
@include prefer-no-borders();
}

View file

@ -69,3 +69,11 @@
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
} }
.label {
@each $name, $color in list-colors() {
&-#{$name} {
@include label-color(get-color($name));
}
}
}

View file

@ -8,3 +8,10 @@
} }
@include li-no-margin(); @include li-no-margin();
} }
.btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
@include prefer-no-borders();
padding-left: $button_small;
padding-right: $button_small;
}

View file

@ -9,6 +9,11 @@ $lineheight_quarter: $lineheight/4;
$card-header-margin: $lineheight; $card-header-margin: $lineheight;
// Buttons
$button_large: $lineheight;
$button_small: $lineheight_quarter;
$button-group-margin: $button-large/2.5;
// Responsives sizes // Responsives sizes
// - sm : Small tablets and large smartphones (landscape view) // - sm : Small tablets and large smartphones (landscape view)
// - md : Small tablets (portrait view) // - md : Small tablets (portrait view)

View file

@ -0,0 +1,73 @@
@mixin button($size) {
@include button-layout($size);
@include shape-style($size);
@include button-hover();
font-weight: $fontweight_base;
}
@mixin button-layout($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
margin:$size/2;
margin-top: $size/3;
margin-bottom: $lineheight;
//font-size: 4.75mm;
line-height:$lineheight;
height:auto;
}
@mixin button-hover() {
transition: background .2s, border .2s, box-shadow .2s, color .2s;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
&:before {
transition: background-color .2s;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
color:$text-color;
&:visited {
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, lighten($background-color, 7.5%), getTextColorFromBackground($background-color));
}
@mixin label-color($background-color) {
@include colorize-shape($background-color);
color:getTextColorFromBackground($background-color);
&:visited {
@include colorize-shape($background-color);
color:getTextColorFromBackground($background-color);
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-shape(accentuate($background-color));
color:lighten(getTextColorFromBackground($background-color), 5%);
}
}
}