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

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

.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 #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-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;
}