taiga-front/app/styles/dependencies/helpers.scss

75 lines
1.7 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;}
// __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; }
%taiga {font-family: 'taiga';}
%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 {
@extend %large;
position: absolute;
right: 2rem;
top: 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;
}
input,
textarea,
select {
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);