Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted.
Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled to the page-item to have unclickable page links.
Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
@@ -283,7 +283,7 @@<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
你好, こんにちは, 안녕하세요
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- Bill Gates @@ -410,7 +410,7 @@Korean
</blockquote> -+ Lists
Lists
@@ -474,7 +474,7 @@
Korean
-+ #Tables
#Tables
@@ -536,7 +536,7 @@Tables include default styles for tables and data sets.
Korean
-+ #Buttons
#Buttons
@@ -601,7 +601,7 @@Buttons include simple button styles for actions in different types and sizes.
Korean
<button class="btn loading">button</button> -+ Button sizes
Button sizes
@@ -649,7 +649,7 @@Korean
<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button> -+ Button groups
Button groups
-@@ -697,7 +697,7 @@Korean
--+ #Forms
#Forms
@@ -809,7 +809,7 @@Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
Korean
You can use
:indeterminatepseudo class for indeterminate state of checkboxes.+ Horizontal forms
Horizontal forms
@@ -908,7 +908,7 @@If you want to have a horizontal form, add the
form-horizontalclass to the <form> container. And add thecol-[1-12]class to the child elements for form row layout.Korean
</form> -+ Form sizes
Form sizes
@@ -945,7 +945,7 @@For smaller or larger input and select controls, you could add the
input-sm/input-lg,select-sm/select-lgandlabel-sm/label-lgclasses to the elements.Korean
+ Form icons
Form icons
@@ -1030,7 +1030,7 @@Add a wrapper with the
has-icon-left/has-icon-rightclass to <input> element. And add the icon withform-iconclass next to the <input>.Korean
</div> -+ Input types
Input types
-+ Input groups
Input groups
@@ -1193,7 +1193,7 @@Korean
</div> -+ Form validation styles
Form validation styles
@@ -1292,7 +1292,7 @@To use form validation styles, add
is-successoris-errorclass to the controls or addhas-successorhas-errorclass to parent elements. You can use theform-input-hintclass to provide form validation success and error messages.Korean
</form> -+ Form disabled styles
Form disabled styles
@@ -1346,11 +1346,11 @@Add the
disabledattribute to the element or <fieldset> for a disabled form components style.Korean
-+ #Icons experimental
#Icons experimental
-Icons are single-element, responsive and pure CSS icons. You can include
spectre-icons.csslocated in thedistfolder to your web <head> to have these CSS icons.+ Navigation
Navigation
-+ Action
Action
-+ Object
Object
-+ #Labels
#Labels
@@ -1620,7 +1620,7 @@Labels are formatted text tags for highlighted, informative information.
Korean
-+ #Codes
#Codes
Codes are inline and multiline code snippets.
For inline code, you can use the element
@@ -1643,11 +1643,11 @@<code>. For multiline code snippet blocks, you can use <pre> with thecodeclass as a container, and add <code> inside it. Thedata-langattribute is rendered as the language name in the top right.Korean
-+ #Media
#Media
-Media includes responsive images, figures and video classes.
+ Images
Images
@@ -1698,7 +1698,7 @@Add the
img-responsiveclass to <img> elements. The images will scale with the parent sizes.Korean
</figure> -+ Video
Video
@@ -1741,9 +1741,7 @@For responsive video, add a container with the
video-responsiveclass. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may addvideo-responsive-4-3for 4:3 ratio video container orvideo-responsive-1-1for 1:1 ratio.Layout
diff --git a/docs/experimentals.html b/docs/experimentals.html index c67d75754..84c9365ce 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -255,14 +255,14 @@--+ #Experimentals
#Experimentals
The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside
spectre-exp.lessbefore browsers fully support them. Sometimes, there are some specific browsers targeted components.+ Calendars large
Calendars large
@@ -425,7 +425,7 @@-+ #Carousels
#Carousels
@@ -490,7 +490,7 @@Carousels are slideshows for cycling images. It is built in pure CSS.
-+ #Comparison Sliders
#Comparison Sliders
@@ -528,7 +528,7 @@Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
-+ #Parallax
#Parallax
@@ -731,7 +731,7 @@The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
tvOS parallax demo
-+ #Progress
#Progress
@@ -758,7 +758,7 @@The Progress indicates the progress completion of a task.
tvOS parallax demo
-+ #Sliders
#Sliders
@@ -778,7 +778,7 @@Sliders are for selecting values from ranges.
tvOS parallax demo
-+ #Timelines
#Timelines
@@ -888,9 +888,7 @@Timelines are ordered sequences of activities.
Utilities
diff --git a/docs/index.html b/docs/index.html index 11da7d6c0..cc806a27b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -593,9 +593,7 @@Elements
diff --git a/docs/layout.html b/docs/layout.html index c90809a6e..1b224b51d 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -254,7 +254,7 @@-+ #Flexbox grid
#Flexbox grid
@@ -364,7 +364,7 @@Layout includes flexbox based responsive grid system with 12 columns.
-+ #Responsive grid
#Responsive grid
@@ -410,7 +410,7 @@ </div> -Spectre provides a neat responsive layout grid system and responsive visibility utilities.
+ Responsive container
Responsive container
@@ -423,7 +423,7 @@ </div> -The responsive layout also provides fixed-width containers. Use
grid-480,grid-960orgrid-1280tocontainerfor a fixed-width container with the specific max-width.+ Responsive visibility
Responsive visibility
@@ -563,7 +563,7 @@The responsive visibility utilities help show and hide elements on specific viewport sizes.
-+ #Navbar
#Navbar
@@ -644,7 +644,7 @@Navbar is a layout container that appears in the header of apps and websites.
-+ #Panels
#Panels
@@ -805,7 +805,7 @@Panels are flexible view container layout with auto-expand content section.
-+ #Empty states / blank slates
#Empty states / blank slates
@@ -894,9 +894,7 @@Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
Components
diff --git a/docs/src/docs.less b/docs/src/docs.less index c7217db9f..c01aba385 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -26,7 +26,7 @@ .section-footer { color: @gray-color; - padding: 25px 15px 10px 15px; + padding: 26px 15px 10px 15px; position: relative; z-index: 200; @@ -107,17 +107,20 @@ } .docs-content { + padding-bottom: 50px; padding-top: 0; .container { padding: 10px; - } - header { - padding-top: 55px; + & > h3, + & > h4 { + padding-top: 55px; + } } .anchor { + color: @primary-color-light; height: 0; margin-left: -1em; overflow: hidden; @@ -270,12 +273,12 @@ } .docs-sidebar { - padding: 70px 10px 50px 10px; + padding: 70px 10px 70px 10px; position: relative; .docs-nav { bottom: 50px; - height: ~"calc(100vh - 120px)"; + height: ~"calc(100vh - 140px)"; overflow-y: auto; position: fixed; top: 90px; diff --git a/docs/utilities.html b/docs/utilities.html index d88aea825..943f4bc7e 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -254,11 +254,11 @@-+ #Color utilities
#Color utilities
-Color utilities are used for changing colors for text, link and background.
+ Text colors
Text colors
primary color @@ -303,7 +303,7 @@ <a class="text-error" href="#">error color</a> -
+ Background colors
Background colors
primary bg @@ -329,7 +329,7 @@
-+ #Display utilities
#Display utilities
@@ -360,7 +360,7 @@Display utilities are used for display and hidden things.
-+ #Loading
#Loading
@@ -450,7 +450,7 @@Loading indicator is used for loading or updating. Also, you can add the
loadingclass to buttons for loading status.-+ #Position utilities
#Position utilities
@@ -484,7 +484,7 @@Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.