137 lines
3.4 KiB
SCSS
137 lines
3.4 KiB
SCSS
/*
|
|
* 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 {text-align: center;}
|
|
&-left {text-align: left;}
|
|
&-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%) ;
|
|
}
|
|
}
|
|
}
|