skillbox/server/core/static/styles/main.scss

106 lines
1.5 KiB
SCSS

@import "materialize/materialize";
$white: #fff;
$grey-1: #F7F7F7;
$grey-3: #F3F3F3;
$grey-2: #D8D8D8;
$grey-4: #AFB1B1;
$grey-9: #3F3F3F;
$light-white: rgba(255, 255, 255, 0.12);
$orange: #FD6E22;
$orange-shadow: #c54602;
$red: #cd3238;
$red-shadow: darken($red, 20%);
$blue: #EDF7FA;
$blue-shadow: #B6CCD4;
$brand: #17a887;
$text-color: $grey-9;
$font-family: 'Montserrat', Arial, sans-serif;
$base-font-size: 15px;
$space: 10px;
body {
font-family: $font-family;
font-size: $base-font-size;
color: $text-color;
}
h4, .h4 {
font-size: 18px;
}
a {
text-decoration: none;
}
.alert {
padding: $space;
}
.alert-error {
border: 1px solid $red-shadow;
background-color: #cd3238;
}
.alert-info {
border: 1px solid $blue-shadow;
background-color: $blue;
color: $text-color;
}
.orange-bg {
background-color: $orange;
}
.dark-bg {
background-color: $grey-9;
color: $white;
}
.btn-orange {
border: 1px solid $orange !important;
background-color: transparent;
border-radius: 2px;
color: $white;
&:hover, &:focus {
background-color: $orange-shadow;
}
box-shadow: none;
}
input[type=text], input[type=password], select {
width: 100%;
padding: $space;
margin: 8px 0;
display: inline-block;
border: 1px solid $grey-4;
border-radius: 2px;
box-sizing: border-box;
background-color: $light-white;
color: $grey-9;
}
.mt-1 {
margin-top: $space;
}
.mb-1 {
margin-bottom: $space;
}
.logo {
color: $brand;
font-size: 36px;
font-weight: 800;
font-family: Montserrat, Arial, sans-serif;
}