415 lines
10 KiB
SCSS
415 lines
10 KiB
SCSS
/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
|
|
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
|
|
@import 'mixins';
|
|
|
|
.hide {display: none; }
|
|
.show {display: block;}
|
|
.hide.show {display: block;}
|
|
|
|
.u-inline, .hide.u-inline {display: inline;}
|
|
.u-block, .hide.u-block {display: block !important;}
|
|
.u-inlineBlock, .hide.u-inlineBlock {display: inline-block;}
|
|
.u-displayNone { display: none; }
|
|
|
|
.u-hide {display: none !important;}
|
|
|
|
.u-normal {font-weight: normal;}
|
|
|
|
.u-strike { text-decoration: line-through;}
|
|
.u-flat {
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.u-noClear {
|
|
clear: none;
|
|
}
|
|
|
|
.u-smallPs p {
|
|
font-size: 14px;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
.u-medPs p {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.u-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.u-verticallyCenter {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.u-verticallyCenterAbs {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.u-centeredBg {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.u-overflow--hidden {
|
|
overflow: hidden !important;
|
|
}
|
|
.u-breakWord {
|
|
word-break: break-word;
|
|
}
|
|
.u-width--initial {width: initial; }
|
|
.u-width--full {width: 100%; }
|
|
.u-width--half {width: 50%; }
|
|
.u-width--third {width: 33.333333%; }
|
|
.u-width--40 {width: 40px; }
|
|
.u-width--50 {width: 50px; }
|
|
.u-width--60 {width: 60px; }
|
|
.u-width--70 {width: 70px; }
|
|
.u-width--80 {width: 80px; }
|
|
.u-width--90 {width: 90px; }
|
|
.u-width--100 {width: 100px; }
|
|
.u-width--140 {width: 140px; }
|
|
.u-width--150 {width: 150px; }
|
|
.u-width--160 {width: 160px; }
|
|
.u-width--200 {width: 200px; }
|
|
.u-width--250 {width: 250px; }
|
|
.u-width--300 {width: 300px; }
|
|
.u-width--400 {width: 400px; }
|
|
|
|
.u-maxWidth--100 { max-width: 100px; }
|
|
.u-maxWidth--150 { max-width: 150px; }
|
|
.u-maxWidth--200 { max-width: 200px; }
|
|
.u-maxWidth--250 { max-width: 250px; }
|
|
.u-maxWidth--300 { max-width: 300px; }
|
|
.u-maxWidth--400 { max-width: 400px; }
|
|
.u-maxWidth--500 { max-width: 500px; }
|
|
.u-maxWidth--600 { max-width: 600px; }
|
|
.u-maxWidth--700 { max-width: 700px; }
|
|
.u-maxWidth--800 { max-width: 800px; }
|
|
|
|
.u-height--80 { height: 80px; }
|
|
.u-height--100 { height: 100px; }
|
|
.u-height--200 { height: 200px; }
|
|
.u-height--full { height: 100%; }
|
|
.u-height--auto { height: auto; }
|
|
|
|
.u-fontSize--12 {font-size: 12px !important; }
|
|
.u-fontSize--13 {font-size: 13px !important; }
|
|
.u-fontSize--14 {font-size: 14px !important; }
|
|
.u-fontSize--15 {font-size: 15px !important; }
|
|
.u-fontSize--16 {font-size: 16px !important; }
|
|
.u-fontSize--17 {font-size: 17px !important; }
|
|
.u-fontSize--18 {font-size: 18px !important; }
|
|
.u-fontSize--20 {font-size: 20px !important; }
|
|
.u-fontSize--22 {font-size: 22px !important; }
|
|
.u-fontSize--24 {font-size: 24px !important; }
|
|
.u-fontSize--26 {font-size: 26px !important; }
|
|
.u-fontSize--28 {font-size: 28px !important; }
|
|
.u-fontSize--40 {font-size: 40px !important; }
|
|
.u-fontSize--50 {font-size: 50px !important; }
|
|
|
|
.u-margin--auto { margin: auto !important; }
|
|
.u-margin--0 { margin: 0 !important; }
|
|
.u-margin--5 { margin: 5px !important; }
|
|
.u-margin--10 { margin: 10px !important; }
|
|
.u-margin--20 { margin: 20px !important; }
|
|
|
|
.u-marginBottom--0 { margin-bottom: 0 !important; }
|
|
.u-marginBottom--3 { margin-bottom: 3px !important; }
|
|
.u-marginBottom--5 { margin-bottom: 5px !important; }
|
|
.u-marginBottom--15 { margin-bottom: 15px !important; }
|
|
.u-marginBottom--10 { margin-bottom: 10px !important; }
|
|
.u-marginBottom--20 { margin-bottom: 20px !important; }
|
|
.u-marginBottom--25 { margin-bottom: 25px !important; }
|
|
.u-marginBottom--30 { margin-bottom: 30px !important; }
|
|
.u-marginBottom--40 { margin-bottom: 40px !important; }
|
|
.u-marginBottom--50 { margin-bottom: 50px !important; }
|
|
.u-marginBottom--60 { margin-bottom: 60px !important; }
|
|
|
|
.u-marginTop--0 { margin-top: 0 !important; }
|
|
.u-marginTop--3 { margin-top: 3px !important; }
|
|
.u-marginTop--5 { margin-top: 5px !important; }
|
|
.u-marginTop--10 { margin-top: 10px !important; }
|
|
.u-marginTop--15 { margin-top: 15px !important; }
|
|
.u-marginTop--20 { margin-top: 20px !important; }
|
|
.u-marginTop--30 { margin-top: 30px !important; }
|
|
.u-marginTop--50 { margin-top: 50px !important; }
|
|
.u-marginTop--60 { margin-top: 60px !important; }
|
|
|
|
.u-marginY--5 { margin-top: 5px; margin-bottom: 5px; }
|
|
.u-marginY--10 { margin-top: 10px; margin-bottom: 10px; }
|
|
.u-marginY--15 { margin-top: 15px; margin-bottom: 15px; }
|
|
.u-marginY--20 { margin-top: 20px; margin-bottom: 20px; }
|
|
.u-marginY--25 { margin-top: 25px; margin-bottom: 25px; }
|
|
.u-marginY--30 { margin-top: 30px; margin-bottom: 30px; }
|
|
.u-marginY--35 { margin-top: 35px; margin-bottom: 35px; }
|
|
.u-marginY--40 { margin-top: 40px; margin-bottom: 40px; }
|
|
.u-marginY--50 { margin-top: 50px; margin-bottom: 50px; }
|
|
.u-marginY--60 { margin-top: 60px; margin-bottom: 60px; }
|
|
|
|
.u-flatHeight {
|
|
margin: 0 !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.u-marginX--10 { margin: 0 10px; }
|
|
.u-marginX--20 { margin: 0 20px; }
|
|
.u-marginX--30 { margin: 0 30px; }
|
|
.u-marginX--40 { margin: 0 40px; }
|
|
.u-marginX--50 { margin: 0 50px; }
|
|
|
|
|
|
.u-marginLeft--0 { margin-left: 0 !important; }
|
|
.u-marginLeft--5 { margin-left: 5px !important; }
|
|
.u-marginLeft--10 { margin-left: 10px !important; }
|
|
.u-marginLeft--20 { margin-left: 20px !important; }
|
|
|
|
.u-marginRight--0 { margin-right: 0 !important; }
|
|
.u-marginRight--5 { margin-right: 5px !important; }
|
|
.u-marginRight--10 { margin-right: 10px !important; }
|
|
.u-marginRight--20 { margin-right: 20px !important; }
|
|
|
|
.padded { padding: 20px; }
|
|
|
|
.u-paddingTop--0 { padding-top: 0 !important; }
|
|
.u-paddingTop--5 { padding-top: 5px !important; }
|
|
.u-paddingTop--10 { padding-top: 10px !important; }
|
|
.u-paddingTop--15 { padding-top: 15px !important; }
|
|
.u-paddingTop--20 { padding-top: 20px !important; }
|
|
.u-paddingTop--30 { padding-top: 30px !important; }
|
|
.u-paddingTop--40 { padding-top: 40px !important; }
|
|
|
|
.u-paddingBottom--0 { padding-bottom: 0 !important; }
|
|
.u-paddingBottom--10 { padding-bottom: 10px !important; }
|
|
.u-paddingBottom--15 { padding-bottom: 15px !important; }
|
|
.u-paddingBottom--20 { padding-bottom: 20px !important; }
|
|
.u-paddingBottom--30 { padding-bottom: 30px !important; }
|
|
|
|
.u-padding--0 { padding: 0 !important; }
|
|
.u-padding--3 { padding: 3px !important; }
|
|
.u-padding--5 { padding: 5px !important; }
|
|
.u-padding--8 { padding: 8px !important; }
|
|
.u-padding--10 { padding: 10px !important; }
|
|
.u-padding--15 { padding: 15px !important; }
|
|
.u-padding--20 { padding: 20px !important;}
|
|
.u-padding--25 { padding: 25px !important; }
|
|
.u-padding--30 { padding: 30px !important; }
|
|
|
|
|
|
.u-paddingX--0 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
.u-paddingX--5 { padding-left: 5px !important; padding-right: 5px !important; }
|
|
.u-paddingX--10 { padding: 0 10px !important; }
|
|
.u-paddingX--15 { padding: 0 15px !important; }
|
|
.u-paddingX--20 { padding: 0 20px !important;}
|
|
.u-paddingX--30 { padding: 0 30px !important;}
|
|
.u-paddingX--40 { padding: 0 40px !important;}
|
|
|
|
.u-paddingY--10 { padding-top: 10px !important; padding-bottom: 10px !important; }
|
|
.u-paddingY--15 { padding: 15px 0 !important; }
|
|
.u-paddingY--20 { padding: 20px 0 !important;}
|
|
.u-paddingY--30 { padding: 30px 0 !important;}
|
|
.u-paddingY--40 { padding: 40px 0 !important;}
|
|
|
|
|
|
.u-paddingLeft--0 { padding-left: 0 !important; }
|
|
.u-paddingLeft--5 { padding-left: 10px; }
|
|
.u-paddingLeft--10 { padding-left: 10px; }
|
|
.u-paddingLeft--15 { padding-left: 15px; }
|
|
.u-paddingLeft--20 { padding-left: 20px; }
|
|
.u-paddingLeft--30 { padding-left: 30px; }
|
|
.u-paddingLeft--40 { padding-left: 40px; }
|
|
|
|
.u-paddingRight--0 { padding-right: 0; }
|
|
.u-paddingRight--10 { padding-right: 10px; }
|
|
.u-paddingRight--15 { padding-right: 15px; }
|
|
.u-paddingRight--20 { padding-right: 20px; }
|
|
.u-paddingRight--30 { padding-right: 30px; }
|
|
|
|
.u-top--0 { top: 0 !important; }
|
|
|
|
.u-overflow--auto { overflow: auto;}
|
|
.u-overflow--hidden { overflow: hidden;}
|
|
|
|
.u-textAlign--left { text-align: left; }
|
|
.u-textAlign--right { text-align: right; }
|
|
|
|
.u-background--paper { background: $paper; }
|
|
.u-background--fog { background: $fog; }
|
|
.u-background--grey { background: rgba($grey, 0.07); }
|
|
.u-background--grey--dark { background: rgba($grey, 0.09); }
|
|
.u-background--white {background: white }
|
|
|
|
|
|
.u-capitalize {text-transform: capitalize; }
|
|
|
|
.floatl, .u-floatL {float: left !important;}
|
|
.floatr, .u-floatR {float: right !important;}
|
|
.u-float--none { float: none !important; }
|
|
|
|
.u-clear--none {
|
|
clear: none;
|
|
}
|
|
|
|
|
|
.u-color--charcoal { color: $charcoal; }
|
|
.u-color--grey { color: $grey; }
|
|
.u-color--lightGrey { color: $shark; }
|
|
.u-color--white { color: white; }
|
|
.u-color--red {color: $red;}
|
|
.u-color--green {color: $grass;}
|
|
.u-color--seaFoam {color: #669092 !important;}
|
|
|
|
.u-invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.u-bg--white {
|
|
background: white;
|
|
}
|
|
.u-bg--cloud {
|
|
background: rgba(white, 0.7);
|
|
}
|
|
.u-bg--fog {
|
|
background: $fog;
|
|
}
|
|
|
|
.u-bg-blue-light {
|
|
background: rgba(66, 179, 223, 0.1);
|
|
}
|
|
|
|
.u-dashedBorder {
|
|
border-bottom: 1px dashed $turquoise;
|
|
}
|
|
|
|
.u-circle {
|
|
@include border-radius(50%);
|
|
}
|
|
|
|
.u-border--light {
|
|
border: 2px solid $fog;
|
|
}
|
|
|
|
.u-border--edit {
|
|
border-top: 1px solid #d9d9d9;
|
|
border-right: 1px solid #d9d9d9;
|
|
border-left: 1px solid #d9d9d9;
|
|
border-bottom: 2px solid #d9d9d9;
|
|
}
|
|
|
|
.u-border--bottom {
|
|
border-bottom: 1px solid rgba(black, 0.05);
|
|
}
|
|
|
|
.u-underline {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
&:hover {
|
|
color: inherit;
|
|
@include opacity(0.8);
|
|
}
|
|
}
|
|
|
|
.no-border {border: 0;}
|
|
.clear {clear: both;}
|
|
.clearl {clear: left;}
|
|
.clearr {clear: right;}
|
|
|
|
.centered, .u-centered {
|
|
text-align: center !important;
|
|
}
|
|
.u-centered--shallow {
|
|
text-align: center;
|
|
& > * {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.u-noSelect {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select:none;
|
|
user-select:none;
|
|
-o-user-select:none;
|
|
}
|
|
|
|
|
|
.u-lineHeight--1 {
|
|
line-height: 1;
|
|
}
|
|
|
|
.u-halfOpacity {
|
|
@include opacity(0.5);
|
|
}
|
|
.u-noOpacity {
|
|
@include opacity(0);
|
|
}
|
|
.u-fade {
|
|
@include opacity(0.7);
|
|
}
|
|
.u-bold {font-weight: bold !important; }
|
|
|
|
.u-small {font-size: 14px; }
|
|
|
|
.u-ellipses {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.u-noTransition {
|
|
@include transition(none);
|
|
}
|
|
|
|
.u-relative {
|
|
position: relative;
|
|
}
|
|
|
|
.u-prepend {
|
|
position: relative;
|
|
&:before {
|
|
position: absolute;
|
|
color: $grey;
|
|
}
|
|
}
|
|
|
|
.u-shadow {
|
|
@include box-shadow(0 1px 5px 0 rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.u-capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
.u-bitter {
|
|
font-family: 'Bitter';
|
|
}
|
|
.u-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.u-vAlign--bottom {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.u-fixed--bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.u-hideIf--600 {display: none;}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.u-hideIf--500 {display: none;}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
.u-hideIf--400 {display: none;}
|
|
}
|