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

94 lines
2.0 KiB
SCSS

// __Font Sizes__ //
%xsmall {font-size: .5rem;}
%small {font-size: .8rem;}
%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;}
%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; line-height: 1.3rem;}
%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif;}
%taiga {font-family: 'taiga';}
%lightbox {
background: rgba($white, .95);
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;
}
}
%button {
@extend %medium;
@extend %title;
display: inline-block;
padding: 7px 40px 6px;
transition: background .3s linear;
text-transform: uppercase;
&:hover {
transition: background .3s linear;
}
&.loading {
span {
animation: loading .5s linear;
animation: spin 1s linear infinite;
}
}
.icon {
margin-right: .3rem;
}
}
// Background
%triangled-bg {
background: url('/images/bg.png') no-repeat center center;
background-size: cover;
}
%background-taiga {
background: url('/images/invitation_bg.jpg') no-repeat center center;
background-size: cover;
}