angular2-boiler-plate/public/css/core.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-responsive {
	overflow-x: auto;
}
.sui-container:after, .sui-panel:after, .sui-row:after, .sui-row-padding:after, .sui-topnav:after, .sui-clear:after, .sui-btn-group:before, .sui-btn-group:after, .sui-btn-bar:before, .sui-btn-bar:after  {
	clear: both;
	content: "";
	display: table;
}
.sui-main {
	transition: margin-left .4s;
}
#main {
	transition: margin-left .4s;
}
.sui-text-shadow {
	text-shadow: 1px 1px 0 @shadow;
}
.sui-text-shadow-white {
	text-shadow: 1px 1px 0 @border;
}
.sui-transparent {
	background-color: transparent!important;
}
.sui-tag,
.sui-sign {
	background-color: @fg-color;
	color: @bg-color;
	display: inline-block;
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
}

.sui-badge {
	.sui-tag;
	border-radius: 50%;
	
}

.sui-tooltip {
	position: relative;
	.sui-text {
		display: none;
	}
	&:hover {
		.sui-text {
			display: inline-block;
		}
	}
}
.sui-display-container {
	position: relative;
}
.sui-code {
	background-color: @bg-color;
	border-left: 4px solid #4CAF50;
	font-family: Consolas, "courier new";
	font-size: 16px;
	line-height: 1.4;
	margin: 20px 0;
	padding: 8px 12px;
	width: auto;
	word-wrap: break-word;
}
.sui-codespan {
	background-color: #f1f1f1;
	color: crimson;
	font-family: Consolas, "courier new";
	font-size: 110%;
	font-size: 16px;
	padding-left: 4px;
	padding-right: 4px;
}

.sui-greyscale-max, .sui-grayscale-max, .sui-hover-greyscale:hover, .sui-hover-grayscale:hover  {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.sui-greyscale {
	-webkit-filter: grayscale(75%);
	filter: grayscale(75%);
}
.sui-grayscale {
	-webkit-filter: grayscale(75%);
	filter: grayscale(75%);
}
.sui-greyscale-min {
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}
.sui-grayscale-min {
	-webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}
.sui-sepia {
	-webkit-filter: sepia(75%);
	filter: sepia(75%);
}
.sui-sepia-max {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}
.sui-hover-sepia {
	&:hover {
		-webkit-filter: sepia(100%);
		filter: sepia(100%);
	}
}
.sui-sepia-min {
	-webkit-filter: sepia(50%);
	filter: sepia(50%);
}

.sui-hover-none {
	&:hover {
		background-color: transparent!important;
		box-shadow: none!important;
	}
}
@media @mobile-tablet {
    .sui-main {
        margin-left: 0!important;
        margin-right: 0!important
    }
}

.sui-rest {
    overflow: hidden
}

.sui-hide {
    display: none!important
}

.sui-show-block,
.sui-show {
    display: block!important
}

.sui-show-inline-block {
    display: inline-block!important
}
@media (max-width:600px){.sui-hide-small{display:none!important}}
@media (min-width:601px) and (max-width:992px)  {.sui-hide-medium{display:none!important}}
@media (min-width:993px){.sui-hide-large{display:none!important}}
@media @mobile {
    .sui-hide-mobile {
        display: none!important
    }
}

@media @tablet {
    .sui-hide-tablet {
        display: none!important
    }
}

@media @desktop {
    .sui-hide-desktop {
        display: none!important
    }
}
@media @desktop-xl {
    .sui-hide-desktop-xl {
        display: none!important
    }
}
.sui-theme{
	background: @theme!important;
	color: @white!important;
}
.sui-pointer {
	 cursor: pointer;
}

.sui-overflow-hidden {
	overflow: hidden;
}
.sui-left {
	float: left;
}
.sui-right {
	float: right;
}
.sui-center {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
}
.sui-row-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
}
.sui-border{
	    border: 1px solid @border !important;
}