chore: split buttons
This commit is contained in:
parent
48eea84b59
commit
998886ddd4
10 changed files with 160 additions and 141 deletions
|
@ -6,6 +6,8 @@
|
|||
*/
|
||||
|
||||
@import 'components/buttons';
|
||||
@import 'components/badges';
|
||||
@import 'components/btn-groups';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/navbars';
|
||||
@import 'components/pagination';
|
||||
|
|
|
@ -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
12
src/scss/components/_badges.scss
Normal 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));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
26
src/scss/components/_btn-groups.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
.btn {
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include button-color(get-color($name));
|
||||
@include borders();
|
||||
}
|
||||
}
|
||||
&-link {
|
||||
@include button-color(transparent);
|
||||
color:$color-font!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||
|
||||
.share-buttons {
|
||||
margin-top: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
.reagir {
|
||||
.reagir {
|
||||
text-align:right;
|
||||
}
|
||||
.btn, a.btn {
|
||||
}
|
||||
|
||||
.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();
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
73
src/scss/mixins/_btns.scss
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue