improvement: rework button styling
This commit is contained in:
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">
|
<nav aria-label="breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="#">Accueil</a></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>
|
||||||
<li class="breadcrumb-item"><a href="#">Contenus</a></li>
|
|
||||||
<li class="breadcrumb-item active" aria-current="page">Article exemple</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
@ -210,8 +208,8 @@ In id suscipit elit.</code></pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="sidebar column col-3">
|
<aside class="sidebar column col-3">
|
||||||
<ul class="menu menu-magenta">
|
<ul class="menu menu-primary">
|
||||||
<li class="menu-header bg-magenta"><i class="fa fa-folder"></i> Catégories</li>
|
<li class="menu-header"><i class="fa fa-folder"></i> Catégories</li>
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
Images
|
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 ------------------- */
|
/* ------------------ BUTTONS ------------------- */
|
||||||
|
|
||||||
.btn {
|
@import 'buttons';
|
||||||
@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();
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
.btn-group {
|
||||||
box-shadow: $large-shadow;
|
box-shadow: $large-shadow;
|
||||||
|
@ -93,8 +76,6 @@
|
||||||
width:100%
|
width:100%
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media(max-width:767px){}
|
@media(max-width:767px){}
|
||||||
@media(min-width:768px){}
|
@media(min-width:768px){}
|
||||||
@media(min-width:992px){
|
@media(min-width:992px){
|
||||||
|
|
|
@ -52,10 +52,10 @@ a, a:hover, a:active {
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
@include background-color($color-selection, $color-button-light);
|
@include background-color($color-selection, $color-light);
|
||||||
}
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
@include background-color($color-selection, $color-button-light);
|
@include background-color($color-selection, $color-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
|
@ -71,26 +71,26 @@ blockquote, pre {
|
||||||
/* BACKGROUNDS */
|
/* BACKGROUNDS */
|
||||||
|
|
||||||
.bg {
|
.bg {
|
||||||
&-blue { @include background-color($color-blue, $color-button-light); }
|
&-blue { @include background-color($color-blue, $color-light); }
|
||||||
&-violet { @include background-color($color-violet, $color-button-light); }
|
&-violet { @include background-color($color-violet, $color-light); }
|
||||||
&-purple { @include background-color($color-purple, $color-button-light); }
|
&-purple { @include background-color($color-purple, $color-light); }
|
||||||
&-red { @include background-color($color-red, $color-button-light); }
|
&-red { @include background-color($color-red, $color-light); }
|
||||||
&-orange { @include background-color($color-orange, $color-button-light); }
|
&-orange { @include background-color($color-orange, $color-light); }
|
||||||
&-green { @include background-color($color-green, $color-button-light); }
|
&-green { @include background-color($color-green, $color-light); }
|
||||||
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
|
&-skyblue { @include background-color($color-skyblue, $color-light); }
|
||||||
&-dark { @include background-color($color-dark, $color-button-light); }
|
&-dark { @include background-color($color-dark, $color-light); }
|
||||||
&-light { @include background-color($color-light, $color-button-dark); }
|
&-light { @include background-color($color-light, $color-dark); }
|
||||||
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
|
&-turquoise { @include background-color($color-turquoise, $color-light); }
|
||||||
&-yellow { @include background-color($color-yellow, $color-button-light); }
|
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||||
&-brown { @include background-color($color-brown, $color-button-light); }
|
&-brown { @include background-color($color-brown, $color-light); }
|
||||||
&-grey { @include background-color($color-grey, $color-button-light); }
|
&-grey { @include background-color($color-grey, $color-light); }
|
||||||
|
|
||||||
&-primary { @include background-color($color-primary, $color-button-light); }
|
&-primary { @include background-color($color-primary, $color-light); }
|
||||||
&-secondary { @include background-color($color-secondary, $color-button-light); }
|
&-secondary { @include background-color($color-secondary, $color-light); }
|
||||||
&-warning { @include background-color($color-warning, $color-button-light); }
|
&-warning { @include background-color($color-warning, $color-light); }
|
||||||
&-danger { @include background-color($color-danger, $color-button-light); }
|
&-danger { @include background-color($color-danger, $color-light); }
|
||||||
&-info { @include background-color($color-info, $color-button-light); }
|
&-info { @include background-color($color-info, $color-light); }
|
||||||
&-success { @include background-color($color-success, $color-button-light); }
|
&-success { @include background-color($color-success, $color-light); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TEXT */
|
/* TEXT */
|
||||||
|
|
|
@ -3,7 +3,3 @@
|
||||||
@import 'definitions';
|
@import 'definitions';
|
||||||
|
|
||||||
@import 'commons';
|
@import 'commons';
|
||||||
|
|
||||||
@import 'colorize';
|
|
||||||
|
|
||||||
@import 'overrides';
|
|
||||||
|
|
Reference in a new issue