diff options
45 files changed, 112 insertions, 121 deletions
diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug index 8914516..4e6838b 100644 --- a/docs/src/contents/accordions.pug +++ b/docs/src/contents/accordions.pug @@ -1,6 +1,6 @@ p Accordions are used to toggle sections of content. -.columns +.docs-demo.columns .column.col-6.col-md-12 .accordion input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="") diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug index ca93c8a..5224c45 100644 --- a/docs/src/contents/autocomplete.pug +++ b/docs/src/contents/autocomplete.pug @@ -1,7 +1,7 @@ p | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. -.columns +.docs-demo.columns .column.col-9.col-xs-12 .form-group .form-autocomplete @@ -62,7 +62,7 @@ p | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. | The autocomplete HTML structure is exampled below. -.columns +.docs-demo.columns .column.col-9.col-xs-12 .form-group .form-autocomplete.autocomplete-oneline diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug index ff8f6c6..2e9886c 100644 --- a/docs/src/contents/avatars.pug +++ b/docs/src/contents/avatars.pug @@ -1,6 +1,6 @@ p Avatars are user profile pictures. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl img(src="img/avatar-1.png" alt="Avatar XL") @@ -28,7 +28,7 @@ p | Add the #[code avatar] class and avatar size class to #{'<div>'} element. | The #[code data-initial] attribute is the name appear inside the avatar. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl img(src="img/avatar-1.png" alt="Avatar") @@ -66,7 +66,7 @@ pre.code(data-lang='HTML') <img src="img/avatar-1.png" alt="..."> </figure> -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.avatar.avatar-xl(data-initial="YZ") i.avatar-presence.online diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug index 250fb39..40b42ea 100644 --- a/docs/src/contents/badges.pug +++ b/docs/src/contents/badges.pug @@ -1,6 +1,6 @@ p Badges are often used as unread number indicators. -.columns +.docs-demo.columns .column.col-3.col-xs-6 span.badge(data-badge="") | Notifications @@ -21,7 +21,7 @@ p p | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot. -.columns +.docs-demo.columns .column.col-sm-12 button.btn.badge(data-badge="") Button button.btn.badge(data-badge="8") Button diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug index 58d7f3c..df0d17b 100644 --- a/docs/src/contents/bars.pug +++ b/docs/src/contents/bars.pug @@ -2,15 +2,13 @@ p | Bars represent the progress of a task or the value within the known range. | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements. -.columns +.docs-demo.columns .column.col-8.col-xs-12 .bar.bar-sm .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100") -.columns .column.col-8.col-xs-12 .bar .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") -.columns .column.col-8.col-xs-12 .bar .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25% @@ -42,12 +40,11 @@ pre.code(data-lang='HTML') +docs-subheading('bars-slider', 'Slider bars') -.columns +.docs-demo.columns .column.col-8.col-xs-12 .bar.bar-slider .bar-item(role="progressbar" style="width:50%;") button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider") -.columns .column.col-8.col-xs-12 .bar.bar-slider .bar-item(role="progressbar" style="width:15%;") diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug index b1b66c5..ccde5e1 100644 --- a/docs/src/contents/breadcrumbs.pug +++ b/docs/src/contents/breadcrumbs.pug @@ -1,6 +1,6 @@ p Breadcrumbs are used as navigational hierarchies to indicate current location. -.columns +.docs-demo.columns .column.col-12 ul.breadcrumb li.breadcrumb-item diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug index 8f8dbb1..3fbf5da 100644 --- a/docs/src/contents/buttons.pug +++ b/docs/src/contents/buttons.pug @@ -1,6 +1,6 @@ p Buttons include simple button styles for actions in different types and sizes. -.columns +.docs-demo.columns .column.col-12 button.btn default button button.btn.btn-primary primary button @@ -19,7 +19,7 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-colors', 'Button colors') -.columns +.docs-demo.columns .column.col-12 button.btn.btn-success success button button.btn.btn-error error button @@ -38,7 +38,7 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-sizes', 'Button sizes') -.columns +.docs-demo.columns .column.col-12 button.btn.btn-primary.btn-lg | large @@ -75,7 +75,7 @@ pre.code(data-lang='HTML') p | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB). -.columns +.docs-demo.columns .column.col-xs-12 button.btn.btn-action.btn-primary.btn-lg i.icon.icon-menu @@ -102,7 +102,7 @@ pre.code(data-lang='HTML') p | Add the #[code active] class for active button state style. -.columns +.docs-demo.columns .column.col-12 button.btn.active default active button.btn.btn-primary.active primary active @@ -111,7 +111,7 @@ p p | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style. -.columns +.docs-demo.columns .column.col-12 button.btn.disabled(tabindex="-1") default disabled button.btn.btn-primary(disabled="" tabindex="-1") primary disabled @@ -127,7 +127,7 @@ pre.code(data-lang='HTML') p | A button with the #[code loading] class can show loading indicator. -.columns +.docs-demo.columns .column.col-12 button.btn.loading default button button.btn.btn-primary.loading primary button @@ -142,24 +142,23 @@ pre.code(data-lang='HTML') +docs-subheading('buttons-groups', 'Button groups') -.columns - .column.col-md-12 +.docs-demo.columns + .column.col-6.col-md-12 .btn-group button.btn first button button.btn second button button.btn third button - .column.col-md-12 + .column.col-6.col-md-12 .btn-group.btn-group-block button.btn.btn-primary first button button.btn.btn-primary second button button.btn.btn-primary third button -.columns - .column.col-md-12 + .column.col-6.col-md-12 .btn-group button.btn.btn-sm.active first button button.btn.btn-sm second button button.btn.btn-sm third button - .column.col-md-12 + .column.col-6.col-md-12 .btn-group.btn-group-block button.btn.btn-primary.btn-sm.active first button button.btn.btn-primary.btn-sm second button diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug index 0806844..60866dd 100644 --- a/docs/src/contents/calendars.pug +++ b/docs/src/contents/calendars.pug @@ -1,7 +1,7 @@ p | Calendars are designed for date or date range picker and events display. It is made with flex layout. -.columns +.docs-demo.columns .column.col-4.col-md-12 .calendar .calendar-nav.navbar @@ -93,7 +93,7 @@ p +docs-subheading('calendars-sizes', 'Calendars sizes') -.columns +.docs-demo.columns .column.col-12 .calendar.calendar-lg .calendar-nav.navbar diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug index 4fb3671..be8d17e 100644 --- a/docs/src/contents/cards.pug +++ b/docs/src/contents/cards.pug @@ -1,6 +1,6 @@ p Cards are flexible content containers. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .card .card-image diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug index 5ce41fa..c9c0045 100644 --- a/docs/src/contents/carousels.pug +++ b/docs/src/contents/carousels.pug @@ -1,6 +1,6 @@ p Carousels are slideshows for cycling images. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-12 .carousel input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="") diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug index ff02780..7ac2a25 100644 --- a/docs/src/contents/chips.pug +++ b/docs/src/contents/chips.pug @@ -1,6 +1,6 @@ p Chips are complex entities in small blocks. -.columns +.docs-demo.columns .column.col-12 span.chip | Crime diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug index 84a86be..fad27c9 100644 --- a/docs/src/contents/colors.pug +++ b/docs/src/contents/colors.pug @@ -2,7 +2,7 @@ p Color utilities are used for changing colors for text, link and background. +docs-subheading('colors-text', 'Text colors') -.columns +.docs-demo.columns .column.col-12 p span.text-primary primary color @@ -30,7 +30,7 @@ pre.code(data-lang='HTML') <span class="text-warning">warning color</span> <span class="text-error">error color</span> -.columns +.docs-demo.columns .column.col-12 p a.text-primary.p-1(href="#colors") primary link @@ -60,7 +60,7 @@ pre.code(data-lang='HTML') +docs-subheading('colors-background', 'Background colors') -.columns +.docs-demo.columns .column.col-12 p span.bg-primary.p-1.rounded primary bg diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug index 5f6ce38..954981d 100644 --- a/docs/src/contents/comparison.pug +++ b/docs/src/contents/comparison.pug @@ -1,7 +1,7 @@ p | Comparison Sliders are sliders for comparing two images. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-12 .comparison-slider figure.comparison-before diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug index df92600..ed290b8 100644 --- a/docs/src/contents/cursor.pug +++ b/docs/src/contents/cursor.pug @@ -1,6 +1,6 @@ p Cursor utilities specify which mouse cursor to display when mouseover. -.columns +.docs-demo.columns .column.col-4 .bg-gray.docs-block.c-hand c-hand .column.col-4 diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug index e84ff11..92faa70 100644 --- a/docs/src/contents/divider.pug +++ b/docs/src/contents/divider.pug @@ -1,14 +1,16 @@ p A Divider is used for separating elements. -.columns +.docs-demo.columns .column .divider -.columns + +.docs-demo.columns .column | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. .divider.text-center(data-content="OR") | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. -.columns + +.docs-demo.columns .column form .form-group diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug index 0ac70dc..880090d 100644 --- a/docs/src/contents/empty.pug +++ b/docs/src/contents/empty.pug @@ -1,7 +1,7 @@ p | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. -.columns +.docs-demo.columns .column.col-12 .empty .empty-icon diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug index 0c61640..e2e70b3 100644 --- a/docs/src/contents/filters.pug +++ b/docs/src/contents/filters.pug @@ -1,6 +1,6 @@ p Filters are CSS only content filters. -.columns +.docs-demo.columns .column.col-12 .filter input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="") diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug index bcfde1a..75c096e 100644 --- a/docs/src/contents/forms.pug +++ b/docs/src/contents/forms.pug @@ -1,7 +1,7 @@ p | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-label(for="input-example-1") Name @@ -19,7 +19,7 @@ pre.code(data-lang='HTML') <input class="form-input" type="text" id="input-example-1" placeholder="Name"> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-label(for="input-example-3") Message @@ -34,7 +34,7 @@ pre.code(data-lang='HTML') <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group select.form-select @@ -62,7 +62,7 @@ pre.code(data-lang='HTML') </select> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 form .form-group @@ -92,7 +92,7 @@ pre.code(data-lang='HTML') </label> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-switch @@ -116,7 +116,7 @@ pre.code(data-lang='HTML') </label> </div> -.columns +.docs-demo.columns .column.col-6.col-xs-12 .form-group label.form-checkbox @@ -149,7 +149,7 @@ p | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container. | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout. -.columns +.docs-demo.columns .column.col-9.col-sm-12 form.form-horizontal(action="#forms") .form-group @@ -220,7 +220,7 @@ pre.code(data-lang='HTML') p | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements. -.columns +.docs-demo.columns .column.col-4.col-xs-12 label.form-label.label-sm Label .column.col-4.col-xs-12 @@ -231,7 +231,6 @@ p option Slack option Skype option Hipchat -.columns .column.col-4.col-xs-12 label.form-label.label-lg Label .column.col-4.col-xs-12 @@ -256,7 +255,7 @@ p | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element. | And add the icon with #[code form-icon] class next to the #{'<input>'}. -.columns +.docs-demo.columns .column.col-4.col-xs-12 .has-icon-left input.form-input.input-sm(type="text" placeholder="Name") @@ -269,7 +268,6 @@ p .has-icon-left input.form-input.input-lg(type="text" placeholder="Name") i.form-icon.icon.icon-arrow-right -.columns .column.col-4.col-xs-12 .has-icon-right input.form-input.input-sm(type="text" placeholder="Name") @@ -295,7 +293,7 @@ pre.code(data-lang='HTML') p | You can use the #[code loading] class for loading or posting state. -.columns +.docs-demo.columns .column.col-4.col-xs-12 .has-icon-right input.form-input.input-sm(type="text" placeholder="Name") @@ -320,7 +318,7 @@ pre.code(data-lang='HTML') +docs-subheading('forms-input', 'Input types') -.columns +.docs-demo.columns .column.col-9.col-sm-12 form.form-horizontal(action="#forms") .form-group @@ -371,54 +369,51 @@ pre.code(data-lang='HTML') +docs-subheading('forms-input-groups', 'Input groups') -.columns - .column.col-xs-12 +.docs-demo.columns + .column.col-6.col-xs-12 .input-group input.form-input.input-sm(type="text" placeholder="username") select.form-select.select-sm option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon.addon-sm slack.com/ input.form-input.input-sm(type="text" placeholder="site name") button.btn.btn-primary.input-group-btn.btn-sm Submit -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group input.form-input(type="text" placeholder="username") select.form-select option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon slack.com/ input.form-input(type="text" placeholder="site name") button.btn.btn-primary.input-group-btn Submit -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group label.form-switch input(type="checkbox") i.form-icon input.form-input(type="text" placeholder="name") - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group label.form-checkbox input(type="checkbox") i.form-icon input.form-input(type="text" placeholder="name") -.columns - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group input.form-input.input-lg(type="text" placeholder="username") select.form-select.select-lg option Slack option Skype option Hipchat - .column.col-xs-12 + .column.col-6.col-xs-12 .input-group span.input-group-addon.addon-lg slack.com/ input.form-input.input-lg(type="text" placeholder="site name") @@ -456,7 +451,7 @@ p | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. | Use the #[code form-input-hint] class to provide form validation success and error messages. -.columns +.docs-demo.columns .column.col-9.col-sm-12 fieldset legend Input @@ -542,7 +537,7 @@ pre.code(data-lang='HTML') p | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style. -.columns +.docs-demo.columns .column.col-6.col-xs-12 form(action="#forms") fieldset(disabled="") diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug index d0172fb..0665262 100644 --- a/docs/src/contents/grid.pug +++ b/docs/src/contents/grid.pug @@ -1,7 +1,7 @@ p | Layout includes flexbox based responsive grid system with 12 columns. -.columns +.docs-demo.columns .column .bg-primary.text-secondary.docs-block .column @@ -59,7 +59,7 @@ p p | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns. -.columns.col-gapless +.docs-demo.columns.col-gapless .column.col-6 .bg-gray.docs-block col-6 (gapless) .column.col-6 @@ -77,7 +77,7 @@ pre.code(data-lang='HTML') p | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row. -.columns.col-oneline +.docs-demo.columns.col-oneline .column.col-8 .bg-gray.docs-block col-8 .column.col-8 @@ -143,7 +143,7 @@ pre.code(data-lang='HTML') p | To nest grids, add the new #[code columns] and #[code column] structure within an existing column. -.columns +.docs-demo.columns .column.col-6 .bg-gray .docs-block col-6 diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug index 2d55412..cef66d2 100644 --- a/docs/src/contents/labels.pug +++ b/docs/src/contents/labels.pug @@ -13,7 +13,7 @@ p | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements. | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels. -.columns +.docs-demo.columns .column span.label.label-rounded.mr-1 default label span.label.label-rounded.label-primary primary label diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug index c7643b2..38a1dad 100644 --- a/docs/src/contents/loading.pug +++ b/docs/src/contents/loading.pug @@ -2,14 +2,14 @@ p | Loading indicator is used for loading or updating. | You can add the #[code loading] class to a container for loading status. -.columns +.docs-demo.columns .column.col-12.text-center .loading p | Add the #[code loading-lg] class for large size. -.columns +.docs-demo.columns .column.col-12.text-center .loading.loading-lg diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug index fcb8d36..ee78fcc 100644 --- a/docs/src/contents/media.pug +++ b/docs/src/contents/media.pug @@ -15,7 +15,7 @@ p a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped | with Build Number 16299+. -.columns +.docs-demo.columns .column.col-6.col-xs-12 figure.figure img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;") @@ -41,7 +41,7 @@ p | And the included class #[code figure-caption] will provide basic style for caption. | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment. -.columns +.docs-demo.columns .column.col-12 figure.figure img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") @@ -55,7 +55,7 @@ p | The ratio is 16:9 by default. | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio. -.columns +.docs-demo.columns .column.col-12 .video-responsive iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="") diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug index fe7825b..45ba53b 100644 --- a/docs/src/contents/menu.pug +++ b/docs/src/contents/menu.pug @@ -1,6 +1,6 @@ p Menus are vertical list of links or buttons for actions and navigation. -.columns +.docs-demo.columns .column.col-4.col-xs-12 ul.menu li.menu-item @@ -93,7 +93,7 @@ pre.code(data-lang='HTML') p The dropdown is a combination of buttons and menus. -.columns +.docs-demo.columns .column.col-xs-12 .dropdown .btn-group @@ -135,7 +135,7 @@ p p | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen. -.columns +.docs-demo.columns .column.col-xs-12.text-right .dropdown.dropdown-right a.btn.btn-primary.dropdown-toggle(tabindex="0") diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug index dd6899c..8f96070 100644 --- a/docs/src/contents/meters.pug +++ b/docs/src/contents/meters.pug @@ -1,6 +1,6 @@ p Meters represent the value within the known range. -.columns +.docs-demo.columns .column.col-3.col-xs-12 meter.meter(value="20" min="0" max="100") .column.col-3.col-xs-12 diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug index 29580c9..54a6fcd 100644 --- a/docs/src/contents/modals.pug +++ b/docs/src/contents/modals.pug @@ -1,6 +1,6 @@ p Modals are flexible dialog prompts. -.columns +.docs-demo.columns .column a.btn.btn-primary(href="#example-modal-1") Open Modal #example-modal-1.modal @@ -62,7 +62,7 @@ pre.code(data-lang='HTML') +docs-subheading('modals-sizes', 'Modal sizes') -.columns +.docs-demo.columns .column.col-6.col-xs-12 a.btn.btn-primary(href="#example-modal-2") Open small size Modal #example-modal-2.modal.modal-sm @@ -95,7 +95,7 @@ p | Use the #[code modal-sm] class for a smaller modal dialog. | The container max width is #[code 320px]. -.columns +.docs-demo.columns .column a.btn.btn-primary(href="#example-modal-3") Open large size Modal #example-modal-3.modal.modal-lg diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug index 537b6d2..f40964a 100644 --- a/docs/src/contents/nav.pug +++ b/docs/src/contents/nav.pug @@ -1,4 +1,4 @@ -.columns +.docs-demo.columns .column.col-6.col-xs-12 ul.nav li.nav-item diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug index 21d13e4..fd4ac29 100644 --- a/docs/src/contents/navbar.pug +++ b/docs/src/contents/navbar.pug @@ -1,6 +1,6 @@ p Navbar is a layout container that appears in the header of apps and websites. -.columns +.docs-demo.columns .column .navbar .navbar-section @@ -36,7 +36,7 @@ pre.code(data-lang='HTML') p | You can use #[code navbar-center] class to have a centered section. -.columns +.docs-demo.columns .column.col-12 .navbar .navbar-section diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug index 7e45132..3e24f4c 100644 --- a/docs/src/contents/off-canvas.pug +++ b/docs/src/contents/off-canvas.pug @@ -4,7 +4,7 @@ p | By default, the off-canvas menu is collapsed whenever the window width is. | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px]. -.columns +.docs-demo.columns .column .off-canvas.off-canvas-sidebar-show a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo") diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug index 83a3f92..c90f6de 100644 --- a/docs/src/contents/pagination.pug +++ b/docs/src/contents/pagination.pug @@ -1,4 +1,4 @@ -.columns +.docs-demo.columns .column.col-xs-12 ul.pagination li.page-item @@ -69,7 +69,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-12 ul.pagination li.page-item.page-prev diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug index 3651c81..fdf057e 100644 --- a/docs/src/contents/panels.pug +++ b/docs/src/contents/panels.pug @@ -1,6 +1,6 @@ p Panels are flexible view container with auto-expand content section. -.columns +.docs-demo.columns .column.col-6.col-xs-12 .panel .panel-header.text-center diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug index 88d2c17..b448b43 100644 --- a/docs/src/contents/parallax.pug +++ b/docs/src/contents/parallax.pug @@ -1,7 +1,7 @@ p | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. -.columns +.docs-demo.columns .column.col-sm-12.col-8.col-mx-auto .parallax .parallax-top-left(tabindex="1") diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug index ca81e54..b2c1b33 100644 --- a/docs/src/contents/popovers.pug +++ b/docs/src/contents/popovers.pug @@ -1,5 +1,6 @@ p Popovers are small overlay content containers. Popovers component is built entirely in CSS. -.columns + +.docs-demo.columns .column.col-3.col-sm-6 .popover a.btn.btn-primary(href="#popovers") diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug index 22a09c1..23af0af 100644 --- a/docs/src/contents/progress.pug +++ b/docs/src/contents/progress.pug @@ -1,6 +1,6 @@ p The Progress indicates the progress completion of a task. -.columns +.docs-demo.columns .column.col-3.col-xs-12 progress.progress(value="75" max="100") .column.col-3.col-xs-12 diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug index 8898958..9737755 100644 --- a/docs/src/contents/responsive.pug +++ b/docs/src/contents/responsive.pug @@ -1,6 +1,6 @@ p Spectre provides a neat responsive layout grid system and responsive visibility utilities. -.columns +.docs-demo.columns .column.col-10.col-lg-8.col-md-6.col-sm-4 .bg-gray.docs-block | col-10 @@ -68,7 +68,7 @@ pre.code(data-lang='HTML') p The responsive visibility utilities help show and hide elements on specific viewport sizes. -.columns +.docs-demo.columns .column.col-12 table.docs-table.table.table-striped.text-center thead @@ -156,7 +156,7 @@ ul li | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px]. -.columns +.docs-demo.columns .column.col-12 table.docs-table.table.table-striped.text-center thead diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug index fc07d4d..7abf513 100644 --- a/docs/src/contents/shapes.pug +++ b/docs/src/contents/shapes.pug @@ -1,6 +1,6 @@ p Shape utilities are used for change element shapes. -.columns +.docs-demo.columns .column.col-6.text-center .bg-primary.text-light.docs-shape.rounded.centered | rounded diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug index de3597b..754833c 100644 --- a/docs/src/contents/sliders.pug +++ b/docs/src/contents/sliders.pug @@ -3,7 +3,7 @@ p | You can add the class #[code tooltip] to have tooltip labels. | If no #[code data-tooltip] is set, the #[code value] will be used instead. -.columns +.docs-demo.columns .column.col-6.col-xs-12 input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);") .column.col-6.col-xs-12 diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug index 5cf8b84..0109e02 100644 --- a/docs/src/contents/steps.pug +++ b/docs/src/contents/steps.pug @@ -1,6 +1,6 @@ p Steps are progress indicators of a sequence of task steps. -.columns +.docs-demo.columns .column.col-12 ul.step li.step-item diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug index 64e4ffd..4cb996c 100644 --- a/docs/src/contents/tables.pug +++ b/docs/src/contents/tables.pug @@ -1,6 +1,6 @@ p Tables include default styles for tables and data sets. -.columns +.docs-demo.columns .column.col-12 table.table.table-striped thead diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug index f89005d..fea99ad 100644 --- a/docs/src/contents/tabs.pug +++ b/docs/src/contents/tabs.pug @@ -1,6 +1,6 @@ p Tabs enable quick switch between different views. -.columns +.docs-demo.columns .column.col-6.col-sm-12 ul.tab li.tab-item.active @@ -51,7 +51,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-sm-12 ul.tab li.tab-item.active @@ -89,7 +89,7 @@ pre.code(data-lang='HTML') </li> </ul> -.columns +.docs-demo.columns .column.col-12 ul.tab li.tab-item.active diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug index e1e7379..cd8b994 100644 --- a/docs/src/contents/tiles.pug +++ b/docs/src/contents/tiles.pug @@ -1,6 +1,6 @@ p Tiles are repeatable or embeddable information blocks. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .tile .tile-icon @@ -58,7 +58,7 @@ p | Add the #[code tile-centered] class to the container #[code tile]. | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. -.columns +.docs-demo.columns .column.col-6.col-md-9.col-xs-12 .tile.tile-centered .tile-icon diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug index 1badfdf..c654c9e 100644 --- a/docs/src/contents/timelines.pug +++ b/docs/src/contents/timelines.pug @@ -1,6 +1,6 @@ p Timelines are ordered sequences of activities. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .timeline #timeline-example-1.timeline-item diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug index cf4c31a..e35e4dd 100644 --- a/docs/src/contents/toasts.pug +++ b/docs/src/contents/toasts.pug @@ -1,6 +1,6 @@ p Toasts are used to show alert or information to users. -.columns +.docs-demo.columns .column.col-9.col-sm-12 .toast button.btn.btn-clear.float-right @@ -23,7 +23,7 @@ pre.code(data-lang='HTML') Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> -.columns +.docs-demo.columns .column.col-sm-12 .toast.toast-success button.btn.btn-clear.float-right diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug index bda259a..08906e6 100644 --- a/docs/src/contents/tooltips.pug +++ b/docs/src/contents/tooltips.pug @@ -1,6 +1,6 @@ p Tooltips provide context information labels that appear on hover and focus. -.columns.text-center +.docs-demo.columns.text-center .column.col-xs-12 button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip .column.col-xs-12 diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug index 28ffc17..876a956 100644 --- a/docs/src/contents/typography.pug +++ b/docs/src/contents/typography.pug @@ -3,7 +3,7 @@ p +docs-subheading('typography-headings', 'Headings') -.columns +.docs-demo.columns .column.col-12 h1 | H1 Heading @@ -54,7 +54,7 @@ pre.code(data-lang='HTML') +docs-subheading('typography-semantic-text', 'Semantic text elements') -.columns +.docs-demo.columns .column.col-6.col-xs-12 abbr(title='Internationalization') I18N code.ml-2 abbr @@ -206,7 +206,7 @@ pre.code(data-lang='HTML') +docs-subheading('typography-lists', 'Lists') -.columns +.docs-demo.columns .column.col-4.col-xs-12 ul.list li list item 1 diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss index e17f832..8887d4d 100644 --- a/docs/src/scss/docs.scss +++ b/docs/src/scss/docs.scss @@ -151,8 +151,9 @@ } } - .docs-note { - margin: 1.5rem 0; + .docs-demo { + padding-bottom: 1rem; + padding-top: 1rem; } .docs-ad { @@ -195,10 +196,6 @@ font-size: $font-size-sm; } - .columns { - margin-bottom: 1rem; - } - .column { padding: $layout-spacing; } |