Previous
-Next
-There is compact version of Tiles component, which is often used as contact and file info blocks.
Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.
Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the loading class can show loading indicator.
Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.
<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
-<!-- a button with loading state -->
-<button class="btn loading">button</button>
-Add the disabled class or the disabled attribute for a disabled button.
A button with the loading class can show loading indicator.
Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.
Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
+<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
-<button class="btn btn-block">block button</button>
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
-<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+<!-- a button with loading state -->
+<button class="btn loading">button</button>
+ Button sizes
Korean
+
+ Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.
+
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+
+
+ Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
Button groups
Korean
You can use :indeterminate pseudo class for indeterminate state of checkboxes.
+
+
+ Horizontal forms
If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] class to the child elements for form row layout.
@@ -1415,6 +1439,9 @@ Korean
Media
Media includes responsive images, figures and video classes.
+
+ Images
Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
@@ -1464,6 +1491,7 @@ Korean
</figure>
+ Video
For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
diff --git a/src/accordions.less b/src/accordions.less
index edbf64865..d375b3a08 100644
--- a/src/accordions.less
+++ b/src/accordions.less
@@ -17,7 +17,6 @@
}
.accordion-header {
- background: @bg-color;
display: block;
padding: 1rem;
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 4d835e7bb..b6ef95c26 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
position: relative;
.menu {
- animation: slide-down .2s ease 1;
+ animation: slide-down .15s ease 1;
display: none;
left: 0;
position: absolute;
diff --git a/src/empty.less b/src/empty.less
index 295758c39..07d62c55a 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -6,6 +6,10 @@
text-align: center;
padding: 4 * @layout-padding;
+ .empty-icon {
+ margin-bottom: 1.5rem;
+ }
+
.empty-title,
.empty-subtitle {
margin: 1rem auto;
diff --git a/src/mixins.less b/src/mixins.less
index 6b80cffda..f1d9c447c 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -9,7 +9,7 @@
// Component focus shadow
.control-shadow(@color: @dark-color) {
- box-shadow: 0 0 0 .2rem fade(@color, 15%);
+ box-shadow: 0 0 0 .2rem fade(@color, 10%);
}
// Component transition
diff --git a/src/toasts.less b/src/toasts.less
index ac7c4a468..8fe8388c2 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -34,4 +34,8 @@
opacity: .75;
}
}
+
+ .btn-clear {
+ margin: .2rem -.2rem .2rem .4rem;
+ }
}
diff --git a/src/typography.less b/src/typography.less
index a6843a990..567eec0d0 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -1,4 +1,5 @@
// Typography
+// Headings
h1,
h2,
h3,
@@ -29,15 +30,37 @@ h5 {
h6 {
font-size: 1.6rem;
}
+
+// Paragraphs
p {
line-height: 2.4rem;
margin: 0 0 1rem;
}
+
+// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
+
+abbr[title] {
+ border-bottom: .1rem dotted;
+ cursor: help;
+ text-decoration: none;
+}
+
+kbd {
+ .label-base();
+ .label-variant(@light-color, @dark-color);
+}
+
+mark {
+ .label-base();
+ .label-variant(@body-font-color, @highlight-color);
+}
+
+// Blockquote
blockquote {
border-left: .2rem solid @border-color;
margin-left: 0;
@@ -51,6 +74,8 @@ blockquote {
color: @gray-color;
}
}
+
+// Lists
ul,
ol {
margin: 2rem 0 2rem 2rem;
@@ -65,6 +90,7 @@ ol {
margin-top: 1rem;
}
}
+
ul {
list-style: disc inside;
@@ -72,6 +98,7 @@ ul {
list-style-type: circle;
}
}
+
ol {
list-style: decimal inside;
@@ -79,6 +106,7 @@ ol {
list-style-type: lower-alpha;
}
}
+
dl {
dt {
font-weight: bold;
@@ -87,16 +115,3 @@ dl {
margin: .5rem 0 1.5rem 0;
}
}
-mark {
- .label-base();
- .label-variant(@body-font-color, @highlight-color);
-}
-kbd {
- .label-base();
- .label-variant(@light-color, @dark-color);
-}
-abbr[title] {
- border-bottom: .1rem dotted;
- cursor: help;
- text-decoration: none;
-}