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

138 lines
3.4 KiB
SCSS
Raw Normal View History

/*
* 1 - Definitions
*
* This part of the (s)css contain every definitions, mixins,
* and differents unilities that can be used everywhere in the code.
*
*/
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
$border-radius: 0px;
$border-size: 1px;
$color-primary: $color-red;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
$color-category: $color-blue;
$color-tag: $color-grey;
$color-font: #444;
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin li-no-margin() {
li {
margin: 0;
}
}
/* 1.1 - Utils */
.no-pills {
list-style:none;
}
.align {
&-center, &center {text-align: center;}
&-left, &left {text-align: left;}
&-right, &right {text-align: right;}
}
/* 1.2 - Background colors */
@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
}
.bg {
&-blue { @include background-color($color-blue, #FFF); }
&-violet { @include background-color($color-violet, #FFF); }
&-purple { @include background-color($color-purple, #FFF); }
&-red { @include background-color($color-red, #FFF); }
&-orange { @include background-color($color-orange, #FFF); }
&-green { @include background-color($color-green, #FFF); }
&-skyblue { @include background-color($color-skyblue, #FFF); }
&-dark { @include background-color($color-dark, #FFF); }
&-light { @include background-color($color-light, #111); }
&-turquoise { @include background-color($color-turquoise, #FFF); }
&-yellow { @include background-color($color-yellow, #FFF); }
&-brown { @include background-color($color-brown, #FFF); }
&-grey { @include background-color($color-grey, #FFF); }
&-primary { @include background-color($color-primary, #FFF); }
&-secondary { @include background-color($color-secondary, #FFF); }
&-warning { @include background-color($color-warning, #FFF); }
&-danger { @include background-color($color-danger, #FFF); }
&-info { @include background-color($color-info, #FFF); }
&-success { @include background-color($color-success, #FFF); }
}
/* 1.3 - Screen Reader */
@media screen {
.screen-reader-text {
display: none;
}
}
/* 2. Forms elements */
select {
@include borders();
@include border-radius();
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5em;
color: $color-font;
background-color: #fff;
background-clip: padding-box;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
margin-top: 0.75rem;
}
.input-group {
border-color: $color-dark;
&-prepend {
background-color: $color-grey;
@include borders();
@include border-radius();
}
&-text {
background-color: transparent;
color: #FFF;
border: none;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
.form-control {
@include borders();
@include border-radius();
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1);
&:focus {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px lighten($color-primary, 20%) ;
}
}
}