improvement: rework button styling
This commit is contained in:
Kazhnuz
parent
604115a99c
commit
34debdb2c7
8 changed files with 792 additions and 482 deletions
973
css/style.css
973
css/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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
158
scss/_buttons.scss
Normal 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);}
|
||||
}
|
||||
|
|
@ -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);}
|
||||
}
|
||||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -3,7 +3,3 @@
|
|||
@import 'definitions';
|
||||
|
||||
@import 'commons';
|
||||
|
||||
@import 'colorize';
|
||||
|
||||
@import 'overrides';
|
||||
|
|
|
|||
Loading…
Reference in a new issue