vui-design/src/style/utility/index.less

A high quality UI Toolkit based on Vue.js

.centered { display:block; margin-left:auto; margin-right:auto; }

.clearfix:before,
.clearfix:after { content:""; display:table; }
.clearfix:before {  }
.clearfix:after { height:0; overflow:hidden; visibility:hidden; clear:both; }

.pull-left { float:left !important; }
.pull-right { float:right !important; }

.show { display:block !important; }
.hide { display:none !important; }

.visible { visibility:visible !important; }
.hidden { visibility:hidden !important; }

.margin-0 { margin:0 !important; }
.margin-5 { margin:5px !important; }
.margin-10 { margin:10px !important; }
.margin-15 { margin:15px !important; }
.margin-20 { margin:20px !important; }
.margin-25 { margin:25px !important; }
.margin-30 { margin:30px !important; }
.margin-35 { margin:35px !important; }
.margin-40 { margin:40px !important; }
.margin-45 { margin:45px !important; }
.margin-50 { margin:50px !important; }
.margin-top-0 { margin-top:0 !important; }
.margin-top-5 { margin-top:5px !important; }
.margin-top-10 { margin-top:10px !important; }
.margin-top-15 { margin-top:15px !important; }
.margin-top-20 { margin-top:20px !important; }
.margin-top-25 { margin-top:25px !important; }
.margin-top-30 { margin-top:30px !important; }
.margin-top-35 { margin-top:35px !important; }
.margin-top-40 { margin-top:40px !important; }
.margin-top-45 { margin-top:45px !important; }
.margin-top-50 { margin-top:50px !important; }
.margin-bottom-0 { margin-bottom:0 !important; }
.margin-bottom-5 { margin-bottom:5px !important; }
.margin-bottom-10 { margin-bottom:10px !important; }
.margin-bottom-15 { margin-bottom:15px !important; }
.margin-bottom-20 { margin-bottom:20px !important; }
.margin-bottom-25 { margin-bottom:25px !important; }
.margin-bottom-30 { margin-bottom:30px !important; }
.margin-bottom-35 { margin-bottom:35px !important; }
.margin-bottom-40 { margin-bottom:40px !important; }
.margin-bottom-45 { margin-bottom:45px !important; }
.margin-bottom-50 { margin-bottom:50px !important; }
.margin-left-0 { margin-left:0 !important; }
.margin-left-5 { margin-left:5px !important; }
.margin-left-10 { margin-left:10px !important; }
.margin-left-15 { margin-left:15px !important; }
.margin-left-20 { margin-left:20px !important; }
.margin-left-25 { margin-left:25px !important; }
.margin-left-30 { margin-left:30px !important; }
.margin-left-35 { margin-left:35px !important; }
.margin-left-40 { margin-left:40px !important; }
.margin-left-45 { margin-left:45px !important; }
.margin-left-50 { margin-left:50px !important; }
.margin-right-0 { margin-right:0 !important; }
.margin-right-5 { margin-right:5px !important; }
.margin-right-10 { margin-right:10px !important; }
.margin-right-15 { margin-right:15px !important; }
.margin-right-20 { margin-right:20px !important; }
.margin-right-25 { margin-right:25px !important; }
.margin-right-30 { margin-right:30px !important; }
.margin-right-35 { margin-right:35px !important; }
.margin-right-40 { margin-right:40px !important; }
.margin-right-45 { margin-right:45px !important; }
.margin-right-50 { margin-right:50px !important; }

.padding-0 { padding:0 !important; }
.padding-5 { padding:5px !important; }
.padding-10 { padding:10px !important; }
.padding-15 { padding:15px !important; }
.padding-20 { padding:20px !important; }
.padding-25 { padding:25px !important; }
.padding-30 { padding:30px !important; }
.padding-35 { padding:35px !important; }
.padding-40 { padding:40px !important; }
.padding-45 { padding:45px !important; }
.padding-50 { padding:50px !important; }
.padding-top-0 { padding-top:0 !important; }
.padding-top-5 { padding-top:5px !important; }
.padding-top-10 { padding-top:10px !important; }
.padding-top-15 { padding-top:15px !important; }
.padding-top-20 { padding-top:20px !important; }
.padding-top-25 { padding-top:25px !important; }
.padding-top-30 { padding-top:30px !important; }
.padding-top-35 { padding-top:35px !important; }
.padding-top-40 { padding-top:40px !important; }
.padding-top-45 { padding-top:45px !important; }
.padding-top-50 { padding-top:50px !important; }
.padding-bottom-0 { padding-bottom:0 !important; }
.padding-bottom-5 { padding-bottom:5px !important; }
.padding-bottom-10 { padding-bottom:10px !important; }
.padding-bottom-15 { padding-bottom:15px !important; }
.padding-bottom-20 { padding-bottom:20px !important; }
.padding-bottom-25 { padding-bottom:25px !important; }
.padding-bottom-30 { padding-bottom:30px !important; }
.padding-bottom-35 { padding-bottom:35px !important; }
.padding-bottom-40 { padding-bottom:40px !important; }
.padding-bottom-45 { padding-bottom:45px !important; }
.padding-bottom-50 { padding-bottom:50px !important; }
.padding-left-0 { padding-left:0 !important; }
.padding-left-5 { padding-left:5px !important; }
.padding-left-10 { padding-left:10px !important; }
.padding-left-15 { padding-left:15px !important; }
.padding-left-20 { padding-left:20px !important; }
.padding-left-25 { padding-left:25px !important; }
.padding-left-30 { padding-left:30px !important; }
.padding-left-35 { padding-left:35px !important; }
.padding-left-40 { padding-left:40px !important; }
.padding-left-45 { padding-left:45px !important; }
.padding-left-50 { padding-left:50px !important; }
.padding-right-0 { padding-right:0 !important; }
.padding-right-5 { padding-right:5px !important; }
.padding-right-10 { padding-right:10px !important; }
.padding-right-15 { padding-right:15px !important; }
.padding-right-20 { padding-right:20px !important; }
.padding-right-25 { padding-right:25px !important; }
.padding-right-30 { padding-right:30px !important; }
.padding-right-35 { padding-right:35px !important; }
.padding-right-40 { padding-right:40px !important; }
.padding-right-45 { padding-right:45px !important; }
.padding-right-50 { padding-right:50px !important; }

.opacity-zero { opacity:0; }
.opacity-ten { opacity:0.1; }
.opacity-twenty { opacity:0.2; }
.opacity-thirty { opacity:0.3; }
.opacity-forty { opacity:0.4; }
.opacity-fifty { opacity:0.5; }
.opacity-sixty { opacity:0.6; }
.opacity-seventy { opacity:0.7; }
.opacity-eighty { opacity:0.8; }
.opacity-ninety { opacity:0.9; }
.opacity-hundred { opacity:1; }

.align-top { vertical-align:top; }
.align-middle { vertical-align:middle; }
.align-bottom { vertical-align:bottom; }

.write-nowrap { white-space:nowrap; }
.write-break { white-space:normal; word-break:break-all; word-wrap:break-word; hyphens:auto; }
.write-ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.line-clamp { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; }
.line-clamp1 { -webkit-line-clamp:1; }
.line-clamp2 { -webkit-line-clamp:2; }
.line-clamp3 { -webkit-line-clamp:3; }
.line-clamp4 { -webkit-line-clamp:4; }
.line-clamp5 { -webkit-line-clamp:5; }

.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }

.color-primary { color:@primary-color; }
.color-info { color:@info-color; }
.color-warning { color:@warning-color; }
.color-success { color:@success-color; }
.color-error { color:@error-color; }

.weight-thin { font-weight:@font-weight-thin; }
.weight-bold { font-weight:@font-weight-bold; }

a.link-default, .link-default a { color:@font-color; }
a.link-default:hover, .link-default a:hover { color:tint(@primary-color, 10%); }
a.link-default:active, .link-default a:active { color:shade(@primary-color, 10%); }
a.link-primary, .link-primary a { color:@primary-color; }
a.link-primary:hover, .link-primary a:hover { color:tint(@primary-color, 10%); }
a.link-primary:active, .link-primary a:active { color:shade(@primary-color, 10%); }
a.link-info, .link-info a { color:@info-color; }
a.link-info:hover, .link-info a:hover { color:tint(@info-color, 10%); }
a.link-info:active, .link-info a:active { color:shade(@info-color, 10%); }
a.link-warning, .link-warning a { color:@warning-color; }
a.link-warning:hover, .link-warning a:hover { color:tint(@warning-color, 10%); }
a.link-warning:active, .link-warning a:active { color:shade(@warning-color, 10%); }
a.link-success, .link-success a { color:@success-color; }
a.link-success:hover, .link-success a:hover { color:tint(@success-color, 10%); }
a.link-success:active, .link-success a:active { color:shade(@success-color, 10%); }
a.link-error, .link-error a { color:@error-color; }
a.link-error:hover, .link-error a:hover { color:tint(@error-color, 10%); }
a.link-error:active, .link-error a:active { color:shade(@error-color, 10%); }
a.link-disabled, .link-disabled a { cursor:not-allowed; color:@font-disabled-color; }
a.link-disabled:hover, .link-disabled a:hover { cursor:not-allowed; color:@font-disabled-color; }
a.link-disabled:active, .link-disabled a:active { cursor:not-allowed; color:@font-disabled-color; }