lbry.com/web/scss/_basic.scss
2015-10-25 12:51:01 -04:00

148 lines
No EOL
2.5 KiB
SCSS

@import "global";
*
{
@include box-sizing(border-box);
}
html
{
height: 100%;
font-size: $font-size;
}
body
{
font-family: 'Raleway', sans-serif;
line-height: 1.3333;
min-height: 100%;
position: relative;
&.with-footer
{
padding-bottom: $spacing-vertical * 3;
}
}
.bg-image-full
{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
z-index: -1;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
@include background-size(cover);
}
iframe, img { max-width: 100%; }
iframe { margin: 0 auto; display: block; }
code { font-family: monospace; }
h1, h2, h3
{
margin-bottom: $spacing-vertical;
}
h1 { font-size: 2.0em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; margin-bottom: $spacing-vertical / 2; }
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
.hide { display: none; }
.spacer1 { margin-bottom: $spacing-vertical; }
.spacer2 { margin-bottom: $spacing-vertical * 2; }
.text-center { text-align: center; }
.meta { font-size: 0.8em; }
.link-primary
{
color: $color-primary;
text-decoration: underline;
}
a:hover img
{
opacity: 0.75;
}
.control-group
{
}
.control-item
{
display: inline-block;
margin-left: 15px;
margin-right: 15px;
&:first-child
{
margin-left: 0;
}
&:last-child
{
margin-right: 0;
}
&.no-label
{
margin-left: 10px;
margin-right: 10px;
}
}
.btn-primary, .btn-alt
{
cursor: pointer;
display: inline-block;
height: $spacing-vertical * 1.5;
line-height: $spacing-vertical * 1.5;
padding: 0 15px;
text-decoration: none;
border: 0 none;
}
.btn-primary
{
color: white;
@include linear-gradient(lighten($color-primary, 5), darken($color-primary, 5));
background-color: $color-primary;
border: 1px solid black;
}
.btn-alt
{
$base-color: hsl(hue($color-primary), 15, 85);
@include linear-gradient(lighten($base-color, 5), darken($base-color, 5));
color: hsl(hue($color-primary), 85, 15);
border: 1px solid darken($color-primary, 10);
}
.no-label .btn-label
{
@include offscreen();
}
.tiles
{
> .tile
{
float: left;
margin-right: 20px;
margin-bottom: $spacing-vertical;
}
@include clearfix();
}
@media (max-width: $mobile-width-threshold)
{
.fullscreen
{
display: none;
}
}
@media (min-width: $mobile-width-threshold)
{
.mobile
{
display: none;
}
}