2019-10-10 09:53:59 +02:00
|
|
|
/*
|
|
|
|
* 3. Buttons and labels
|
|
|
|
* All clickable elements
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
2021-07-25 14:12:29 +02:00
|
|
|
$color-button-light: $color-background;
|
|
|
|
$color-button-dark: get-color("dark");
|
2019-10-10 09:53:59 +02:00
|
|
|
|
2019-12-07 16:06:38 +01:00
|
|
|
$button_large: $lineheight;
|
|
|
|
$button_small: $lineheight_quarter;
|
2019-10-10 09:53:59 +02:00
|
|
|
|
|
|
|
@mixin button($size) {
|
2021-07-26 09:10:43 +02:00
|
|
|
@include button-layout($size);
|
|
|
|
@include button-style($size);
|
|
|
|
@include button-hover();
|
|
|
|
font-weight: $fontweight_base;
|
2020-11-08 20:17:49 +01:00
|
|
|
}
|
|
|
|
|
2021-07-26 09:10:43 +02:00
|
|
|
@mixin button-layout($size) {
|
2019-10-10 09:53:59 +02:00
|
|
|
padding: $size;
|
2019-10-17 09:58:36 +02:00
|
|
|
padding-top: $size/3;
|
|
|
|
padding-bottom: $size/3;
|
|
|
|
margin:$size/2;
|
|
|
|
margin-top: $size/3;
|
2019-12-07 16:06:38 +01:00
|
|
|
margin-bottom: $lineheight;
|
2019-10-17 09:58:36 +02:00
|
|
|
//font-size: 4.75mm;
|
2019-12-07 16:06:38 +01:00
|
|
|
line-height:$lineheight;
|
2019-10-10 09:53:59 +02:00
|
|
|
height:auto;
|
2021-07-26 09:10:43 +02:00
|
|
|
}
|
2019-10-10 09:53:59 +02:00
|
|
|
|
2021-07-26 09:10:43 +02:00
|
|
|
@mixin button-hover() {
|
2021-07-26 12:48:12 +02:00
|
|
|
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
2021-07-26 09:10:43 +02:00
|
|
|
&: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 {
|
2021-07-26 12:48:12 +02:00
|
|
|
transition: background-color .2s;
|
2021-07-26 09:10:43 +02:00
|
|
|
}
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
2021-07-25 14:12:29 +02:00
|
|
|
@mixin colorize-button($background-color) {
|
2019-10-10 09:53:59 +02:00
|
|
|
&:before {
|
|
|
|
background-color: $background-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include colorize-button($background-color);
|
|
|
|
color:$text-color;
|
2020-11-08 20:17:49 +01:00
|
|
|
&:visited {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include colorize-button($background-color);
|
|
|
|
color:$text-color;
|
2020-11-08 20:17:49 +01:00
|
|
|
}
|
|
|
|
&, &:visited, &:not(.disabled):not(:disabled) {
|
2019-10-10 09:53:59 +02:00
|
|
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include colorize-button($hover-color);
|
|
|
|
color:lighten($text-color, 5%);
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-25 14:12:29 +02:00
|
|
|
@mixin button-color($background-color) {
|
|
|
|
@include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
@include button($button_large);
|
|
|
|
&:hover, &:active {
|
|
|
|
@include borders();
|
|
|
|
}
|
2019-10-17 09:58:36 +02:00
|
|
|
|
|
|
|
p &:last-child {
|
|
|
|
margin-bottom:0;
|
|
|
|
}
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
.btn-small {
|
|
|
|
@include button($button_small);
|
|
|
|
padding-left: $button_small;
|
|
|
|
padding-right: $button_small;
|
|
|
|
text-decoration:none;
|
2019-10-17 14:04:20 +02:00
|
|
|
}
|
|
|
|
|
2021-07-25 14:18:44 +02:00
|
|
|
.chip, .badge {
|
|
|
|
@include button(0rem);
|
|
|
|
padding-left: $button_small;
|
|
|
|
padding-right: $button_small;
|
|
|
|
text-decoration:none;
|
|
|
|
}
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
.menu-label {
|
2021-07-26 09:10:43 +02:00
|
|
|
@include button-style($button_small);
|
|
|
|
@include button-hover();
|
2019-10-17 14:04:20 +02:00
|
|
|
padding-left: $button_small;
|
|
|
|
padding-right: $button_small;
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// NAVBAR SPECIAL BUTTONS
|
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
.btn-navbar {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
|
2021-07-24 16:59:42 +02:00
|
|
|
padding-left: $button_small;
|
|
|
|
padding-right: $button_small;
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
2019-10-18 13:41:02 +02:00
|
|
|
.btn-readmore {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
|
2019-10-18 13:41:02 +02:00
|
|
|
}
|
|
|
|
|
2019-10-10 16:58:18 +02:00
|
|
|
// BUTTONS GROUPS
|
|
|
|
|
2019-10-17 09:58:36 +02:00
|
|
|
$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 {
|
2019-10-16 14:23:38 +02:00
|
|
|
padding-top: 0em;
|
2019-10-10 09:53:59 +02:00
|
|
|
background-color:transparent;
|
2019-10-16 14:23:38 +02:00
|
|
|
margin: 0;
|
2019-10-17 09:58:36 +02:00
|
|
|
padding-bottom:2rem;
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.breadcrumb li.breadcrumb-item {
|
2019-10-16 14:23:38 +02:00
|
|
|
padding:0;
|
2019-10-10 09:53:59 +02:00
|
|
|
&:before {
|
|
|
|
display:none;
|
|
|
|
}
|
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
a, & > span {
|
2019-10-16 14:23:38 +02:00
|
|
|
display:inline-block;
|
2019-10-10 09:53:59 +02:00
|
|
|
@include button($button-large);
|
2021-07-25 14:12:29 +02:00
|
|
|
@include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2"));
|
2019-10-16 14:23:38 +02:00
|
|
|
margin:0 $button-large/2.5 0 $button-large/2.5;
|
2019-12-07 16:06:38 +01:00
|
|
|
|
2019-10-10 09:53:59 +02:00
|
|
|
&:before {
|
|
|
|
content: " "!important;
|
|
|
|
border-right:1px solid rgba(0,0,0,0.2);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
2021-07-25 14:12:29 +02:00
|
|
|
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
}
|
2019-10-16 14:23:38 +02:00
|
|
|
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
|
|
|
|
2019-12-07 16:06:38 +01:00
|
|
|
// COLORIZE BUTTONS
|
2019-10-10 09:53:59 +02:00
|
|
|
|
|
|
|
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
|
2021-07-25 14:12:29 +02:00
|
|
|
@each $name, $color in list-colors() {
|
|
|
|
&-#{$name} { @include button-color(get-color($name)); }
|
|
|
|
}
|
|
|
|
&-link {
|
|
|
|
@include button-color(transparent);
|
|
|
|
color:$color-font!important;
|
|
|
|
}
|
2019-10-10 09:53:59 +02:00
|
|
|
}
|
2019-12-07 16:06:38 +01:00
|
|
|
|
2019-10-17 09:58:36 +02:00
|
|
|
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
|
|
|
|
|
|
|
.share-buttons {
|
2019-12-07 16:06:38 +01:00
|
|
|
margin-top: $lineheight;
|
2021-07-24 16:59:42 +02:00
|
|
|
padding-bottom: $lineheight;
|
2019-10-17 09:58:36 +02:00
|
|
|
}
|
2019-12-07 16:06:38 +01:00
|
|
|
|
2019-10-17 09:58:36 +02:00
|
|
|
.reagir {
|
|
|
|
text-align:right;
|
2019-12-07 16:06:38 +01:00
|
|
|
}
|
2019-10-10 09:53:59 +02:00
|
|
|
.btn, a.btn {
|
2021-07-25 14:12:29 +02:00
|
|
|
&-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);}
|
2019-12-07 16:06:38 +01:00
|
|
|
}
|