adapterui/css/adapterui-support.less

a simple web framework

/* 辅助类 */
@import "./adapterui-config.less";


@media only screen and (min-width:768px) {

	/* <768px显示,其他隐藏 */
	.ad-show-xs {
		display: none;
	}
}

@media only screen and (min-width:1024px) {

	/* <1024px显示,其他隐藏 */
	.ad-show-sm {
		display: none;
	}
}

@media only screen and (min-width:1440px) {

	/* <1440px显示,其他隐藏 */
	.ad-show-md {
		display: none;
	}
}

@media only screen and (min-width:1920px) {

	/* <1920px显示,其他隐藏 */
	.ad-show-lg {
		display: none;
	}
}

/* 边框线宽度1px */
.ad-border-1px {
	border-width: @border-width;
}

/* 边框线类型 */
.ad-border-solid {
	border-style: solid;
}

.ad-border-dashed {
	border-style: dashed;
}

/**
 * 边框线颜色
 */
.ad-border-light {
	border-color: @bg-color-lighter;
}
.ad-border-muted {
	border-color: @font-color-lg;
}
.ad-border-danger {
	border-color: @danger-normal;
}
.ad-border-success {
	border-color: @success-normal;
}
.ad-border-info {
	border-color: @info-normal;
}
.ad-border-primary {
	border-color: @primary-normal;
}
.ad-border-warning {
	border-color: @warning-normal;
}

/**
 * 圆角辅助类
 */
.ad-radius-none{
	border-radius: @radius-none;
}
.ad-radius-xs {
	border-radius: @radius-xs;
}

.ad-radius-sm {
	border-radius: @radius-sm;
}

.ad-radius-md {
	border-radius: @radius-md;
}

.ad-radius-lg {
	border-radius: @radius-lg;
}

.ad-radius-xl {
	border-radius: @radius-xl;
}


/*自适应父容器大小*/

.ad-form-control {
	display: block;
	width: 100%;
}

/**
 * Y轴回弹滚动效果
 */
.ad-scrolling-touch {
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/**
 * 定义粗体
 */
.ad-text-bold {
	font-weight: bold;
}

.ad-text-normal {
	font-weight: normal;
}

/**
 * 定义危险样式的文本
 */

.ad-text-danger {
	color: @danger-normal;
}

a.ad-text-danger:hover {
	color: @danger-active;
}


/**
 * 定义警告样式的文本
 */

.ad-text-warning {
	color: @warning-normal;
}

a.ad-text-warning:hover {
	color: @warning-active;
}


/**
 * 定义标记样式的文本
 */

.ad-text-info {
	color: @info-normal;
}

a.ad-text-info:hover {
	color: @info-active;
}


/**
 * 定义成功样式文本
 */

.ad-text-success {
	color: @success-normal;
}

a.ad-text-success:hover {
	color: @success-active;
}


/**
 * 柔和中性色
 */

.ad-text-muted {
	color: @font-color-lg;
}

a.ad-text-muted:hover {
	color: @font-color-xl;
}


/**
 * 主要颜色
 */

.ad-text-primary {
	color: @primary-normal;
}

a.ad-text-primary:hover {
	color: @primary-active;
}

/**
 * 亮色 
 */
.ad-text-light {
	color: @font-color-xs;
}
a.ad-text-light:hover{
	color: @font-color-md;
}

/**
 * 默认色
 */
.ad-text-default{
	color: @font-color;
}
a.ad-text-default:hover{
	color: @font-color-dark;
}


/**
 * 成功背景色
 */

.ad-bg-success {
	background-color: @light-success;
	color: @success-normal;
}

a.ad-bg-success:hover {
	background-color: @light-success-dark;
}


/**
 * 警告背景色
 */

.ad-bg-warning {
	background-color: @light-warning;
	color: @warning-normal;
}

a.ad-bg-warning:hover {
	background-color: @light-warning-dark;
}


/**
 * 信息背景色
 */

.ad-bg-info {
	background-color: @light-info;
	color: @info-normal;
}

a.ad-bg-info:hover {
	background-color: @light-info-dark;
}


/**
 * 主要背景色
 */

.ad-bg-primary {
	background-color: @light-primary;
	color: @font-color-xs;
}

a.ad-bg-primary:hover {
	background-color: @light-primary-dark;
}


/**
 * 危险背景色
 */

.ad-bg-danger {
	background-color: @light-danger;
	color: @danger-normal;
}

a.ad-bg-danger:hover {
	background-color: @light-danger-dark;
}


/**
 *柔和背景色 
 */

.ad-bg-muted {
	background-color: @light-default;
	color: @font-color-xl;
}

a.ad-bg-muted:hover {
	background-color: @light-default-dark;
}


/**
 * 文本对齐方式
 */

.ad-text-right {
	text-align: right;
}

.ad-text-left {
	text-align: left;
}

.ad-text-center {
	text-align: center;
}

.ad-text-justify {
	text-align: justify;
}


/**
 * 元素固定在顶部
 */

.ad-fixed-top {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 800;
}


/**
 * 元素固定在底部
 */

.ad-fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 800;
}


/**
 * 右悬浮
 */

.ad-pull-right {
	float: right;
}


/**
 * 左悬浮
 */

.ad-pull-left {
	float: left;
}


/**
 * 隐藏辅助类
 */

.ad-hidden {
	display: none;
}

@media only screen and (max-width:767px) {
	.ad-hidden-xs {
		display: none;
	}
}

@media only screen and (max-width:1023px) {
	.ad-hidden-sm {
		display: none;
	}
}

@media only screen and (max-width:1439px) {
	.ad-hidden-md {
		display: none;
	}
}

@media only screen and (max-width:1919px) {
	.ad-hidden-lg {
		display: none;
	}
}


/**
 * 元素垂直水平居中
 */

.ad-flex-center {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
}

.ad-inline-center{
	display: inline-flex;
	display: -webkit-inline-flex;
	justify-content: center;
	align-items: center;
}


/**
 * 元素不转行，且溢出显示省略号
 */

.ad-ellipsis-nowrap {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}


/**
 * 多行文本
 */

.ad-ellipsis-warp2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}

.ad-ellipsis-warp3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}

.ad-ellipsis-warp4 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}

.ad-ellipsis-warp5 {
	overflow: hidden ;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}

/**
 * 鼠标点击样式
 */
.ad-hover-cursor {
	cursor: pointer;
}

/* 字体大小辅助类 */
.ad-font-xs{
	font-size: @fontSize-smallest;
}
.ad-font-sm{
	font-size: @fontSize-small;
}
.ad-font-md{
	font-size: @fontSize-normal;
}
.ad-font-lg{
	font-size: @fontSize-h6;
}
.ad-font-xl{
	font-size: @fontSize-h4;
}


/* 滚动监听动画 */
.ad-scrollspy.ad-scrollspy-animation {
	transition: all @timeout-xl;
	-ms-transition: all @timeout-xl;
	-moz-transition: all @timeout-xl;
	-webkit-transition: all @timeout-xl;
}

.ad-scrollspy[data-animation="fade"] {
	opacity: 0;
}

.ad-scrollspy[data-animation="slide-left"] {
	opacity: 0;
	transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}

.ad-scrollspy[data-animation="slide-right"] {
	opacity: 0;
	transform: translateX(100%);
	-ms-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-webkit-transform: translateX(100%);
}

.ad-scrollspy[data-animation="slide-bottom"] {
	opacity: 0;
	transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}

.ad-scrollspy[data-animation="slide-top"] {
	opacity: 0;
	transform: translateY(100%);
	-ms-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-webkit-transform: translateY(100%);
}

.ad-scrollspy[data-animation="rotateY"] {
	opacity: 0;
	transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.ad-scrollspy[data-animation="rotateX"] {
	opacity: 0;
	transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
}

.ad-scrollspy[data-animation="scale-small"] {
	opacity: 0;
	transform: scale(0.3);
	-ms-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-webkit-transform: scale(0.3);
}

.ad-scrollspy[data-animation="scale-large"] {
	opacity: 0;
	transform: scale(2);
	-ms-transform: scale(2);
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
}

.ad-scrollspy.ad-scrollspy-inital {
	opacity: 1;
	transform: translate(0) rotate(0) scale(1);
	-ms-transform: translate(0) rotate(0) scale(1);
	-moz-transform: translate(0) rotate(0) scale(1);
	-webkit-transform: translate(0) rotate(0) scale(1);
}