Helpers

Align

用於文字或是 inline 元素對齊。

Class 名稱 CSS 內容
.align-left text-align: left;
.align-center text-align: center;
.align-right text-align: right;
.align-top vertical-align: top;
.align-middle vertical-align: middle;
.align-bottom vertical-align: bottom;
.align-baseline vertical-align: baseline;

Float & Clear

Class 名稱 CSS 內容
.pull-left float: left !important;
.pull-right float: right !important;
.clear clear: both !important;
.clearfix
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

Show / Hide

Class 名稱 CSS 內容
.show / .block
.show,
.block {
    display: block !important;
}

table.show {
    display: table !important;
}

tr.show {
    display: table-row !important;
}

th.show,
th.show {
    display: table-cell !important;
}
.hide, [hidden] display: none !important;
.inline display: inline-block !important;

Visibility

Class 名稱 CSS 內容
.visible visibility: visible !important;
.invisible visibility: hidden !important;

Disabled

Class 名稱 CSS 內容
.disabled, [disabled]
pointer-events: none;
opacity: .5;
color: grey;
cursor: not-allowed;

Overflow

Class 名稱 CSS 內容
.overflow-auto overflow: auto;

Empty

當沒有資料時就不顯示,可以使用 .empty-hide,如果是沒有資料需要顯示提示或說明,可以使用 .empty-tip

Class 名稱 CSS 內容
.empty-hide
:empty {
    clear: both;
    display: none !important;
}
.empty-tip
padding: 100px 20px;
text-align: center;
color: grey;
background-color: #e6e6e6;

Text

Class 名稱 CSS 內容
.text-primary color: #45a7b9;
.text-secondary color: #55b3e9;
.text-focus color: #f45b8a;
.text-common color: #374e52;
.text-success color: #82ba29;
.text-warning color: #f38b2e;
.text-error color: #d63a2b;
.text-muted color: #b3b3b3;
.text-note
font-size: 14px;
font-size: .875rem;
color: grey;
.text-indent text-indent: 1em;
.text-ellipsis
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

background

使用 .bg-* 時,文字顏色會改為白色。

Class 名稱 CSS 內容
.bg-primary background-color: #45a7b9;
.bg-secondary background-color: #55b3e9;
.bg-focus background-color: #f45b8a;
.bg-common background-color: #374e52;
.bg-success background-color: #82ba29;
.bg-warning background-color: #f38b2e;
.bg-error background-color: #d63a2b;

Overlay / Close

Class 名稱 CSS 內容
.overlay
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
.close
.close {
    float: right;
    line-height: 1;
    text-align: center;
    .font-size(xl);
    font-weight: bold;
    color: inherit;
    opacity: 0.4;
}

.close:hover {
    opacity: 0.8;
    }

Image

Class 名稱 CSS 內容
img.fixed-img-portrait
max-width: none;
max-height: none;
width: auto;
height: 100%;

Transition

Class 名稱 CSS 內容
.transition
-webkit-transition: 0.2s ease;
transition: 0.2s ease;