From 998886ddd4813dc0d27e1d22e840229c1d2d1431 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Fri, 30 Jul 2021 13:20:53 +0200 Subject: [PATCH] chore: split buttons --- src/scss/_drawing.scss | 2 + src/scss/_mixins.scss | 1 + src/scss/components/_badges.scss | 12 ++ src/scss/components/_breadcrumb.scss | 2 +- src/scss/components/_btn-groups.scss | 26 +++++ src/scss/components/_buttons.scss | 165 ++++----------------------- src/scss/components/_menus.scss | 8 ++ src/scss/components/_navbars.scss | 7 ++ src/scss/definitions/_sizing.scss | 5 + src/scss/mixins/_btns.scss | 73 ++++++++++++ 10 files changed, 160 insertions(+), 141 deletions(-) create mode 100644 src/scss/components/_badges.scss create mode 100644 src/scss/components/_btn-groups.scss create mode 100644 src/scss/mixins/_btns.scss diff --git a/src/scss/_drawing.scss b/src/scss/_drawing.scss index ae5e232..85c265c 100644 --- a/src/scss/_drawing.scss +++ b/src/scss/_drawing.scss @@ -6,6 +6,8 @@ */ @import 'components/buttons'; +@import 'components/badges'; +@import 'components/btn-groups'; @import 'components/breadcrumb'; @import 'components/navbars'; @import 'components/pagination'; diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index ffa3d52..d59131c 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -5,5 +5,6 @@ @import 'mixins/responsive'; @import 'mixins/borders'; @import 'mixins/shape'; +@import 'mixins/btns'; @import 'mixins/panels'; @import 'mixins/li'; diff --git a/src/scss/components/_badges.scss b/src/scss/components/_badges.scss new file mode 100644 index 0000000..fbc28c4 --- /dev/null +++ b/src/scss/components/_badges.scss @@ -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)); + } + } +} diff --git a/src/scss/components/_breadcrumb.scss b/src/scss/components/_breadcrumb.scss index b90a542..7a23669 100644 --- a/src/scss/components/_breadcrumb.scss +++ b/src/scss/components/_breadcrumb.scss @@ -19,7 +19,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb { display:inline-block; @include button($button-large); @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 { @include button-fullcontrol($color-primary, $color-primary, $color-font-light); diff --git a/src/scss/components/_btn-groups.scss b/src/scss/components/_btn-groups.scss new file mode 100644 index 0000000..aa33e1d --- /dev/null +++ b/src/scss/components/_btn-groups.scss @@ -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; + } +} diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index 5935aae..214b07f 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -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 { @include button($button_large); &:hover, &:active { @@ -88,90 +22,41 @@ $breadcrumb_margin: $button-large/2.5; 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 -.btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { - @each $name, $color in list-colors() { - &-#{$name} { - @include button-color(get-color($name)); - @include borders(); - } - } - &-link { - @include button-color(transparent); - color:$color-font!important; - } +.btn { + @each $name, $color in list-colors() { + &-#{$name} { + @include button-color(get-color($name)); + } } +} /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ .share-buttons { - margin-top: $lineheight; - padding-bottom: $lineheight; - } + margin-top: $lineheight; + padding-bottom: $lineheight; +} - .reagir { - text-align:right; - } - .btn, a.btn { - &-facebook {@include button-color(#3B5998);} - &-twitter {@include button-color(#55ACEE);} - &-googleplus {@include button-color(#d34836);} - &-diaspora {@include button-color(#313739);} - &-mastodon {@include button-color(#282c37);} - } +.reagir { + text-align:right; +} + +.btn, a.btn { + &-facebook {@include button-color(#3B5998);} + &-twitter {@include button-color(#55ACEE);} + &-googleplus {@include button-color(#d34836);} + &-diaspora {@include button-color(#313739);} + &-mastodon {@include button-color(#282c37);} +} strong.btn-fake { @include button($button_large); @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(); +} diff --git a/src/scss/components/_menus.scss b/src/scss/components/_menus.scss index 0a33c3c..985fff1 100644 --- a/src/scss/components/_menus.scss +++ b/src/scss/components/_menus.scss @@ -69,3 +69,11 @@ padding-left: $button_small; padding-right: $button_small; } + +.label { + @each $name, $color in list-colors() { + &-#{$name} { + @include label-color(get-color($name)); + } + } +} diff --git a/src/scss/components/_navbars.scss b/src/scss/components/_navbars.scss index 7dd9548..515aab4 100644 --- a/src/scss/components/_navbars.scss +++ b/src/scss/components/_navbars.scss @@ -8,3 +8,10 @@ } @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; +} diff --git a/src/scss/definitions/_sizing.scss b/src/scss/definitions/_sizing.scss index b26741b..b919239 100644 --- a/src/scss/definitions/_sizing.scss +++ b/src/scss/definitions/_sizing.scss @@ -9,6 +9,11 @@ $lineheight_quarter: $lineheight/4; $card-header-margin: $lineheight; +// Buttons +$button_large: $lineheight; +$button_small: $lineheight_quarter; +$button-group-margin: $button-large/2.5; + // Responsives sizes // - sm : Small tablets and large smartphones (landscape view) // - md : Small tablets (portrait view) diff --git a/src/scss/mixins/_btns.scss b/src/scss/mixins/_btns.scss new file mode 100644 index 0000000..26cf451 --- /dev/null +++ b/src/scss/mixins/_btns.scss @@ -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%); + } + } +}