@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
2,588 lines (2,587 loc) • 67.8 kB
CSS
/*!
* USkin v0.6.2 (https://github.com/unitedstack/uskin#readme)
* Copyright 2019 The USkin Authors
* Licensed under MIT (https://github.com/unitedstack/uskin/blob/master/LICENSE)
*/
/**
* Default theme
*/
/**
* Reference:
* http://www.zhihu.com/question/20683099?sort=created
* https://ruby-china.org/topics/14005
*/
/**
* color Pallet v.3 , default color is 500
*/
/**
* Global mixins
*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: "Helvetica Neue", Helvetica, arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53", sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
text-decoration: none;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
text-decoration: none;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/**
* USkin reset based on normalize.css v3.0.1
*
* @author LeeY <yaoli111144@gmail.com>
*/
html {
height: 100%;
font-size: 12px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
color: #252f3d;
}
ul,
ol,
dl,
dd {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
form {
margin: 0;
}
a {
color: #00afc8;
}
a:hover {
color: #00a6be;
}
a:active {
color: #009db4;
}
input,
textarea {
outline: 0;
}
select::-ms-expand {
display: none;
}
.clearfix:before,
.clearfix:after,
.tra-row:before,
.tra-row:after {
content: " ";
display: table;
}
.clearfix:after,
.tra-row:after {
clear: both;
}
.hide {
display: none !important;
}
.show {
display: block;
}
.t-left {
text-align: left;
}
.t-center {
text-align: center;
}
.t-right {
text-align: right;
}
.f-left {
float: left;
}
.f-right {
float: right;
}
@font-face {
font-family: "icons";
src: url(./fonts/9716772f.icon.eot);
src: url(./fonts/9716772f.icon.eot#iefix) format("embedded-opentype"), url(./fonts/a4d22247.icon.woff) format("woff"), url(./fonts/7ffc7893.icon.ttf) format("truetype"), url(./fonts/26f632f2.icon.svg#icons) format("svg");
font-weight: normal;
font-style: normal;
}
.glyphicon {
display: inline-block;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon:before {
font-family: "icons";
}
.icon-about:before {
content: "\F101";
}
.icon-account-charge:before {
content: "\F102";
}
.icon-active-yes:before {
content: "\F103";
}
.icon-active:before {
content: "\F104";
}
.icon-add-notice:before {
content: "\F105";
}
.icon-address-scope:before {
content: "\F106";
}
.icon-app-center:before {
content: "\F107";
}
.icon-applications:before {
content: "\F108";
}
.icon-arch:before {
content: "\F109";
}
.icon-arrow-down:before {
content: "\F10A";
}
.icon-arrow-left:before {
content: "\F10B";
}
.icon-arrow-right:before {
content: "\F10C";
}
.icon-arrow-up:before {
content: "\F10D";
}
.icon-associate:before {
content: "\F10E";
}
.icon-avatar:before {
content: "\F10F";
}
.icon-backup:before {
content: "\F110";
}
.icon-billing-record:before {
content: "\F111";
}
.icon-billing:before {
content: "\F112";
}
.icon-bucket:before {
content: "\F113";
}
.icon-bw-in:before {
content: "\F114";
}
.icon-bw-out:before {
content: "\F115";
}
.icon-cache-config:before {
content: "\F116";
}
.icon-cache:before {
content: "\F117";
}
.icon-calendar:before {
content: "\F118";
}
.icon-cc-video:before {
content: "\F119";
}
.icon-centos:before {
content: "\F11A";
}
.icon-charge-record:before {
content: "\F11B";
}
.icon-close:before {
content: "\F11C";
}
.icon-cloud-video:before {
content: "\F11D";
}
.icon-collaboration:before {
content: "\F11E";
}
.icon-copy:before {
content: "\F11F";
}
.icon-coreos:before {
content: "\F120";
}
.icon-correct:before {
content: "\F121";
}
.icon-cpu:before {
content: "\F122";
}
.icon-create:before {
content: "\F123";
}
.icon-database-config:before {
content: "\F124";
}
.icon-database:before {
content: "\F125";
}
.icon-debian:before {
content: "\F126";
}
.icon-delete:before {
content: "\F127";
}
.icon-deploy:before {
content: "\F128";
}
.icon-disable:before {
content: "\F129";
}
.icon-dissociate:before {
content: "\F12A";
}
.icon-doc:before {
content: "\F12B";
}
.icon-docx:before {
content: "\F12C";
}
.icon-domain:before {
content: "\F12D";
}
.icon-double-arrow-left:before {
content: "\F12E";
}
.icon-double-arrow-right:before {
content: "\F12F";
}
.icon-download:before {
content: "\F130";
}
.icon-dropdown:before {
content: "\F131";
}
.icon-edit:before {
content: "\F132";
}
.icon-empty:before {
content: "\F133";
}
.icon-enable:before {
content: "\F134";
}
.icon-epc-suse:before {
content: "\F135";
}
.icon-exe:before {
content: "\F136";
}
.icon-eye:before {
content: "\F137";
}
.icon-fedora:before {
content: "\F138";
}
.icon-file-sharing:before {
content: "\F139";
}
.icon-file:before {
content: "\F13A";
}
.icon-filter-collapse:before {
content: "\F13B";
}
.icon-filter-expand:before {
content: "\F13C";
}
.icon-flavor-setting:before {
content: "\F13D";
}
.icon-flavor:before {
content: "\F13E";
}
.icon-floating-ip:before {
content: "\F13F";
}
.icon-flv:before {
content: "\F140";
}
.icon-folder:before {
content: "\F141";
}
.icon-freebsd:before {
content: "\F142";
}
.icon-g-admin:before {
content: "\F143";
}
.icon-g-approval:before {
content: "\F144";
}
.icon-g-bill:before {
content: "\F145";
}
.icon-g-calamari:before {
content: "\F146";
}
.icon-g-dashboard:before {
content: "\F147";
}
.icon-g-ec2:before {
content: "\F148";
}
.icon-g-grafana:before {
content: "\F149";
}
.icon-g-rds:before {
content: "\F14A";
}
.icon-g-storage:before {
content: "\F14B";
}
.icon-g-subaccount:before {
content: "\F14C";
}
.icon-g-ticket:before {
content: "\F14D";
}
.icon-g-union:before {
content: "\F14E";
}
.icon-g-vmware:before {
content: "\F14F";
}
.icon-g-vpc:before {
content: "\F150";
}
.icon-gentoo:before {
content: "\F151";
}
.icon-global:before {
content: "\F152";
}
.icon-heat-list:before {
content: "\F153";
}
.icon-help:before {
content: "\F154";
}
.icon-host-aggregates:before {
content: "\F155";
}
.icon-host:before {
content: "\F156";
}
.icon-image:before {
content: "\F157";
}
.icon-ingress:before {
content: "\F158";
}
.icon-instance-snapshot:before {
content: "\F159";
}
.icon-instance:before {
content: "\F15A";
}
.icon-invoice:before {
content: "\F15B";
}
.icon-jpg:before {
content: "\F15C";
}
.icon-keypair:before {
content: "\F15D";
}
.icon-lb:before {
content: "\F15E";
}
.icon-listener:before {
content: "\F15F";
}
.icon-loading:before {
content: "\F160";
}
.icon-log:before {
content: "\F161";
}
.icon-logout:before {
content: "\F162";
}
.icon-m-swallow:before {
content: "\F163";
}
.icon-memory:before {
content: "\F164";
}
.icon-metadata-definition:before {
content: "\F165";
}
.icon-monitor:before {
content: "\F166";
}
.icon-more:before {
content: "\F167";
}
.icon-mp3:before {
content: "\F168";
}
.icon-mp4:before {
content: "\F169";
}
.icon-mvb:before {
content: "\F16A";
}
.icon-network-qos:before {
content: "\F16B";
}
.icon-network:before {
content: "\F16C";
}
.icon-notice-management:before {
content: "\F16D";
}
.icon-notification:before {
content: "\F16E";
}
.icon-object-storage:before {
content: "\F16F";
}
.icon-opensuse:before {
content: "\F170";
}
.icon-overview:before {
content: "\F171";
}
.icon-pdf:before {
content: "\F172";
}
.icon-performance:before {
content: "\F173";
}
.icon-png:before {
content: "\F174";
}
.icon-port:before {
content: "\F175";
}
.icon-power-off:before {
content: "\F176";
}
.icon-power-on:before {
content: "\F177";
}
.icon-ppt:before {
content: "\F178";
}
.icon-pptx:before {
content: "\F179";
}
.icon-project:before {
content: "\F17A";
}
.icon-property:before {
content: "\F17B";
}
.icon-question:before {
content: "\F17C";
}
.icon-quota-approval:before {
content: "\F17D";
}
.icon-rar:before {
content: "\F17E";
}
.icon-red-hat:before {
content: "\F17F";
}
.icon-redhat:before {
content: "\F180";
}
.icon-redirect-policy:before {
content: "\F181";
}
.icon-refresh:before {
content: "\F182";
}
.icon-region:before {
content: "\F183";
}
.icon-registration-approval:before {
content: "\F184";
}
.icon-remove:before {
content: "\F185";
}
.icon-resource-pool:before {
content: "\F186";
}
.icon-restart:before {
content: "\F187";
}
.icon-rmvb:before {
content: "\F188";
}
.icon-role:before {
content: "\F189";
}
.icon-router:before {
content: "\F18A";
}
.icon-s-lock:before {
content: "\F18B";
}
.icon-s-unlock:before {
content: "\F18C";
}
.icon-search:before {
content: "\F18D";
}
.icon-security-group:before {
content: "\F18E";
}
.icon-security-log:before {
content: "\F18F";
}
.icon-select-down:before {
content: "\F190";
}
.icon-setting:before {
content: "\F191";
}
.icon-sles:before {
content: "\F192";
}
.icon-snapshot:before {
content: "\F193";
}
.icon-status-active:before {
content: "\F194";
}
.icon-status-approving:before {
content: "\F195";
}
.icon-status-deleted:before {
content: "\F196";
}
.icon-status-disabled:before {
content: "\F197";
}
.icon-status-light:before {
content: "\F198";
}
.icon-status-paused:before {
content: "\F199";
}
.icon-status-pending:before {
content: "\F19A";
}
.icon-status-shutdown:before {
content: "\F19B";
}
.icon-status-warning:before {
content: "\F19C";
}
.icon-subnet:before {
content: "\F19D";
}
.icon-swf:before {
content: "\F19E";
}
.icon-system-information:before {
content: "\F19F";
}
.icon-template-list:before {
content: "\F1A0";
}
.icon-tfcloud:before {
content: "\F1A1";
}
.icon-ticket:before {
content: "\F1A2";
}
.icon-tiff:before {
content: "\F1A3";
}
.icon-topology:before {
content: "\F1A4";
}
.icon-txt:before {
content: "\F1A5";
}
.icon-ubuntu:before {
content: "\F1A6";
}
.icon-upload:before {
content: "\F1A7";
}
.icon-user-group:before {
content: "\F1A8";
}
.icon-user:before {
content: "\F1A9";
}
.icon-video-account-management:before {
content: "\F1AA";
}
.icon-vnc:before {
content: "\F1AB";
}
.icon-volume:before {
content: "\F1AC";
}
.icon-vpn:before {
content: "\F1AD";
}
.icon-windows:before {
content: "\F1AE";
}
.icon-wma:before {
content: "\F1AF";
}
.icon-xls:before {
content: "\F1B0";
}
.icon-zip:before {
content: "\F1B1";
}
@keyframes spin {
from {
transform: rotate(0deg);
}
20% {
transform: rotate(135deg);
}
to {
transform: rotate(180deg);
}
}
@keyframes modalZoomIn {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8, 0.8);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1, 1);
}
}
@keyframes modalZoomOut {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1, 1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8, 0.8);
}
}
@keyframes modalFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes modalFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
table.table {
display: table;
width: 100%;
max-width: 100%;
background-color: #fff;
}
table.table input[type="checkbox"] {
vertical-align: middle;
}
table.table > thead {
height: 36px;
background-color: #ecf0f2;
font-size: 12px;
color: #626f7e;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
table.table > thead > tr {
height: 36px;
}
table.table > thead > tr th {
padding-left: 16px;
text-align: left;
font-weight: normal;
}
table.table > thead > tr th:not(:first-child) {
border-left: 1px solid #fff;
}
table.table > tbody > tr {
height: 40px;
border-bottom: 1px solid #ecf0f2;
}
table.table > tbody > tr.selected {
background-color: #b9f1f9 !important;
}
table.table > tbody > tr > td {
padding-left: 16px;
}
.table {
width: 100%;
max-width: 100%;
background-color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.table input[type="checkbox"] {
vertical-align: middle;
}
.table .table-header {
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 36px;
height: 36px;
max-height: 36px;
}
.table .table-header > div {
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
height: 36px;
line-height: 36px;
padding-left: 16px;
background-color: #ecf0f2;
color: #626f7e;
border-right: 1px solid #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table .table-header > div .filter-box {
display: inline-block;
cursor: pointer;
}
.table .table-header > div .filter-box .filter-icon {
display: inline-block;
width: 16px;
height: 36px;
text-align: center;
cursor: pointer;
}
.table .table-header > div .filter-box .filter-icon::after {
content: "";
font-size: 0;
width: 0;
position: relative;
top: -2px;
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-bottom: 3px solid #939ba3;
border-right: 3px solid #939ba3;
}
.table .table-header > div .filter-box .filter-icon:hover::after {
border-bottom: 3px solid #626f7e;
border-right: 3px solid #626f7e;
}
.table .table-header > div .filter-box .filter {
position: absolute;
border: 1px solid #ecf0f2;
width: 150px;
text-align: left;
background: #fff;
cursor: pointer;
box-shadow: 0 0 15px #ecf0f2;
z-index: 9;
}
.table .table-header > div .filter-box .filter > div {
margin: 2px;
padding-left: 10px;
padding-right: 20px;
position: relative;
height: 36px;
line-height: 36px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.table .table-header > div .filter-box .filter > div:hover {
background: #f5fdfe;
}
.table .table-header > div .filter-box .filter > div.selected {
background: #b9f1f9 !important;
}
.table .table-header > div .filter-box .filter > div.selected i {
position: absolute;
top: 12px;
right: 6px;
font-weight: bold;
color: #00afc8;
}
.table .table-header > div:last-child {
border-right: none;
}
.table .table-header > div.checkbox {
width: 36px;
-ms-flex: none;
flex: none;
padding: 0 10px;
}
.table .table-header > div.sortable {
display: inline-block;
}
.table .table-header > div.sortable .title {
cursor: pointer;
}
.table .table-header > div.sortable .sort-box {
width: 20px;
height: 36px;
float: right;
}
.table .table-header > div.sortable .sort-box .sort-up,
.table .table-header > div.sortable .sort-box .sort-down {
display: block;
height: 50%;
padding-left: 6px;
cursor: pointer;
position: relative;
}
.table .table-header > div.sortable .sort-box .sort-up .arrow-up {
position: absolute;
bottom: 1px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #939ba3;
}
.table .table-header > div.sortable .sort-box .sort-up:hover .arrow-up {
border-bottom: 4px solid #626f7e;
}
.table .table-header > div.sortable .sort-box .sort-up.selected .arrow-up {
border-bottom: 4px solid #626f7e;
}
.table .table-header > div.sortable .sort-box .sort-down .arrow-down {
position: absolute;
top: 1px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #939ba3;
}
.table .table-header > div.sortable .sort-box .sort-down:hover .arrow-down {
border-top: 4px solid #626f7e;
}
.table .table-header > div.sortable .sort-box .sort-down.selected .arrow-down {
border-top: 4px solid #626f7e;
}
.table .table-header > div .drag-line {
float: right;
width: 8px;
height: 36px;
cursor: col-resize;
}
.table .loading-data {
-ms-flex: 1;
flex: 1;
width: 100%;
overflow-y: hidden;
position: relative;
}
.table .loading-data .icon-loading {
position: absolute;
top: 60px;
left: 50%;
margin-left: -18px;
width: 36px;
color: #626f7e;
animation: spin 1.28s linear .28s infinite;
-moz-animation: spin 1.28s linear .28s infinite;
-webkit-animation: spin 1.28s linear .28s infinite;
font-size: 36px !important;
}
.table .loading-data .icon-loading:before {
content: "\F160";
}
.table .table-body {
overflow-x: hidden;
overflow-y: auto;
}
.table .table-body .row {
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid #ecf0f2;
}
.table .table-body .row > div {
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
height: 40px;
line-height: 40px;
padding-left: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table .table-body .row > div:last-child {
border-right: none;
}
.table .table-body .row > div.checkbox {
width: 36px;
-ms-flex: none;
flex: none;
padding: 0 10px;
}
.table .table-body .row.selected {
background-color: #b9f1f9 !important;
}
.table .resize-column-line {
background-color: #d5dddf;
width: 1px;
position: fixed;
z-index: 999;
}
.table-striped > tbody > tr:nth-child(even) {
background-color: #f5fdfe;
}
.table-striped .table-body .row:nth-child(even) {
background-color: #f5fdfe;
}
.table-hover > tbody > tr:hover {
background-color: #f5fdfe;
}
.table-hover .table-body .row:hover {
background-color: #f5fdfe;
}
.table-mini .table-header {
min-height: 28px;
height: 28px;
max-height: 28px;
border-bottom: 1px solid #ecf0f2;
}
.table-mini .table-header > div {
height: 28px;
line-height: 28px;
background-color: #fff;
}
.table-mini .table-header > div.sortable .sort-box {
height: 28px;
width: 16px;
}
.table-mini .table-header > div .filter-box .filter-icon {
width: 12px;
height: 28px;
}
.table-mini .table-body .row > div {
height: 36px;
line-height: 36px;
}
input {
padding: 4px 10px;
border: 1px solid #e3e4e5;
border-radius: 2px;
height: 22px;
line-height: 22px;
box-sizing: content-box;
}
input:hover {
border-color: #00afc8;
}
input:focus {
border-color: #00afc8;
}
input.error {
border-color: #e05c69;
}
select {
padding: 4px 10px;
width: 125px;
height: 22px;
border: 1px solid #e3e4e5;
border-radius: 2px;
background-color: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: content-box;
cursor: pointer;
}
select:hover {
border-color: #00afc8;
}
select:focus {
border-color: #00afc8;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #252f3d;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
color: #bbbfc5;
border-color: #cccccc;
background-color: #eeeeee;
cursor: not-allowed !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="radio"],
input[type="checkbox"],
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
height: auto;
cursor: pointer;
border: none;
height: 16px;
width: 16px;
-webkit-appearance: none;
}
select,
input[type="radio"],
input[type="checkbox"],
input[type="radio"][disabled],
input[type="checkbox"][disabled] {
background: url(./img/1a5a0b07.uskin_input.png) no-repeat -20px 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {
select,
input[type="radio"],
input[type="checkbox"],
input[type="radio"][disabled],
input[type="checkbox"][disabled] {
background: url(./img/65f2124f.uskin_input@x2.png) no-repeat -20px 0;
background-size: 96px 90px;
}
}
select {
background-position: right -71px;
}
select:hover {
background-position: right -46px;
}
select:hover:disabled {
background-position: right -71px;
}
input[type="radio"] {
background-position: -20px -21px;
}
input[type="radio"]:hover {
background-position: -40px -21px;
}
input[type="radio"]:checked {
background-position: -60px -21px;
}
input[type="radio"]:checked:disabled {
background-position: -80px -21px;
}
input[type="radio"]:disabled {
background-position: 0 -21px;
}
input[type="checkbox"]:hover {
background-position: -40px 0;
}
input[type="checkbox"]:checked {
background-position: -60px 0;
}
input[type="checkbox"]:checked:disabled {
background-position: -80px 0;
}
input[type="checkbox"]:disabled {
background-position: 0 0;
}
.btn {
display: inline-block;
box-sizing: border-box;
min-width: 80px;
border: 1px solid transparent;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 12px;
font-size: 13px;
height: 32px;
line-height: 30px;
border-radius: 2px;
color: white;
background-color: #00afc8;
border-color: #00afc8;
}
.btn:hover {
color: white;
background-color: #00a6be;
border-color: #00a6be;
}
.btn:active {
color: white;
background-color: #009db4;
}
.btn:focus {
outline: none;
}
.btn[disabled],
.btn.disabled {
color: #939ba3;
background-color: #d5dddf;
border-color: #d5dddf;
cursor: not-allowed;
}
.btn[disabled]:hover,
.btn.disabled:hover {
color: #939ba3;
background-color: #d5dddf;
border-color: #d5dddf;
}
.btn[disabled]:active,
.btn.disabled:active {
color: #939ba3;
background-color: #d5dddf;
}
.btn[disabled]:focus,
.btn.disabled:focus {
outline: none;
}
.btn > i + span {
margin-left: 6px;
}
.btn > span + i {
margin-left: 6px;
}
.btn .glyphicon {
vertical-align: text-bottom;
font-weight: bold;
width: 13px;
}
.btn-create {
color: white;
background-color: #1eb9a5;
border-color: #1eb9a5;
}
.btn-create:hover {
color: white;
background-color: #1db09d;
border-color: #1db09d;
}
.btn-create:active {
color: white;
background-color: #1ba795;
}
.btn-create:focus {
outline: none;
}
.btn-warning {
color: white;
background-color: #f2994b;
border-color: #f2994b;
}
.btn-warning:hover {
color: white;
background-color: #f78913;
border-color: #f78913;
}
.btn-warning:active {
color: white;
background-color: #f78913;
}
.btn-warning:focus {
outline: none;
}
.btn-delete {
color: white;
background-color: #e05c69;
border-color: #e05c69;
}
.btn-delete:hover {
color: white;
background-color: #de5361;
border-color: #de5361;
}
.btn-delete:active {
color: white;
background-color: #dd4b59;
}
.btn-delete:focus {
outline: none;
}
.btn-cancel {
color: #626f7e;
background-color: #ecf0f2;
border-color: #ecf0f2;
}
.btn-cancel:hover {
color: #626f7e;
background-color: #e6ebee;
border-color: #e6ebee;
}
.btn-cancel:active {
color: #626f7e;
background-color: #e0e6ea;
}
.btn-cancel:focus {
outline: none;
}
.btn-status {
color: #252f3d;
background-color: #ecf0f2;
border-color: #ecf0f2;
}
.btn-status:hover {
color: #252f3d;
background-color: #f5fdfe;
border-color: #f5fdfe;
}
.btn-status:active {
color: #252f3d;
background-color: #f5fdfe;
}
.btn-status:focus {
outline: none;
}
.btn-status.selected {
color: #252f3d;
background-color: #b9f1f9;
border-color: #b9f1f9;
}
.btn-initial {
min-width: initial;
}
.btn-xl {
padding: 0 40px;
font-size: 18px;
height: 48px;
line-height: 46px;
border-radius: 2px;
}
.btn-lg {
padding: 0 20px;
font-size: 14px;
height: 40px;
line-height: 38px;
border-radius: 2px;
}
.btn-sm {
padding: 0 12px;
font-size: 12px;
height: 28px;
line-height: 26px;
border-radius: 2px;
}
.btn-xs {
padding: 0 12px;
font-size: 12px;
height: 24px;
line-height: 22px;
border-radius: 2px;
}
.btn-loading > .icon-loading {
animation: spin 1.28s linear .28s infinite;
-moz-animation: spin 1.28s linear .28s infinite;
-webkit-animation: spin 1.28s linear .28s infinite;
}
.btn-group {
display: inline-block;
}
.btn-group > .btn {
float: left;
margin-right: 1px;
}
.btn-group > .btn:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group > .btn:last-child {
margin-right: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical {
display: inline-block;
}
.btn-group-vertical > .btn {
display: block;
margin-bottom: 1px;
}
.btn-group-vertical > .btn:first-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child {
margin-bottom: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-justified.btn-group {
display: table;
wdith: 100%;
border-spacing: 1px 0;
}
.btn-group-justified.btn-group > .btn {
float: none;
display: table-cell;
width: 1%;
}
.btn-group-justified.btn-group-vertical {
display: block;
}
.dropdown {
position: absolute;
padding: 10px 0;
z-index: 1001;
min-width: 135px;
border: 1px solid #ecf0f2;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.12);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown::before {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background-color: #00afc8;
content: "";
}
.dropdown ul {
position: relative;
}
.dropdown ul:first-child:before {
display: none;
}
.dropdown ul:before {
display: block;
margin: 0 16px 5px;
height: 5px;
border-bottom: 1px solid #e3e4e5;
content: "";
}
.dropdown ul li.dropdown-header {
height: 20px;
line-height: 20px;
font-weight: normal;
padding-left: 16px;
color: #939ba3;
}
.dropdown ul li.dropdown-header:hover,
.dropdown ul li.dropdown-header:active,
.dropdown ul li.dropdown-header:focus {
background-color: transparent;
}
.dropdown ul li:hover,
.dropdown ul li:active,
.dropdown ul li:focus {
background-color: #b9f1f9;
}
.dropdown ul li:hover > .dropdown-sub,
.dropdown ul li:active > .dropdown-sub,
.dropdown ul li:focus > .dropdown-sub {
display: block;
}
.dropdown ul li.disabled {
color: #bbbfc5;
background-color: transparent !important;
cursor: not-allowed;
}
.dropdown ul li.has-submenu > a::after {
display: block;
content: "";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #bbbfc5;
margin-top: 10px;
margin-right: -10px;
}
.dropdown ul li a {
display: block;
padding: 0 20px;
height: 30px;
line-height: 30px;
color: #252f3d;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dropdown ul li.danger a:hover,
.dropdown ul li.danger a:active,
.dropdown ul li.danger a:focus {
background-color: #fdc4c8;
}
.dropdown ul li.disabled a {
color: #bbbfc5;
background-color: transparent;
cursor: not-allowed;
}
.dropdown ul li > .dropdown-sub {
left: 100%;
top: 0;
position: absolute;
display: none;
}
.dropdown ul li > .dropdown-sub::before {
display: none;
}
.dropdown-btn {
display: inline-block;
position: relative;
margin-right: 8px;
}
.tip {
padding: 18px 20px;
line-height: 18px;
border-radius: 2px;
position: relative;
background-color: #fff;
}
.tip strong {
margin-right: 5px;
font-size: 14px;
line-height: 14px;
}
.tip strong i {
margin-right: 6px;
}
.tip .tip-icon {
display: inline-block;
vertical-align: top;
}
.tip .tip-content {
display: inline-block;
}
.tip .icon-close {
position: absolute;
display: inline-block;
width: 14px;
height: 14px;
color: #bbbfc5;
cursor: pointer;
right: 7px;
top: 21px;
}
.tip .icon-close:before {
font-size: 14px;
}
.tip .icon-close:hover {
color: #626f7e;
}
.tip .icon-close:active {
color: #626f7e;
}
.tip .icon-close.hide {
display: none;
}
.tip-shadow {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.tip-info {
background-color: #f5fdfe;
border: 1px solid #00afc8;
}
.tip-info strong {
color: #00afc8;
}
.tip-success {
background-color: #def9f6;
border: 1px solid #1eb9a5;
}
.tip-success strong {
color: #1eb9a5;
}
.tip-warning {
background-color: #fff7ec;
border: 1px solid #f2994b;
}
.tip-warning strong {
color: #f2994b;
}
.tip-danger {
background-color: #fff5f5;
border: 1px solid #e05c69;
}
.tip-danger strong {
color: #e05c69;
}
.notification {
position: fixed;
top: 72px;
right: 0;
margin-right: 20px;
z-index: 1000;
}
.notification .notice {
padding: 18px 20px;
line-height: 18px;
border-radius: 2px;
background-color: #fff;
position: relative;
margin-bottom: 10px;
padding: 20px;
width: 300px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
transform-origin: 0 0;
}
.notification .notice strong {
margin-right: 5px;
font-size: 14px;
line-height: 14px;
}
.notification .notice strong i {
margin-right: 6px;
}
.notification .notice .tip-icon {
display: inline-block;
vertical-align: top;
}
.notification .notice .tip-content {
display: inline-block;
}
.notification .notice .icon-close {
position: absolute;
display: inline-block;
width: 14px;
height: 14px;
color: #bbbfc5;
cursor: pointer;
right: 7px;
top: 21px;
}
.notification .notice .icon-close:before {
font-size: 14px;
}
.notification .notice .icon-close:hover {
color: #626f7e;
}
.notification .notice .icon-close:active {
color: #626f7e;
}
.notification .notice .icon-close.hide {
display: none;
}
.notification .notice .tip-icon strong i {
font-size: 30px;
margin-right: 15px;
}
.notification .notice .tip-content strong {
color: inherit;
font-weight: normal;
}
.notice-info {
background-color: #f5fdfe;
border: 1px solid #00afc8;
}
.notice-info strong {
color: #00afc8;
}
.notice-success {
background-color: #def9f6;
border: 1px solid #1eb9a5;
}
.notice-success strong {
color: #1eb9a5;
}
.notice-warning {
background-color: #fff7ec;
border: 1px solid #f2994b;
}
.notice-warning strong {
color: #f2994b;
}
.notice-danger {
background-color: #fff5f5;
border: 1px solid #e05c69;
}
.notice-danger strong {
color: #e05c69;
}
.notice-enter {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-play-state: paused;
}
.notice-enter.notice-enter-active {
animation-name: noticeFadeIn;
animation-play-state: running;
}
.notice-leave {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-play-state: paused;
}
.notice-leave.notice-leave-active {
animation-name: noticeFadeOut;
animation-play-state: running;
}
@keyframes noticeFadeIn {
0% {
opacity: 0;
transform: translate(100%, 0);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes noticeFadeOut {
0% {
opacity: 1;
margin-bottom: 10px;
padding-top: 20px;
padding-bottom: 20px;
max-height: 150px;
}
100% {
opacity: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
max-height: 0;
}
}
.modal {
position: absolute;
left: 50%;
top: 50%;
width: 540px;
transform: translate3d(-50%, -50%, 0) scale(1, 1);
overflow: hidden;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.modal .modal-hd {
position: relative;
padding-left: 48px;
height: 46px;
background-color: #ecf0f2;
}
.modal .modal-hd h6 {
height: 46px;
line-height: 46px;
font-size: 18px;
font-weight: normal;
}
.modal .modal-hd .close {
position: absolute;
top: 16px;
right: 20px;
display: inline-block;
width: 14px;
height: 14px;
color: #bbbfc5;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.modal .modal-hd .close:before {
font-size: 14px;
}
.modal .modal-hd .close:hover {
color: #626f7e;
}
.modal .modal-hd .close:active {
color: #626f7e;
}
.modal .modal-bd {
padding: 30px 48px 46px;
min-height: 40px;
}
.modal .modal-ft {
padding: 8px 36px;
height: 50px;
border-top: 1px solid #ecf0f2;
text-align: right;
font-size: 0;
box-sizing: border-box;
}
.modal .modal-ft > .btn:not(:last-child) {
margin-right: 12px;
}
.modal.modal-enter {
opacity: 0;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
animation-play-state: paused;
}
.modal.modal-enter.modal-enter-active {
animation-name: modalZoomIn;
animation-play-state: running;
}
.modal.modal-leave {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
animation-play-state: paused;
}
.modal.modal-leave.modal-leave-active {
animation-name: modalZoomOut;
animation-play-state: running;
}
.modal .modal-bd {
padding: 36px;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title {
height: 36px;
line-height: 36px;
font-size: 24px;
margin-bottom: 8px;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title i {
margin-right: 8px;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title i.info {
color: #00afc8;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title i.success {
color: #1eb9a5;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title i.warning {
color: #f2994b;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-title i.danger {
color: #e05c69;
}
.modal .modal-bd .modal-reminder-content .modal-reminder-message {
max-height: 100px;
overflow-y: auto;
}
.modal-mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.55);
height: 100%;
z-index: 998;
}
.modal-mask.modal-mask-enter {
opacity: 0;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
animation-play-state: paused;
}
.modal-mask.modal-mask-enter.modal-mask-enter-active {
animation-name: modalFadeIn;
animation-play-state: running;
}
.modal-mask.modal-mask-leave {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
animation-play-state: paused;
}
.modal-mask.modal-mask-leave.modal-mask-leave-active {
animation-name: modalFadeOut;
animation-play-state: running;
}
.tabs {
height: 48px;
border-bottom: 3px solid #ecf0f2;
font-size: 0;
box-sizing: border-box;
}
.tabs .tab {
display: inline-block;
}
.tabs .tab:not(:first-child) {
margin-left: 8px;
}
.tabs .tab:hover,
.tabs .tab:active {
border-bottom: 3px solid #b9f1f9;
}
.tabs .tab.selected {
border-bottom: 3px solid #00afc8;
}
.tabs .tab.selected a {
color: #00afc8;
cursor: default;
}
.tabs .tab.sole {
border-bottom: 3px solid #ecf0f2;
}
.tabs .tab.sole a {
color: #00afc8;
cursor: default;
}
.tabs .tab.disabled {
border-bottom: 3px solid #ecf0f2;
}
.tabs .tab.disabled a {
cursor: not-allowed !important;
}
.tabs .tab a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 6px 12px 4px;
height: 35px;
line-height: 35px;
font-size: 16px;
color: #939ba3;
cursor: pointer;
}
.tabs-mini {
padding-left: 70px;
height: 36px;
background-color: #ecf0f2;
border: none;
font-size: 12px;
}
.tabs-mini .tab {
display: inline-block;
margin-top: 6px;
height: 30px;
line-height: 30px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
}
.tabs-mini .tab:hover {
background-color: #b9f1f9;
}
.tabs-mini .tab.selected {
background-color: #fff;
}
.tabs-mini .tab.selected a {
color: #252f3d;
cursor: default;
}
.tabs-mini .tab.disabled a {
cursor: not-allowed !important;
background-color: #ecf0f2;
cursor: default;
}
.tabs-mini .tab a {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
padding: 0 16px;
color: #626f7e;
cursor: pointer;
}
.switch {
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch input {
position: absolute;
visibility: hidden;
left: -99px;
}
.switch input + .switch-inner {
display: block;
position: relative;
padding-right: 10px;
height: 22px;
line-height: 22px;
width: 100%;
background-color: #bbbfc5;
color: #fff;
font-weight: bold;
border-radius: 11px;
text-align: right;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.4s;
}
.switch input + .switch-inner::after {
position: absolute;
content: "";
width: 16px;
height: 16px;
top: 3px;
left: 5px;
background-color: #fff;
border-radius: 50%;
transition: all .4s;
}
.switch input:checked + .switch-inner {
padding-left: 10px;
background-color: #b9f1f9;
color: #00afc8;
text-align: left;
}
.switch input:checked + .switch-inner::after {
left: calc(100% - 20px);
background-color: #00afc8;
}
.switch.disabled input + .switch-inner {
cursor: not-allowed;
color: #bbbfc5;
background-color: #d5dddf;
}
.switch.disabled input + .switch-inner::after {
background-color: #bbbfc5;
}
.slider {
position: relative;
height: 16px;
background-color: #f2f3f4;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
width: 300px;
}
.slider .slider-track {
width: 0;
height: 100%;
background-color: #b9f1f9;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.slider .slider-track.animate {
transition: width .5s;
}
.slider .slider-default {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: #b9f1f9;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.slider .slider-thumb {
position: absolute;
left: 0;
top: -3px;
width: 1px;
height: 12px;
border: 5px solid #00afc8;
border-radius: 1px;
background-color: #fff;
cursor: pointer;
margin-left: -5px;
}
.slider .slider-thumb.animate {
transition: left .5s;
}
.slider.disabled {
cursor: default;
}
.slider.disabled .slider-track {
background-color: #d5dddf;
}
.slider.disabled .slider-thumb {
cursor: default;
border-color: #bbbfc5;
}
.slider.noclick {
cursor: default;
}
.steps .step-item {
float: left;
position: relative;
text-align: center;
width: 190px;
}
.steps .step-item span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
border: 3px solid #f2f3f4;
background-color: #e3e4e5;
z-index: 9;
cursor: pointer;
}
.steps .step-item.selected span {
border: 3px solid #ecf0f2;
background-color: #1db09d;
}
.steps .step-item.disabled span {
cursor: default;
}
.steps .step-item .delimiter {
position: absolute;
top: 10px;
right: 0;
width: 100%;
height: 2px;
background-color: #f2f3f4;
z-index: 8;
}
.steps .step-item:first-child .delimiter {
width: 50%;
}
.steps .step-item:last-child .delimiter {
left: 0;
width: 50%;
}
.breadcrumb .breadcrumb-item > span {
font-weight: bold;
color: #bbbfc5;
}
.breadcrumb .breadcrumb-item > span.breadcrumb-item-next {
margin: 0 4px;
}
.panel {
width: 400px;
border: 1px solid #ecf0f2;
border-radius: 2px;
overflow: hidden;
}
.panel .panel-hd {
background-color: #ecf0f2;
font-size: 16px;
color: #252f3d;
height: 44px;
line-height: 44px;
padding-left: 18px;
padding-right: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel .panel-hd > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.panel .panel-bd {
padding: 18px;
line-height: 18px;
}
.menu {
background-color: #fff;
width: 200px;
height: inherit;
overflow-y: auto;
overflow-x: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-right: 1px solid #e3e4e5;
}
.menu > li:first-child > h6 + ul,
.menu > li:first-child > div > h6 + ul {
margin-top: 0;
}
.menu > li:first-child > ul,
.menu > li:first-child > div > ul {
margin-top: 20px;
}
.menu > li h6,
.menu > li > div h6 {
padding: 16px 20px 8px;
color: #bbbfc5;
font-weight: normal;
}
.menu > li h6.menu-title-toggle,
.menu > li > div h6.menu-title-toggle {
cursor: pointer;
}
.menu > li h6.menu-title-toggle .icon-arrow-up,
.menu > li > div h6.menu-title-toggle .icon-arrow-up {
float: right;
transition: all .3s ease;
}
.menu > li h6.menu-title-toggle .icon-arrow-up.rotate,
.menu > li > div h6.menu-title-toggle .icon-arrow-up.rotate {
transform: rotate(180deg);
}
.menu > li ul.menu-item-toggle,
.menu > li > div ul.menu-item-toggle {
transition: height .3s ease;
overflow: hidden;
}
.menu > li ul > li,
.menu > li > div ul > li {
display: block;
padding-left: 20px;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #626f7e;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.menu > li ul > li:hover,
.menu > li > div ul > li:hover {
color: #00afc8;
}
.menu > li ul > li.menu-item-selected,
.menu > li > div ul > li.menu-item-selected {
height: 38px;
line-height: 38px;
color: #00afc8;
background-color: #fff;
border-top: 1px solid #e3e4e5;
border-bottom: 1px solid #e3e4e5;
cursor: default;
}
.menu > li ul > li.menu-item-selected::after,
.menu > li > div ul > li.menu-item-selected::after {
content: "";
width: 1px;
height: 38px;
background-color: #fff;
float: right;
margin-right: -1px;
}
.menu > li ul > li .glyphicon,
.menu > li > div ul > li .glyphicon {
margin-right: 12px;
margin-top: -1px;
width: 16px;
height: 16px;
font-size: 16px;
}
.menu > li ul > li span,
.menu > li > div ul > li span {
vertical-align: middle;
}
.pagination {
display: inline-block;
}
.pagination > li {
display: inline;
}
.pagination > li a {
float: left;
display: block;
padding: 0;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 2px;
border: 1