sms-pager/app/assets/stylesheets/main.scss

104 lines
1.3 KiB
SCSS

// maybe this? => https://color.adobe.com/Theme-1-color-theme-6893131/edit/?copy=true
$white: #F2E8DF;
$light: #C7C9CD;
$grey: #8E969D;
$dark: #646267;
@mixin inline-ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
li {
display: inline-block;
float: left;
margin: 0;
padding: 0;
a {
display: inline-block;
padding: 15px;
text-decoration: none;
}
}
}
html {
color: $dark;
background-color: $white;
margin: 0;
padding: 0;
}
body {
margin: 15px;
padding: 0;
}
.nav {
@include inline-ul;
background-color: $dark;
color: $light;
margin: -15px -15px 15px;
width: calc(100% + 30px);
li {
&:hover {
background-color: $grey;
}
a {
color: $light;
}
}
}
.sub-nav {
@include inline-ul;
margin: -19px -15px 0;
a {
color: $dark;
&:hover {
background-color: $light;
}
}
}
form {
width: 100%;
* {
font-size: 14px;
line-height: 1.6em;
}
label {
display: inline-block;
margin: 0.6em 0 0;
width: 100%;
&:after {
content: ": ";
}
}
input {
display: block;
margin: 0 0 0.6em;
padding: 5px;
}
[type=submit]{
margin: 0.6em 0;
}
textarea{
height: 5em;
max-width: 300px;
padding: 5px;
width: calc(100% - 30px);
}
}