improvement: rework button styling

This commit is contained in:
Kazhnuz 2019-10-10 09:53:59 +02:00
parent 604115a99c
commit 34debdb2c7
8 changed files with 792 additions and 482 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -52,9 +52,7 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item"><a href="#">Contenus</a></li>
<li class="breadcrumb-item active" aria-current="page">Article exemple</li>
<li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
</ol>
</nav>
@ -210,8 +208,8 @@ In id suscipit elit.</code></pre>
</div>
<aside class="sidebar column col-3">
<ul class="menu menu-magenta">
<li class="menu-header bg-magenta"><i class="fa fa-folder"></i> Catégories</li>
<ul class="menu menu-primary">
<li class="menu-header"><i class="fa fa-folder"></i> Catégories</li>
<li class="menu-item">
<a href="#">
Images

158
scss/_buttons.scss Normal file
View file

@ -0,0 +1,158 @@
/*
* 3. Buttons and labels
* All clickable elements
*
*/
$color-button-light: $color-light;
$color-button-dark: $color-dark;
$button_large: 1em;
$button_small: 0.40em;
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/1.5;
right:-$size/1.5;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
}
}
@mixin button($size) {
padding: $size;
padding-top: $size/2;
padding-bottom:$size/2;
height:auto;
margin: $size/1.5;
@include borders();
@include border-radius();
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
}
@include biseau($size);
}
@mixin colorize-button($background-color, $text-color) {
//@include background-color($background-color, $text-color);
color: $text-color;
&:before {
background-color: $background-color;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color, $text-color);
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color, lighten($text-color, 5%));
}
}
}
@mixin button-color($background-color, $text-color) {
@include button-fullcontrol($background-color, lighten($background-color, 10%), $text-color)
}
@mixin button-darken($background-color, $text-color) {
@include button-fullcontrol($background-color, darken($background-color, 05%), $text-color)
}
.btn {
@include button($button_large);
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
&:hover, &:active {
@include borders();
}
}
.label, label.label, a.label, .chip, a.chip {
@include button($button_small);
}
// NAVBAR SPECIAL BUTTONS
.navbar .btn-link {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light)
}
// Breadcrumb
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
@include biseau($button-large);
padding: 0px;
background-color:transparent;
}
.breadcrumb li.breadcrumb-item {
margin:0!important;
padding:0!important;
&:before {
display:none;
}
a, span {
@include button($button-large);
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
margin:0 $button-large/1.5 0 $button-large/1.5!important;
&:before {
content: " "!important;
border-right:1px solid rgba(0,0,0,0.2);
}
&.active {
@include button-fullcontrol($color-primary, $color-primary, $color-light);
}
}
}
// COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
&-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $color-button-light); }
&-purple { @include button-color($color-purple, $color-button-light); }
&-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-darken($color-light2, $color-button-dark); }
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
&-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, $color-button-light);}
&-link {@include button-color(transparent, $color-dark);}
}
/* social */
.btn, a.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, $color-button-light);}
}

View file

@ -1,64 +0,0 @@
/* ------------------ COULEURS ------------------- */
$color-button-light: $color-light;
$color-button-dark: $color-dark;
@mixin button-lighten($background-color, $text-color) {
background-color: lighten($background-color, 10%);
color:$text-color;
}
@mixin button-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus {
@include button-lighten($background-color, $text-color);
}
}
}
@mixin badge-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-lighten($background-color, $text-color);
}
}
}
/* BUTTONS & BADGES */
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label {
&-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $color-button-light); }
&-purple { @include button-color($color-purple, $color-button-light); }
&-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-color($color-light2, $color-button-dark); }
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
&-yellow { @include button-color($color-yellow, $color-button-light); }
&-brown { @include button-color($color-brown, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, $color-button-light); }
}
/* social */
.btn, a.btn {
&-facebook {@include button-color(#3B5998, $color-button-light);}
&-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37, $color-button-light);}
}

View file

@ -4,24 +4,7 @@
/* ------------------ BUTTONS ------------------- */
.btn {
@include borders();
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
.btn:hover {
position:relative;
box-shadow: $narrow-shadow, $inset-shadow;
@include borders();
}
.btn:active {
position:relative;
box-shadow: $inset-shadow-inverted;
@include borders();
}
@import 'buttons';
.btn-group {
box-shadow: $large-shadow;
@ -93,8 +76,6 @@
width:100%
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){

View file

@ -52,10 +52,10 @@ a, a:hover, a:active {
}
::selection {
@include background-color($color-selection, $color-button-light);
@include background-color($color-selection, $color-light);
}
::-moz-selection {
@include background-color($color-selection, $color-button-light);
@include background-color($color-selection, $color-light);
}
mark {
@ -71,26 +71,26 @@ blockquote, pre {
/* BACKGROUNDS */
.bg {
&-blue { @include background-color($color-blue, $color-button-light); }
&-violet { @include background-color($color-violet, $color-button-light); }
&-purple { @include background-color($color-purple, $color-button-light); }
&-red { @include background-color($color-red, $color-button-light); }
&-orange { @include background-color($color-orange, $color-button-light); }
&-green { @include background-color($color-green, $color-button-light); }
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
&-dark { @include background-color($color-dark, $color-button-light); }
&-light { @include background-color($color-light, $color-button-dark); }
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
&-yellow { @include background-color($color-yellow, $color-button-light); }
&-brown { @include background-color($color-brown, $color-button-light); }
&-grey { @include background-color($color-grey, $color-button-light); }
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-purple { @include background-color($color-purple, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light, $color-dark); }
&-turquoise { @include background-color($color-turquoise, $color-light); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-brown { @include background-color($color-brown, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-button-light); }
&-secondary { @include background-color($color-secondary, $color-button-light); }
&-warning { @include background-color($color-warning, $color-button-light); }
&-danger { @include background-color($color-danger, $color-button-light); }
&-info { @include background-color($color-info, $color-button-light); }
&-success { @include background-color($color-success, $color-button-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
}
/* TEXT */

View file

@ -2,8 +2,4 @@
@import 'definitions';
@import 'commons';
@import 'colorize';
@import 'overrides';
@import 'commons';