app/assets/stylesheets/_theme.scss
html {
position: relative;
min-height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 24px;
letter-spacing: -.01em;
background-color: $body;
margin-bottom: 90px;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
:-ms-input-placeholder {
color: $primary-color-dark;
}
::-moz-placeholder {
color: $primary-color-dark;
}
.form-control::-webkit-input-placeholder {
color: $primary-color-dark;
}
.form-control::placeholder {
color: $primary-color-dark;
}
a {
color: $secondary-text-color;
&:hover,
&:active,
&:focus {
color: $accent-color;
text-decoration: none;
}
&.link-accent {
color: $accent-color;
font-weight: bold;
}
&.link-danger {
color: $red;
font-weight: bold;
}
}
.color-primary {
color: $primary-color;
}
.color-darken-primary-dark {
color: $primary-color-text;
}
.btn {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 36px;
display: inline-block;
min-width: 64px;
height: 36px;
padding: 0 16px;
text-align: center;
vertical-align: middle;
letter-spacing: 0;
text-transform: uppercase;
border: 0;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
0 3px 1px -2px rgba(0, 0, 0, .2),
0 1px 5px 0 rgba(0, 0, 0, .12);
}
.btn-primary {
background-color: $accent-color;
border-color: $accent-color;
color: $primary-color-text;
&:hover {
background-color: darken($accent-color, 5);
}
}
.btn-flat {
box-shadow: none;
color: $accent-color;
font-size: 14px;
font-weight: 700;
line-height: 36px;
}
h3 {
font-size: 20px;
font-weight: 400;
line-height: 32px;
}
.card {
position: relative;
display: block;
margin-bottom: 60px;
color: rgba(0, 0, 0, .7);
border-radius: 6px;
background: $primary-color-text;
box-shadow: 0 2px 2px rgba(204, 197, 185, .5);
&-content {
padding: 32px 40px;
@include mq($from: mobile, $until: tablet) {
padding: 10px 20px;
}
&--editor {
padding: 10px 0 0;
}
}
}
.well {
margin-top: 10px;
margin-bottom: 10px;
padding: 32px 20px 24px 25px;
border: 0;
border-radius: 0;
background-color: $well-bg-color;
box-shadow: none;
p,
li {
color: $well-text-color;
font-size: 16px;
line-height: 20px;
}
hr {
border-color: darken($well-bg-color, 5);
}
}
.help-block {
font-size: 13px;
}
.navbar-brand {
color: $primary-color-text;
font-size: 20px;
font-weight: bold;
padding: 0;
&:hover,
&:active,
&:focus {
color: $primary-color-text;
}
img {
z-index: 200;
position: relative;
}
}
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: $primary-color-dark;
&-toggle {
margin-top: 3px;
margin-bottom: 0;
padding: 7px 10px 0;
i {
color: $primary-color-text;
}
}
}
.navbar-nav {
li {
a {
color: $primary-color-text;
padding: 24px 10px;
&:active,
&:focus,
&:hover {
background: transparent;
}
}
}
}
#nprogress .bar {
background: $accent-color;
}
#mobile-menu{
@include mq($from: mobile, $until: tablet) {
position: absolute;
width: 100%;
z-index: 100;
background: $primary-color-dark;
}
}
.section-colored-top {
&::before {
background-color: $primary-color;
content: ' ';
height: 370px;
left: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: -1;
}
&--higher::before {
height: 470px;
}
&__form {
margin-top: 55px;
padding-bottom: 50px;
.form-group {
float: left;
width: 85%;
margin-left: 20px;
@include mq($from: mobile, $until: tablet) {
float: right;
margin-left: 10px;
}
input[type=text].form-control {
font-size: 35px;
line-height: 40px;
height: 50px;
margin-top: 0;
padding-left: 0;
color: $primary-color-text;
border: 0;
border-bottom: 2px solid $primary-color-dark;
border-radius: 0;
background: transparent;
box-shadow: none;
&:focus {
outline: none;
}
}
}
i {
color: $primary-color-dark;
float: left;
@include mq($from: mobile, $until: tablet) {
font-size: 2em;
margin-top: 10px;
}
}
.btn-white {
margin-top: 20px;
}
}
}
.search-form {
&__hint {
color: $primary_color_text;
&__link {
color: $primary-color-text;
text-decoration: underline;
font-weight: bold;
}
&__link:hover {
color: $primary-color-text;
}
}
}
.search-sugestions {
margin-top: 30px;
&__li {
&__link {
font-weight: bold;
text-decoration: underline;
}
&__link:hover {
color: $accent-color;
}
}
}
.pagination {
li {
a {
font-family: Roboto;
font-weight: 600;
color: #545454;
border: 0;
background: transparent;
}
&.active a {
background-color: $accent-color;
border-radius: 4px;
color: $primary-color-text;
}
&.active:hover a {
background-color: $primary-color-text;
color: $accent-color;
}
&:active a,
&:hover a,
&:visited a {
color: $accent-color;
}
}
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: $primary-color-text;
padding: 20px 0 10px;
}
.alert {
border-radius: 0;
margin-bottom: 0;
&.alert-success {
background-color: $accent-color;
border: 0;
color: $primary-color-text;
}
}
.empty {
padding: 30px 0;
h3 {
margin-top: 10px;
}
}