kazhnuz
/
kazhnuz.css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chore: split buttons

This commit is contained in:
Kazhnuz Klappsthul 2021-07-30 13:20:53 +02:00
parent 48eea84b59
commit 998886ddd4
10 changed files with 160 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/scss/_drawing.scss
View File

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

1
src/scss/_mixins.scss
View File

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

12
src/scss/components/_badges.scss Normal file
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));
}
}
}

2
src/scss/components/_breadcrumb.scss
View File

@ -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);

26
src/scss/components/_btn-groups.scss Normal file
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;
}
}

165
src/scss/components/_buttons.scss
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 {
@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();
}

8
src/scss/components/_menus.scss
View File

@ -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));
}
}
}

7
src/scss/components/_navbars.scss
View File

@ -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;
}

5
src/scss/definitions/_sizing.scss
View File

@ -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)

73
src/scss/mixins/_btns.scss Normal file
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%);
}
}
}