app/assets/stylesheets/stylesheet.scss
@import "_variables.scss";
@import "_matchtable.scss";
@import "_viewgroups.scss";
@import "_sidebar.scss";
body, html {
font-family: $lato;
color: $primary-text-color;
height: 100%;
}
/* Links & Buttons */
a:link, a:visited {
text-decoration: none;
color: $primary-text-color;
font-weight: bold;
&.button {
color: $white;
}
}
a:hover, a:active {
text-decoration: underline;
&.button {
text-decoration: none;
}
}
.button {
background-color: $green;
color: $white;
padding: 10px 20px;
text-align: center;
font-size: 1em;
text-transform: uppercase;
font-weight: 400;
border: none;
&.red {
background-color: $red;
}
}
.button:hover, .button:active {
background-color: $dark-green;
&.red {
background-color: $dark-red;
}
}
/* Typography */
h1, h2 {
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin: 1px;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1em;
}
.text-center {
text-align: center;
}
ol, ul, p {
font-size: 1em;
font-weight: 300;
padding-left: none;
}
/* Containers */
.content-container {
padding-left: $sidebar-width;
}
.content {
max-width: 780px;
margin: 20px auto;
}
.action-container {
text-align: right;
padding-top: 20px;
}
.clear-top {
padding-top: 10%;
}
/* Table styling */
td, th {
padding: 10px;
}
th {
text-align: left;
}
tr {
margin: 7px;
padding: 7px;
}
.center {
text-align: center;
}
.bg-green {
background-color: $green;
}
.bg-yellow {
background-color: $yellow;
}
.bg-red {
background-color: $red;
}
/* modals */
.modal-wrapper {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
.modal-bg {
background-color: $header-bg-color;
opacity: 0.8;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
.modal-container {
background-color: $bg-color;
width: 450px;
margin: 200px auto;
padding: 50px;
z-index: 99;
}
/* Form Inputs */
input[type="text"] {
display: block;
margin: 5px 0px;
padding: 10px;
font-family: $lato;
font-size: 14px;
appearance: none;
box-shadow: none;
border-radius: none;
&.full-width {
width: 100%;
}
}
select {
display: block;
margin: 5px 0px;
height: 30px;
font-family: $lato;
font-size: 14px;
}
/* alerts / flash */
.alert-container {
width: 100%;
display: block;
padding: 20px;
text-align: center;
font-weight: 700;
color: $dark-green;
}