angular2-boiler-plate/public/css/util.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'variables.less';
.sui-tiny{font-size:10px!important}
.sui-small{font-size:12px!important}
.sui-medium{font-size:15px!important}
.sui-large{font-size:18px!important}
.sui-xlarge{font-size:24px!important}
.sui-xxlarge{font-size:36px!important}
.sui-xxxlarge{font-size:48px!important}
.sui-jumbo{font-size:64px!important}
.sui-circle {
	border-radius: 50%!important;
}
.sui-round-small {
	border-radius: 2px!important;
}
.sui-round {
	border-radius: 4px!important;
}
.sui-round-medium {
	border-radius: 4px!important;
}
.sui-round-large {
	border-radius: 8px!important;
}
.sui-round-xlarge {
	border-radius: 16px!important;
}
.sui-round-xxlarge {
	border-radius: 32px!important;
}
.sui-round-jumbo {
	border-radius: 64px!important;
}
.sui-border-0 {
	border: 0!important;
}
.sui-border-top {
	border-top: 1px solid @border!important;
}
.sui-border-bottom {
	border-bottom: 1px solid @border!important;
}
.sui-border-left {
	border-left: 1px solid @border!important;
}
.sui-border-right {
	border-right: 1px solid @border!important;
}
.sui-topbar {
	border-top: 6px solid @border!important;
}
.sui-bottombar {
	border-bottom: 6px solid @border!important;
}
.sui-leftbar {
	border-left: 6px solid @border!important;
}
.sui-rightbar {
	border-right: 6px solid @border!important;
}
.sui-margin {
    margin: 16px!important
}

.sui-margin-0 {
    margin: 0!important
}
.sui-margin-left-5 {
  margin-left: 5px !important;
}

.sui-margin-top {
    margin-top: 16px!important
}

.sui-margin-bottom {
    margin-bottom: 16px!important
}

.sui-margin-left {
    margin-left: 16px!important
}

.sui-margin-right {
    margin-right: 16px!important
}

.sui-margin-16,
.sui-section {
    margin-top: 16px!important;
    margin-bottom: 16px!important
}

.sui-padding-tiny {
    padding: 2px 4px!important
}

.sui-padding-small {
    padding: 4px 8px!important
}

.sui-padding-medium,
.sui-padding,
.sui-form {
    padding: 8px 16px!important
}

.sui-padding-large {
    padding: 12px 24px!important
}

.sui-padding-xlarge {
    padding: 16px 32px!important
}

.sui-padding-xxlarge {
    padding: 24px 48px!important
}

.sui-padding-jumbo {
    padding: 32px 64px!important
}

.sui-padding-4 {
    padding-top: 4px!important;
    padding-bottom: 4px!important
}

.sui-padding-8 {
    padding-top: 8px!important;
    padding-bottom: 8px!important
}

.sui-padding-12 {
    padding-top: 12px!important;
    padding-bottom: 12px!important
}

.sui-padding-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important
}

.sui-padding-24 {
    padding-top: 24px!important;
    padding-bottom: 24px!important
}

.sui-padding-32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important
}

.sui-padding-48 {
    padding-top: 48px!important;
    padding-bottom: 48px!important
}

.sui-padding-64 {
    padding-top: 64px!important;
    padding-bottom: 64px!important
}

.sui-padding-128 {
    padding-top: 128px!important;
    padding-bottom: 128px!important
}

.sui-padding-0 {
    padding: 0!important
}

.sui-padding-top {
    padding-top: 8px!important
}

.sui-padding-bottom {
    padding-bottom: 8px!important
}

.sui-padding-left {
    padding-left: 16px!important
}

.sui-padding-right {
    padding-right: 16px!important
}


.sui-top,
.sui-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.sui-top {
    top: 0
}

.sui-bottom {
    bottom: 0
}

.sui-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 2
}



.sui-vertical {
    word-break: break-all;
    line-height: 1;
    text-align: center;
    width: 0.6em
}

.sui-left-align {
    text-align: left!important
}

.sui-right-align {
    text-align: right!important
}

.sui-justify {
    text-align: justify!important
}

.sui-center {
    text-align: center!important
}

.sui-display-topleft {
    position: absolute;
    left: 0;
    top: 0
}

.sui-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.sui-display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0
}

.sui-display-bottomright {
    position: absolute;
    right: 0;
    bottom: 0
}

.sui-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.sui-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

.sui-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}

.sui-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.sui-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.sui-circle {
  border-radius: 50%!important;
}
.sui-round-small {
  border-radius: 2px!important;
}
.sui-round {
  border-radius: 4px!important;
}
.sui-round-medium {
  border-radius: 4px!important;
}
.sui-round-large {
  border-radius: 8px!important;
}
.sui-round-xlarge {
  border-radius: 16px!important;
}
.sui-round-xxlarge {
  border-radius: 32px!important;
}
.sui-round-jumbo {
  border-radius: 64px!important;
}
.sui-border-0 {
  border: 0!important;
}
.sui-border-top {
  border-top: 1px solid #dddddd !important;
}
.sui-border-bottom {
  border-bottom: 1px solid #dddddd !important;
}
.sui-border-left {
  border-left: 1px solid #dddddd !important;
}
.sui-border-right {
  border-right: 1px solid #dddddd !important;
}
.sui-topbar {
  border-top: 6px solid #dddddd !important;
}
.sui-bottombar {
  border-bottom: 6px solid #dddddd !important;
}
.sui-leftbar {
  border-left: 6px solid #dddddd !important;
}
.sui-rightbar {
  border-right: 6px solid #dddddd !important;
}
.sui-margin {
  margin: 16px !important;
}
.sui-margin-0 {
  margin: 0 !important;
}
.sui-margin-top {
  margin-top: 16px !important;
}
.sui-margin-bottom {
  margin-bottom: 16px !important;
}
.sui-margin-left {
  margin-left: 16px !important;
}
.sui-margin-right {
  margin-right: 16px !important;
}
.sui-margin-16,
.sui-section {
  margin-top: 16px!important;
  margin-bottom: 16px !important;
}
.sui-padding-tiny {
  padding: 2px 4px !important;
}
.sui-padding-small {
  padding: 4px 8px !important;
}
.sui-padding-medium,
.sui-padding,
.sui-form {
  padding: 8px 16px !important;
}
.sui-padding-large {
  padding: 12px 24px !important;
}
.sui-padding-xlarge {
  padding: 16px 32px !important;
}
.sui-padding-xxlarge {
  padding: 24px 48px !important;
}
.sui-padding-jumbo {
  padding: 32px 64px !important;
}
.sui-padding-4 {
  padding-top: 4px!important;
  padding-bottom: 4px !important;
}
.sui-padding-8 {
  padding-top: 8px!important;
  padding-bottom: 8px !important;
}
.sui-padding-12 {
  padding-top: 12px!important;
  padding-bottom: 12px !important;
}
.sui-padding-16 {
  padding-top: 16px!important;
  padding-bottom: 16px !important;
}
.sui-padding-24 {
  padding-top: 24px!important;
  padding-bottom: 24px !important;
}
.sui-padding-32 {
  padding-top: 32px!important;
  padding-bottom: 32px !important;
}
.sui-padding-48 {
  padding-top: 48px!important;
  padding-bottom: 48px !important;
}
.sui-padding-64 {
  padding-top: 64px!important;
  padding-bottom: 64px !important;
}
.sui-padding-128 {
  padding-top: 128px!important;
  padding-bottom: 128px !important;
}
.sui-padding-0 {
  padding: 0 !important;
}
.sui-padding-top {
  padding-top: 8px !important;
}
.sui-padding-bottom {
  padding-bottom: 8px !important;
}
.sui-padding-left {
  padding-left: 16px !important;
}
.sui-padding-right {
  padding-right: 16px !important;
}