This repository has been archived on 2022-11-21. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-static/scss/_buttons.scss

194 lines
5.4 KiB
SCSS
Raw Normal View History

2019-10-10 09:53:59 +02:00
/*
* 3. Buttons and labels
* All clickable elements
*
*/
$color-button-light: $color-light;
$color-button-dark: $color-dark;
$button_large: 1.5rem;
$button_small: 0.375rem;
2019-10-10 09:53:59 +02:00
@mixin button($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
margin:$size/2;
margin-top: $size/3;
margin-bottom: 1.5rem;
//font-size: 4.75mm;
line-height:1.5rem;
2019-10-10 09:53:59 +02:00
height:auto;
@include borders();
@include border-radius();
font-weight: $fontweight_base;
2019-10-10 09:53:59 +02:00
2019-10-18 13:41:02 +02:00
background-color:transparent;
2019-10-10 09:53:59 +02:00
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
2019-10-18 13:41:02 +02:00
background-color:transparent;
2019-10-10 09:53:59 +02:00
}
@include biseau($size);
2019-10-10 16:58:18 +02:00
&: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;
}
}
2019-10-10 09:53:59 +02:00
}
@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) {
2019-10-18 10:07:38 +02:00
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
2019-10-10 09:53:59 +02:00
}
.btn {
@include button($button_large);
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
2019-10-10 09:53:59 +02:00
}
.label, label.label, a.label, .chip, a.chip {
2019-10-17 14:04:20 +02:00
@include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
.menu-label {
@include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
2019-10-10 09:53:59 +02:00
}
// NAVBAR SPECIAL BUTTONS
.navbar .btn-link {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light)
}
2019-10-18 13:41:02 +02:00
.btn-readmore {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
}
2019-10-10 16:58:18 +02:00
// BUTTONS GROUPS
$grouped-test: $button-large/1.5 - 0.05rem ;
2019-10-10 16:58:18 +02:00
.btn-toolbar {
padding: 0 $button-large;
}
.btn-group {
padding: 0px;
background-color:transparent;
margin-bottom: 1.33em;
}
.btn-group .btn {
margin:0 $grouped-test 0 $grouped-test!important;
}
/* ------------------ BREADCRUMB ------------------- */
2019-10-10 09:53:59 +02:00
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
padding-top: 0em;
2019-10-10 09:53:59 +02:00
background-color:transparent;
margin: 0;
padding-bottom:2rem;
2019-10-10 09:53:59 +02:00
}
.breadcrumb li.breadcrumb-item {
padding:0;
2019-10-10 09:53:59 +02:00
&:before {
display:none;
}
a, span {
display:inline-block;
2019-10-10 09:53:59 +02:00
@include button($button-large);
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
margin:0 $button-large/2.5 0 $button-large/2.5;
2019-10-10 09:53:59 +02:00
&:before {
content: " "!important;
border-right:1px solid rgba(0,0,0,0.2);
}
&.active {
@include button-fullcontrol($color-primary, $color-primary, $color-light);
}
}
2019-10-10 09:53:59 +02:00
}
// 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); }
2019-10-18 10:07:38 +02:00
&-light { @include button-color($color-light2, $color-button-dark); }
2019-10-10 09:53:59 +02:00
&-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);}
}
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin-top:1.5rem;
}
2019-10-10 09:53:59 +02:00
.reagir {
text-align:right;
}
2019-10-10 09:53:59 +02:00
.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);}
}