houdini/app/assets/stylesheets/common/utils.css.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;}
}