81 lines
1.8 KiB
SCSS
81 lines
1.8 KiB
SCSS
// __Font Sizes__ //
|
|
%xsmall {font-size: .75rem;}
|
|
%small {font-size: .9rem;}
|
|
%medium {font-size: 1rem;}
|
|
%large {font-size: 1.2rem;}
|
|
%larger {font-size: 1.6rem;}
|
|
%xlarge {font-size: 2rem;}
|
|
%xxlarge {font-size: 3rem;}
|
|
%gigantic {font-size: 4rem;}
|
|
|
|
// __Font Types__ //
|
|
%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
|
|
%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
|
|
%text {font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif; }
|
|
%bold {font-family: 'OpenSans-Semibold', Arial, Helvetica, sans-serif; }
|
|
%mono {font-family: 'courier new', 'monospace';}
|
|
|
|
%lightbox {
|
|
bottom: 0;
|
|
display: none;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 99910;
|
|
.close {
|
|
cursor: pointer;
|
|
fill: $gray;
|
|
position: absolute;
|
|
right: 3rem;
|
|
top: 3rem;
|
|
transition: fill .2s;
|
|
&:hover {
|
|
fill: $red-light;
|
|
}
|
|
svg {
|
|
@include svg-size(2rem);
|
|
}
|
|
}
|
|
&.open {
|
|
align-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
opacity: 1;
|
|
transition: opacity .3s ease;
|
|
}
|
|
&.close {
|
|
opacity: 0;
|
|
transition: opacity .3s ease;
|
|
}
|
|
.title {
|
|
text-align: center;
|
|
}
|
|
fieldset {
|
|
margin-bottom: 1rem;
|
|
}
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
.button-green,
|
|
.button-gray {
|
|
display: block;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
%loading-spinner {
|
|
animation-timing-function: ease-in-out;
|
|
animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate;
|
|
margin: 0 auto;
|
|
max-height: 1rem;
|
|
max-width: 1rem;
|
|
transform-origin: 32 32;
|
|
}
|
|
|
|
$navbar: 40px;
|
|
$main-height: calc(100vh - 40px);
|