testio-tailwind 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.circleci/config.yml +217 -0
- package/.dockerignore +4 -0
- package/.eleventy.js +57 -57
- package/Dockerfile +27 -0
- package/LICENSE +21 -21
- package/README.md +43 -43
- package/icon-classes-extractor.js +29 -29
- package/index.html +399 -478
- package/package.json +66 -66
- package/src/_data/navigation.json +44 -44
- package/src/_data/site.js +12 -12
- package/src/_includes/card_popover.haml +7 -7
- package/src/_includes/example-header-customer.pug +99 -99
- package/src/_includes/example-header-manager.njk +53 -53
- package/src/_includes/example-header-tester.njk +99 -99
- package/src/_includes/example-header.njk +50 -50
- package/src/_includes/page-with-sidebar-nocode.njk +46 -46
- package/src/_includes/page-with-sidebar.njk +46 -46
- package/src/_includes/page.njk +38 -38
- package/src/_layouts/base.njk +83 -83
- package/src/_layouts/email-template.njk +90 -90
- package/src/_layouts/page-example-customer.njk +74 -74
- package/src/_layouts/page-example-manager.njk +74 -74
- package/src/_layouts/page-example-tester.njk +75 -75
- package/src/_layouts/page-example.njk +83 -83
- package/src/assets/images/Cirro-App-Defaultimage.svg +25 -25
- package/src/assets/images/arrow-down.svg +13 -13
- package/src/assets/images/arrow-left.svg +13 -13
- package/src/assets/images/arrow-right.svg +13 -13
- package/src/assets/images/arrow-thick-left.svg +13 -13
- package/src/assets/images/arrow-thick-right.svg +13 -13
- package/src/assets/images/arrow-up.svg +13 -13
- package/src/assets/images/at-sign.svg +12 -12
- package/src/assets/images/attachment-fallbackimage.svg +19 -19
- package/src/assets/images/attachment.svg +8 -8
- package/src/assets/images/bell-smile-xl.svg +18 -18
- package/src/assets/images/blocked.svg +7 -7
- package/src/assets/images/bug-chat-xl.svg +15 -15
- package/src/assets/images/bug-deceased-xl.svg +15 -15
- package/src/assets/images/bug-reproduction.svg +14 -14
- package/src/assets/images/bug-sad-xl.svg +13 -13
- package/src/assets/images/bug-search-xl.svg +18 -18
- package/src/assets/images/bug-sleeping-xl.svg +14 -14
- package/src/assets/images/bug-smile-xl.svg +9 -9
- package/src/assets/images/calendar.svg +15 -15
- package/src/assets/images/caret-down-centered.svg +6 -6
- package/src/assets/images/caret-down.svg +11 -11
- package/src/assets/images/caret-left-centered.svg +6 -6
- package/src/assets/images/caret-left.svg +6 -6
- package/src/assets/images/caret-right-centered.svg +6 -6
- package/src/assets/images/caret-right.svg +6 -6
- package/src/assets/images/caret-up-centered.svg +6 -6
- package/src/assets/images/caret-up.svg +11 -11
- package/src/assets/images/check-circle-filled-white.svg +9 -9
- package/src/assets/images/check-circle-filled.svg +12 -12
- package/src/assets/images/check-circle.svg +7 -7
- package/src/assets/images/check-selectable-items.svg +11 -11
- package/src/assets/images/check-thick-outline.svg +11 -11
- package/src/assets/images/check-thick.svg +6 -6
- package/src/assets/images/check.svg +17 -17
- package/src/assets/images/checkbox-background-black.svg +6 -6
- package/src/assets/images/checkbox-background-sm.svg +12 -12
- package/src/assets/images/checkbox-background-white.svg +6 -6
- package/src/assets/images/checkbox-background.svg +6 -6
- package/src/assets/images/checkbox-sm-checked.svg +11 -11
- package/src/assets/images/circle-empty-white.svg +6 -6
- package/src/assets/images/circle-sm-filled.svg +6 -6
- package/src/assets/images/clock.svg +12 -12
- package/src/assets/images/cross-circle-filled.svg +6 -6
- package/src/assets/images/cross-circle.svg +7 -7
- package/src/assets/images/cross-thick.svg +15 -15
- package/src/assets/images/cross.svg +7 -7
- package/src/assets/images/exclamation-circle-filled.svg +11 -11
- package/src/assets/images/exclamation-circle.svg +12 -12
- package/src/assets/images/feature-check.svg +9 -9
- package/src/assets/images/feature-cross.svg +10 -10
- package/src/assets/images/feature-draft.svg +14 -14
- package/src/assets/images/feature.svg +8 -8
- package/src/assets/images/file-image-plus-lg.svg +19 -19
- package/src/assets/images/file-image-plus-xl.svg +20 -20
- package/src/assets/images/format-bold.svg +11 -11
- package/src/assets/images/format-code.svg +12 -12
- package/src/assets/images/format-heading.svg +11 -11
- package/src/assets/images/format-indent-decrease.svg +11 -11
- package/src/assets/images/format-indent-increase.svg +11 -11
- package/src/assets/images/format-italic.svg +11 -11
- package/src/assets/images/format-link.svg +11 -11
- package/src/assets/images/format-list-bulleted.svg +17 -17
- package/src/assets/images/format-list-numbered.svg +17 -17
- package/src/assets/images/format-mark.svg +13 -13
- package/src/assets/images/format-quote.svg +17 -17
- package/src/assets/images/format-strikethrough.svg +11 -11
- package/src/assets/images/forward.svg +11 -11
- package/src/assets/images/google_signin.svg +22 -22
- package/src/assets/images/info-circle-cirro.svg +21 -21
- package/src/assets/images/info-circle-ux.svg +21 -21
- package/src/assets/images/lock.svg +15 -15
- package/src/assets/images/logo-mobile-cloud.svg +12 -12
- package/src/assets/images/logo-testio/testio_horizontal_black.svg +14 -14
- package/src/assets/images/logo-testio/testio_horizontal_icon_black.svg +25 -25
- package/src/assets/images/logo-testio/testio_horizontal_icon_purple_black.svg +27 -27
- package/src/assets/images/logo-testio/testio_horizontal_icon_purple_white.svg +25 -25
- package/src/assets/images/logo-testio/testio_horizontal_icon_white.svg +25 -25
- package/src/assets/images/logo-testio/testio_horizontal_purple_black.svg +9 -9
- package/src/assets/images/logo-testio/testio_horizontal_purple_white.svg +14 -14
- package/src/assets/images/logo-testio/testio_horizontal_purpleteal_black.svg +21 -21
- package/src/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg +19 -19
- package/src/assets/images/logo-testio/testio_horizontal_teal_black.svg +14 -14
- package/src/assets/images/logo-testio/testio_horizontal_teal_white.svg +14 -14
- package/src/assets/images/logo-testio/testio_horizontal_tealpurple_black.svg +21 -21
- package/src/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg +21 -21
- package/src/assets/images/logo-testio/testio_horizontal_white.svg +14 -14
- package/src/assets/images/logo-testio/testio_symbol_black_round.svg +11 -11
- package/src/assets/images/logo-testio/testio_symbol_purple.svg +15 -15
- package/src/assets/images/logo-testio/testio_symbol_purpleteal_round.svg +18 -18
- package/src/assets/images/logo-testio/testio_symbol_purpleteal_square.svg +18 -18
- package/src/assets/images/logo-testio/testio_symbol_teal.svg +15 -15
- package/src/assets/images/logo-testio/testio_symbol_tealpurple_round.svg +18 -18
- package/src/assets/images/logo-testio/testio_symbol_tealpurple_square.svg +18 -18
- package/src/assets/images/logo-testio/testio_symbol_white_round.svg +11 -11
- package/src/assets/images/logo-testio/testio_typo_black.svg +11 -11
- package/src/assets/images/logo-testio/testio_typo_white.svg +11 -11
- package/src/assets/images/logo-testio/testio_vertical_purpleteal_black.svg +19 -19
- package/src/assets/images/logo-testio/testio_vertical_purpleteal_white.svg +19 -19
- package/src/assets/images/logo-testio/testio_vertical_tealpurple_black.svg +19 -19
- package/src/assets/images/logo-testio/testio_vertical_tealpurple_white.svg +19 -19
- package/src/assets/images/message-feedback.svg +10 -10
- package/src/assets/images/message-question-filled.svg +6 -6
- package/src/assets/images/message-question.svg +8 -8
- package/src/assets/images/message.svg +11 -11
- package/src/assets/images/question-circle.svg +24 -24
- package/src/assets/images/radio-checked-black.svg +5 -5
- package/src/assets/images/redo.svg +7 -7
- package/src/assets/images/remove.svg +6 -6
- package/src/assets/images/search.svg +11 -11
- package/src/assets/images/seat.svg +14 -14
- package/src/assets/images/section.svg +8 -8
- package/src/assets/images/sendmessage.svg +15 -15
- package/src/assets/images/speaker.svg +10 -10
- package/src/assets/images/test-archived.svg +12 -12
- package/src/assets/images/test-automation.svg +8 -8
- package/src/assets/images/test-check.svg +9 -9
- package/src/assets/images/test-ended.svg +9 -9
- package/src/assets/images/test-failed.svg +10 -10
- package/src/assets/images/test-initialized.svg +10 -10
- package/src/assets/images/test-locked.svg +15 -15
- package/src/assets/images/test-plus.svg +11 -11
- package/src/assets/images/test-promoted.svg +9 -9
- package/src/assets/images/test-running.svg +9 -9
- package/src/assets/images/test-stopped.svg +17 -17
- package/src/assets/images/test.svg +8 -8
- package/src/assets/images/testcase.svg +10 -10
- package/src/assets/images/triangle-centered-down.svg +12 -12
- package/src/assets/images/triangle-centered-left.svg +12 -12
- package/src/assets/images/triangle-centered-right.svg +12 -12
- package/src/assets/images/triangle-centered-up.svg +12 -12
- package/src/assets/images/triangle-down.svg +5 -5
- package/src/assets/images/triangle-up.svg +5 -5
- package/src/assets/images/undo.svg +7 -7
- package/src/assets/images/verify-exclamation.svg +11 -11
- package/src/assets/scripts/app.js +150 -150
- package/src/assets/scripts/modules/colors.js +10 -10
- package/src/assets/scripts/modules/echarts_area.js +94 -94
- package/src/assets/scripts/modules/echarts_donut.js +85 -85
- package/src/assets/scripts/modules/echarts_exampledata.js +105 -105
- package/src/assets/scripts/modules/echarts_exampleseries.js +146 -146
- package/src/assets/scripts/modules/echarts_gauge.js +74 -74
- package/src/assets/scripts/modules/echarts_horizontal.js +80 -80
- package/src/assets/scripts/modules/echarts_legend.js +12 -12
- package/src/assets/scripts/modules/echarts_vertical.js +80 -80
- package/src/assets/stylesheets/app.css +77 -77
- package/src/assets/stylesheets/components/actionbar.css +41 -41
- package/src/assets/stylesheets/components/alerts.css +50 -50
- package/src/assets/stylesheets/components/banner_card.css +56 -56
- package/src/assets/stylesheets/components/buttons.css +192 -192
- package/src/assets/stylesheets/components/cards.css +148 -148
- package/src/assets/stylesheets/components/chat.css +265 -265
- package/src/assets/stylesheets/components/checkboxes_radiobuttons.css +173 -173
- package/src/assets/stylesheets/components/customer/customer_header.css +97 -97
- package/src/assets/stylesheets/components/customer/customer_productcards.css +212 -212
- package/src/assets/stylesheets/components/customer/customer_sidebar.css +76 -76
- package/src/assets/stylesheets/components/devices.css +77 -77
- package/src/assets/stylesheets/components/drawer.css +99 -99
- package/src/assets/stylesheets/components/dropdown.css +92 -92
- package/src/assets/stylesheets/components/emptystate_message.css +41 -41
- package/src/assets/stylesheets/components/form_card.css +20 -20
- package/src/assets/stylesheets/components/form_grid.css +11 -11
- package/src/assets/stylesheets/components/forms.css +106 -106
- package/src/assets/stylesheets/components/header.css +220 -220
- package/src/assets/stylesheets/components/iconfont.css +3303 -3303
- package/src/assets/stylesheets/components/icons.css +142 -142
- package/src/assets/stylesheets/components/images.css +27 -27
- package/src/assets/stylesheets/components/layout.css +37 -82
- package/src/assets/stylesheets/components/list_item.css +285 -285
- package/src/assets/stylesheets/components/lists.css +67 -67
- package/src/assets/stylesheets/components/loading_spinner.css +104 -104
- package/src/assets/stylesheets/components/manager/manager_header.css +50 -50
- package/src/assets/stylesheets/components/manager/manager_sidebar.css +76 -76
- package/src/assets/stylesheets/components/markdown_trix_styles.css +200 -200
- package/src/assets/stylesheets/components/metasidebar.css +56 -56
- package/src/assets/stylesheets/components/metrics.css +12 -12
- package/src/assets/stylesheets/components/modals.css +105 -105
- package/src/assets/stylesheets/components/notifications.css +154 -154
- package/src/assets/stylesheets/components/popover.css +120 -120
- package/src/assets/stylesheets/components/progress.css +69 -69
- package/src/assets/stylesheets/components/radio_tabs.css +59 -59
- package/src/assets/stylesheets/components/reset.css +26 -26
- package/src/assets/stylesheets/components/resultmodule.css +132 -132
- package/src/assets/stylesheets/components/search.css +110 -110
- package/src/assets/stylesheets/components/sections.css +97 -96
- package/src/assets/stylesheets/components/select.css +50 -50
- package/src/assets/stylesheets/components/select2.css +252 -252
- package/src/assets/stylesheets/components/selectable_token.css +223 -223
- package/src/assets/stylesheets/components/sidebar.css +480 -480
- package/src/assets/stylesheets/components/splitview.css +307 -307
- package/src/assets/stylesheets/components/tables.css +108 -108
- package/src/assets/stylesheets/components/tabs.css +121 -121
- package/src/assets/stylesheets/components/tags.css +28 -28
- package/src/assets/stylesheets/components/task_issue_item.css +78 -78
- package/src/assets/stylesheets/components/test_header.css +167 -167
- package/src/assets/stylesheets/components/test_item.css +89 -89
- package/src/assets/stylesheets/components/tester/tester_cards.css +143 -143
- package/src/assets/stylesheets/components/tester/tester_header.css +37 -37
- package/src/assets/stylesheets/components/tester/tester_sidebar.css +92 -92
- package/src/assets/stylesheets/components/toggleswitch.css +118 -118
- package/src/assets/stylesheets/components/tom_select.css +186 -186
- package/src/assets/stylesheets/components/trix_editor.css +174 -174
- package/src/assets/stylesheets/components/typography.css +81 -81
- package/src/assets/stylesheets/components/uploads.css +194 -194
- package/src/assets/stylesheets/components/user_item.css +57 -57
- package/src/assets/stylesheets/designsystem-styles.css +81 -81
- package/src/assets/stylesheets/postcss.config.js +16 -16
- package/src/assets/stylesheets/tailwind.config.js +331 -331
- package/src/humans.txt.njk +10 -10
- package/src/index.pug +16 -16
- package/src/pages/buttons/block.haml +39 -39
- package/src/pages/buttons/buttons-lg.haml +20 -20
- package/src/pages/buttons/buttons-sm.haml +41 -41
- package/src/pages/buttons/buttons-xl.haml +23 -23
- package/src/pages/buttons/buttons.haml +58 -58
- package/src/pages/buttons/buttons_input.haml +39 -39
- package/src/pages/buttons/dropdown-menu.haml +73 -73
- package/src/pages/buttons/index.njk +7 -7
- package/src/pages/buttons/info_popover.haml +32 -32
- package/src/pages/buttons/link-with-icon.haml +13 -13
- package/src/pages/buttons/square-buttons.haml +55 -55
- package/src/pages/charts/area.haml +215 -215
- package/src/pages/charts/bar_horizontal.haml +335 -335
- package/src/pages/charts/bar_vertical.haml +391 -391
- package/src/pages/charts/donut.haml +269 -269
- package/src/pages/charts/gauge.haml +214 -214
- package/src/pages/charts/index.njk +6 -6
- package/src/pages/ci.pug +8 -8
- package/src/pages/colors.pug +147 -147
- package/src/pages/components/alerts.haml +31 -31
- package/src/pages/components/banner_cards.haml +45 -45
- package/src/pages/components/cards.haml +111 -111
- package/src/pages/components/cards_customer.haml +487 -487
- package/src/pages/components/cards_fixedwidth.haml +135 -135
- package/src/pages/components/cards_iconheader.haml +57 -57
- package/src/pages/components/cards_tester.haml +159 -159
- package/src/pages/components/chat_window.haml +240 -240
- package/src/pages/components/comments_bug_preview.haml +29 -29
- package/src/pages/components/comments_chatmessages.haml +229 -229
- package/src/pages/components/descriptionlist.haml +47 -47
- package/src/pages/components/devices.haml +115 -115
- package/src/pages/components/drawer.haml +49 -49
- package/src/pages/components/drawer_filter.haml +76 -76
- package/src/pages/components/emptystate.haml +15 -15
- package/src/pages/components/index.njk +6 -6
- package/src/pages/components/issue-item.haml +18 -18
- package/src/pages/components/listitem_with_footer.haml +208 -208
- package/src/pages/components/listitems.haml +136 -136
- package/src/pages/components/listitems_badge.haml +36 -36
- package/src/pages/components/listitems_collapsable.haml +117 -117
- package/src/pages/components/listitems_nested.haml +50 -50
- package/src/pages/components/listitems_selectable.haml +59 -59
- package/src/pages/components/listitems_white.haml +82 -82
- package/src/pages/components/loading_spinner.haml +11 -11
- package/src/pages/components/metasidebar.haml +13 -13
- package/src/pages/components/modal_details.haml +68 -68
- package/src/pages/components/notification_center.haml +48 -48
- package/src/pages/components/notifications.haml +42 -42
- package/src/pages/components/profilethumb.haml +27 -27
- package/src/pages/components/progress.haml +23 -23
- package/src/pages/components/resultmodule.haml +150 -150
- package/src/pages/components/resultmodule_testcase.haml +125 -125
- package/src/pages/components/section_collapsable.haml +24 -24
- package/src/pages/components/splitview_item.haml +111 -111
- package/src/pages/components/splitview_item_collapsable.haml +65 -65
- package/src/pages/components/tables.haml +57 -57
- package/src/pages/components/tables_linked.haml +29 -29
- package/src/pages/components/tags.haml +12 -12
- package/src/pages/components/task_item.haml +33 -33
- package/src/pages/components/test_item.haml +119 -119
- package/src/pages/components/tester_levels.haml +70 -70
- package/src/pages/components/user_item.haml +49 -49
- package/src/pages/examples/layout-actionbar.haml +267 -267
- package/src/pages/examples/layout-basic.haml +28 -28
- package/src/pages/examples/layout-chat.haml +327 -327
- package/src/pages/examples/layout-customer.haml +189 -189
- package/src/pages/examples/layout-form-sidebar-actionbar-metasidebar.haml +312 -312
- package/src/pages/examples/layout-manager.haml +98 -98
- package/src/pages/examples/layout-metasidebar.haml +269 -269
- package/src/pages/examples/layout-sidebar-actionbar-metasidebar.haml +308 -308
- package/src/pages/examples/layout-sidebar-actionbar.haml +308 -308
- package/src/pages/examples/layout-sidebar.haml +296 -296
- package/src/pages/examples/layout-tester.haml +105 -105
- package/src/pages/examples/splitview-testcases.haml +477 -477
- package/src/pages/examples/splitview.haml +389 -389
- package/src/pages/forms/checkboxes.haml +64 -64
- package/src/pages/forms/checkboxes_devices.haml +45 -45
- package/src/pages/forms/form-addon.haml +16 -16
- package/src/pages/forms/form-card.haml +36 -36
- package/src/pages/forms/form-grid.haml +16 -16
- package/src/pages/forms/form_grid_narrow.haml +18 -18
- package/src/pages/forms/forms.haml +22 -22
- package/src/pages/forms/index.njk +6 -6
- package/src/pages/forms/radiobuttons.haml +50 -50
- package/src/pages/forms/rating_scale.haml +62 -62
- package/src/pages/forms/search.haml +71 -71
- package/src/pages/forms/select2.haml +72 -72
- package/src/pages/forms/select_native.haml +74 -74
- package/src/pages/forms/selectable_token.haml +49 -49
- package/src/pages/forms/selectable_token_browsers.haml +66 -66
- package/src/pages/forms/selectable_token_lg.haml +49 -49
- package/src/pages/forms/selectable_token_xl.haml +49 -49
- package/src/pages/forms/textarea.haml +24 -24
- package/src/pages/forms/toggle-buttons.haml +94 -94
- package/src/pages/forms/toggle-switch.haml +31 -31
- package/src/pages/forms/tomselect.haml +76 -76
- package/src/pages/forms/trix_editor.pug +10 -10
- package/src/pages/forms/uploads.pug +101 -101
- package/src/pages/icons/bug-icons.haml +75 -75
- package/src/pages/icons/index.njk +83 -83
- package/src/pages/icons/marketingicons.haml +15 -15
- package/src/pages/icons/status-icons.haml +38 -38
- package/src/pages/layout/app_layout.haml +27 -27
- package/src/pages/layout/index.njk +6 -6
- package/src/pages/layout/max_width.haml +49 -49
- package/src/pages/layout/spacing.haml +30 -30
- package/src/pages/navigation/header-manager.haml +73 -73
- package/src/pages/navigation/header-tester.haml +100 -100
- package/src/pages/navigation/header.haml +76 -76
- package/src/pages/navigation/header_customer.haml +77 -77
- package/src/pages/navigation/header_tester_epam.haml +108 -108
- package/src/pages/navigation/index.njk +7 -7
- package/src/pages/navigation/product_dropdown.haml +65 -65
- package/src/pages/navigation/radio_tabs.haml +22 -22
- package/src/pages/navigation/sidebar-manager.haml +46 -46
- package/src/pages/navigation/sidebar-tester-elements.haml +105 -105
- package/src/pages/navigation/sidebar-tester-seatlimitation.haml +108 -108
- package/src/pages/navigation/sidebar-tester.haml +75 -75
- package/src/pages/navigation/sidebar.haml +46 -46
- package/src/pages/navigation/sidebar_collapsables.haml +136 -136
- package/src/pages/navigation/sidebar_customer.haml +146 -146
- package/src/pages/navigation/tabnavigation.haml +12 -12
- package/src/pages/navigation/tabnavigation_actions.haml +21 -21
- package/src/pages/navigation/tabnavigation_pills.haml +12 -12
- package/src/pages/navigation/test-header-tester.haml +177 -177
- package/src/pages/typography/index.njk +7 -7
- package/src/pages/typography/link_with_icon.haml +12 -12
- package/src/pages/typography/linked_icon.haml +10 -10
- package/src/pages/typography/markdown.md +112 -112
- package/src/pages/typography/section_header.haml +25 -25
- package/src/pages/typography/section_header_actions.haml +59 -59
- package/src/pages/typography/text_with_icon.haml +12 -12
- package/src/pages/typography/trix_styles.haml +127 -127
- package/src/pages/typography/typography.haml +51 -51
- package/src/sitemap.xml.njk +13 -13
- package/src/static/app.compiled.css +159 -197
- package/src/static/app.compiled.css.map +1 -1
- package/src/static/browserconfig.xml +9 -9
- package/src/static/site.webmanifest +3 -3
- package/utils/collections.js +29 -29
- package/utils/filters.js +11 -11
- package/utils/markdown.js +9 -9
- package/utils/shortcodes.js +6 -6
- package/utils/transforms.js +19 -19
- package/webpack.config.js +24 -24
|
@@ -1,190 +1,190 @@
|
|
|
1
|
-
---
|
|
2
|
-
layout: page-example-customer.njk
|
|
3
|
-
title: "Layout Customer UI"
|
|
4
|
-
tags: "examples"
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
%nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
|
|
8
|
-
.profilepicture-wrapper
|
|
9
|
-
%details.profilepicture-actions
|
|
10
|
-
%summary
|
|
11
|
-
%img.profilepicture{src:'/assets/images/logo-testio/testio_symbol_purpleteal_square.png', alt:''}
|
|
12
|
-
.popover-menu
|
|
13
|
-
%a.popover-action{href:'#'}
|
|
14
|
-
%span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing
|
|
15
|
-
Upload picture
|
|
16
|
-
%a.popover-action{href:'#'}
|
|
17
|
-
%span.icon.text-icon-default.icon-remove.mr-icon-spacing
|
|
18
|
-
Remove picture
|
|
19
|
-
.sidebar-title Purple IO
|
|
20
|
-
.navlinks
|
|
21
|
-
%a.navlink.active{href:'#'}
|
|
22
|
-
%span.icon.icon-home
|
|
23
|
-
Navlink active
|
|
24
|
-
%a.navlink{href:'#'}
|
|
25
|
-
%span.icon.icon-bug
|
|
26
|
-
Navlink
|
|
27
|
-
%details
|
|
28
|
-
%summary.navlink
|
|
29
|
-
%span.icon.icon-product
|
|
30
|
-
Collapse
|
|
31
|
-
%a.navlink{href:'#'}
|
|
32
|
-
%span.icon.icon-test
|
|
33
|
-
Navlink child
|
|
34
|
-
%a.navlink{href:'#'}
|
|
35
|
-
%span.icon.icon-test
|
|
36
|
-
Navlink child
|
|
37
|
-
%a.navlink{href:'#'}
|
|
38
|
-
%span.icon.icon-test
|
|
39
|
-
Navlink child
|
|
40
|
-
%a.navlink.active{href:'#'}
|
|
41
|
-
%span.icon.icon-test
|
|
42
|
-
Active child
|
|
43
|
-
%details.marked-collapse.purple
|
|
44
|
-
%summary.navlink
|
|
45
|
-
%span.icon.icon-product
|
|
46
|
-
Collapse purple
|
|
47
|
-
%a.navlink{href:'#'}
|
|
48
|
-
%span.icon.icon-test
|
|
49
|
-
Navlink child
|
|
50
|
-
%a.navlink{href:'#'}
|
|
51
|
-
%span.icon.icon-test
|
|
52
|
-
Navlink child
|
|
53
|
-
%a.navlink{href:'#'}
|
|
54
|
-
%span.icon.icon-test
|
|
55
|
-
Navlink child
|
|
56
|
-
%a.navlink.active{href:'#'}
|
|
57
|
-
%span.icon.icon-test
|
|
58
|
-
Active child
|
|
59
|
-
%details.marked-collapse.orange
|
|
60
|
-
%summary.navlink
|
|
61
|
-
%span.icon.icon-product
|
|
62
|
-
Collapse orange
|
|
63
|
-
%a.navlink{href:'#'}
|
|
64
|
-
%span.icon.icon-test
|
|
65
|
-
Navlink child
|
|
66
|
-
%a.navlink{href:'#'}
|
|
67
|
-
%span.icon.icon-test
|
|
68
|
-
Navlink child
|
|
69
|
-
%a.navlink{href:'#'}
|
|
70
|
-
%span.icon.icon-test
|
|
71
|
-
Navlink child
|
|
72
|
-
%a.navlink.active{href:'#'}
|
|
73
|
-
%span.icon.icon-test
|
|
74
|
-
Active child
|
|
75
|
-
%details.marked-collapse.yellow
|
|
76
|
-
%summary.navlink
|
|
77
|
-
%span.icon.icon-product
|
|
78
|
-
Collapse yellow
|
|
79
|
-
%a.navlink{href:'#'}
|
|
80
|
-
%span.icon.icon-test
|
|
81
|
-
Navlink child
|
|
82
|
-
%a.navlink{href:'#'}
|
|
83
|
-
%span.icon.icon-test
|
|
84
|
-
Navlink child
|
|
85
|
-
%a.navlink{href:'#'}
|
|
86
|
-
%span.icon.icon-test
|
|
87
|
-
Navlink child
|
|
88
|
-
%a.navlink.active{href:'#'}
|
|
89
|
-
%span.icon.icon-test
|
|
90
|
-
Active child
|
|
91
|
-
%details.marked-collapse.red-light
|
|
92
|
-
%summary.navlink
|
|
93
|
-
%span.icon.icon-product
|
|
94
|
-
Collapse red-light
|
|
95
|
-
%a.navlink{href:'#'}
|
|
96
|
-
%span.icon.icon-test
|
|
97
|
-
Navlink child
|
|
98
|
-
%a.navlink{href:'#'}
|
|
99
|
-
%span.icon.icon-test
|
|
100
|
-
Navlink child
|
|
101
|
-
%a.navlink{href:'#'}
|
|
102
|
-
%span.icon.icon-test
|
|
103
|
-
Navlink child
|
|
104
|
-
%a.navlink.active{href:'#'}
|
|
105
|
-
%span.icon.icon-test
|
|
106
|
-
Active child
|
|
107
|
-
%details.marked-collapse.pink
|
|
108
|
-
%summary.navlink
|
|
109
|
-
%span.icon.icon-product
|
|
110
|
-
Collapse pink
|
|
111
|
-
%a.navlink{href:'#'}
|
|
112
|
-
%span.icon.icon-test
|
|
113
|
-
Navlink child
|
|
114
|
-
%a.navlink{href:'#'}
|
|
115
|
-
%span.icon.icon-test
|
|
116
|
-
Navlink child
|
|
117
|
-
%a.navlink{href:'#'}
|
|
118
|
-
%span.icon.icon-test
|
|
119
|
-
Navlink child
|
|
120
|
-
%a.navlink.active{href:'#'}
|
|
121
|
-
%span.icon.icon-test
|
|
122
|
-
Active child
|
|
123
|
-
%details.marked-collapse.blue
|
|
124
|
-
%summary.navlink
|
|
125
|
-
%span.icon.icon-product
|
|
126
|
-
Collapse blue
|
|
127
|
-
%a.navlink{href:'#'}
|
|
128
|
-
%span.icon.icon-test
|
|
129
|
-
Navlink child
|
|
130
|
-
%a.navlink{href:'#'}
|
|
131
|
-
%span.icon.icon-test
|
|
132
|
-
Navlink child
|
|
133
|
-
%a.navlink{href:'#'}
|
|
134
|
-
%span.icon.icon-test
|
|
135
|
-
Navlink child
|
|
136
|
-
%a.navlink.active{href:'#'}
|
|
137
|
-
%span.icon.icon-test
|
|
138
|
-
Active child
|
|
139
|
-
|
|
140
|
-
%main.main-content.main-content-padding
|
|
141
|
-
%h1.mb-heading Layout Customer UI
|
|
142
|
-
%section.section
|
|
143
|
-
.grid.gap-1px.p-xs.bg-gray-lightest.rounded
|
|
144
|
-
%p .app-body
|
|
145
|
-
.p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header.customer
|
|
146
|
-
.grid.grid-cols-2-auto-fr.gap-1px
|
|
147
|
-
.bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar.customer
|
|
148
|
-
.grid.gap-1px
|
|
149
|
-
.grid.grid-cols-2-fr-auto
|
|
150
|
-
.bg-white.p-xs.pl-md.h-xxl .main-content
|
|
151
|
-
.bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
|
|
152
|
-
.bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
|
|
153
|
-
%h5.mt-md HTML structure
|
|
154
|
-
%code
|
|
155
|
-
<body class="app-body">
|
|
156
|
-
%br
|
|
157
|
-
.ml-md <header class="header customer">
|
|
158
|
-
.ml-md <nav class="sidebar customer">
|
|
159
|
-
.ml-md <header class="test-header customer">
|
|
160
|
-
.ml-md <main class="main-content">
|
|
161
|
-
.ml-md <aside class="metasidebar">
|
|
162
|
-
.ml-md <footer class="actionbar">
|
|
163
|
-
</body">
|
|
164
|
-
%section.section
|
|
165
|
-
%h2.mb-heading Dummy Content
|
|
166
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
167
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
168
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
169
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
170
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
171
|
-
%aside.metasidebar
|
|
172
|
-
%details.metasidebar-wrapper{open:"true"}
|
|
173
|
-
%summary.metasidebar-btn
|
|
174
|
-
.metasidebar-content
|
|
175
|
-
%h2.metasidebar-title Metasidebar title
|
|
176
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
177
|
-
%h3.metasidebar-subheading Metasidebar subheading
|
|
178
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
179
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
180
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
181
|
-
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
182
|
-
%footer.actionbar
|
|
183
|
-
%button.btn.btn-default.btn-primary
|
|
184
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
185
|
-
Primary action
|
|
186
|
-
%button.btn.btn-default.btn-secondary
|
|
187
|
-
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
188
|
-
Secondary action
|
|
189
|
-
%button.btn-intercom
|
|
1
|
+
---
|
|
2
|
+
layout: page-example-customer.njk
|
|
3
|
+
title: "Layout Customer UI"
|
|
4
|
+
tags: "examples"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
%nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
|
|
8
|
+
.profilepicture-wrapper
|
|
9
|
+
%details.profilepicture-actions
|
|
10
|
+
%summary
|
|
11
|
+
%img.profilepicture{src:'/assets/images/logo-testio/testio_symbol_purpleteal_square.png', alt:''}
|
|
12
|
+
.popover-menu
|
|
13
|
+
%a.popover-action{href:'#'}
|
|
14
|
+
%span.icon.text-icon-default.icon-cloud-upload.mr-icon-spacing
|
|
15
|
+
Upload picture
|
|
16
|
+
%a.popover-action{href:'#'}
|
|
17
|
+
%span.icon.text-icon-default.icon-remove.mr-icon-spacing
|
|
18
|
+
Remove picture
|
|
19
|
+
.sidebar-title Purple IO
|
|
20
|
+
.navlinks
|
|
21
|
+
%a.navlink.active{href:'#'}
|
|
22
|
+
%span.icon.icon-home
|
|
23
|
+
Navlink active
|
|
24
|
+
%a.navlink{href:'#'}
|
|
25
|
+
%span.icon.icon-bug
|
|
26
|
+
Navlink
|
|
27
|
+
%details
|
|
28
|
+
%summary.navlink
|
|
29
|
+
%span.icon.icon-product
|
|
30
|
+
Collapse
|
|
31
|
+
%a.navlink{href:'#'}
|
|
32
|
+
%span.icon.icon-test
|
|
33
|
+
Navlink child
|
|
34
|
+
%a.navlink{href:'#'}
|
|
35
|
+
%span.icon.icon-test
|
|
36
|
+
Navlink child
|
|
37
|
+
%a.navlink{href:'#'}
|
|
38
|
+
%span.icon.icon-test
|
|
39
|
+
Navlink child
|
|
40
|
+
%a.navlink.active{href:'#'}
|
|
41
|
+
%span.icon.icon-test
|
|
42
|
+
Active child
|
|
43
|
+
%details.marked-collapse.purple
|
|
44
|
+
%summary.navlink
|
|
45
|
+
%span.icon.icon-product
|
|
46
|
+
Collapse purple
|
|
47
|
+
%a.navlink{href:'#'}
|
|
48
|
+
%span.icon.icon-test
|
|
49
|
+
Navlink child
|
|
50
|
+
%a.navlink{href:'#'}
|
|
51
|
+
%span.icon.icon-test
|
|
52
|
+
Navlink child
|
|
53
|
+
%a.navlink{href:'#'}
|
|
54
|
+
%span.icon.icon-test
|
|
55
|
+
Navlink child
|
|
56
|
+
%a.navlink.active{href:'#'}
|
|
57
|
+
%span.icon.icon-test
|
|
58
|
+
Active child
|
|
59
|
+
%details.marked-collapse.orange
|
|
60
|
+
%summary.navlink
|
|
61
|
+
%span.icon.icon-product
|
|
62
|
+
Collapse orange
|
|
63
|
+
%a.navlink{href:'#'}
|
|
64
|
+
%span.icon.icon-test
|
|
65
|
+
Navlink child
|
|
66
|
+
%a.navlink{href:'#'}
|
|
67
|
+
%span.icon.icon-test
|
|
68
|
+
Navlink child
|
|
69
|
+
%a.navlink{href:'#'}
|
|
70
|
+
%span.icon.icon-test
|
|
71
|
+
Navlink child
|
|
72
|
+
%a.navlink.active{href:'#'}
|
|
73
|
+
%span.icon.icon-test
|
|
74
|
+
Active child
|
|
75
|
+
%details.marked-collapse.yellow
|
|
76
|
+
%summary.navlink
|
|
77
|
+
%span.icon.icon-product
|
|
78
|
+
Collapse yellow
|
|
79
|
+
%a.navlink{href:'#'}
|
|
80
|
+
%span.icon.icon-test
|
|
81
|
+
Navlink child
|
|
82
|
+
%a.navlink{href:'#'}
|
|
83
|
+
%span.icon.icon-test
|
|
84
|
+
Navlink child
|
|
85
|
+
%a.navlink{href:'#'}
|
|
86
|
+
%span.icon.icon-test
|
|
87
|
+
Navlink child
|
|
88
|
+
%a.navlink.active{href:'#'}
|
|
89
|
+
%span.icon.icon-test
|
|
90
|
+
Active child
|
|
91
|
+
%details.marked-collapse.red-light
|
|
92
|
+
%summary.navlink
|
|
93
|
+
%span.icon.icon-product
|
|
94
|
+
Collapse red-light
|
|
95
|
+
%a.navlink{href:'#'}
|
|
96
|
+
%span.icon.icon-test
|
|
97
|
+
Navlink child
|
|
98
|
+
%a.navlink{href:'#'}
|
|
99
|
+
%span.icon.icon-test
|
|
100
|
+
Navlink child
|
|
101
|
+
%a.navlink{href:'#'}
|
|
102
|
+
%span.icon.icon-test
|
|
103
|
+
Navlink child
|
|
104
|
+
%a.navlink.active{href:'#'}
|
|
105
|
+
%span.icon.icon-test
|
|
106
|
+
Active child
|
|
107
|
+
%details.marked-collapse.pink
|
|
108
|
+
%summary.navlink
|
|
109
|
+
%span.icon.icon-product
|
|
110
|
+
Collapse pink
|
|
111
|
+
%a.navlink{href:'#'}
|
|
112
|
+
%span.icon.icon-test
|
|
113
|
+
Navlink child
|
|
114
|
+
%a.navlink{href:'#'}
|
|
115
|
+
%span.icon.icon-test
|
|
116
|
+
Navlink child
|
|
117
|
+
%a.navlink{href:'#'}
|
|
118
|
+
%span.icon.icon-test
|
|
119
|
+
Navlink child
|
|
120
|
+
%a.navlink.active{href:'#'}
|
|
121
|
+
%span.icon.icon-test
|
|
122
|
+
Active child
|
|
123
|
+
%details.marked-collapse.blue
|
|
124
|
+
%summary.navlink
|
|
125
|
+
%span.icon.icon-product
|
|
126
|
+
Collapse blue
|
|
127
|
+
%a.navlink{href:'#'}
|
|
128
|
+
%span.icon.icon-test
|
|
129
|
+
Navlink child
|
|
130
|
+
%a.navlink{href:'#'}
|
|
131
|
+
%span.icon.icon-test
|
|
132
|
+
Navlink child
|
|
133
|
+
%a.navlink{href:'#'}
|
|
134
|
+
%span.icon.icon-test
|
|
135
|
+
Navlink child
|
|
136
|
+
%a.navlink.active{href:'#'}
|
|
137
|
+
%span.icon.icon-test
|
|
138
|
+
Active child
|
|
139
|
+
|
|
140
|
+
%main.main-content.main-content-padding
|
|
141
|
+
%h1.mb-heading Layout Customer UI
|
|
142
|
+
%section.section
|
|
143
|
+
.grid.gap-1px.p-xs.bg-gray-lightest.rounded
|
|
144
|
+
%p .app-body
|
|
145
|
+
.p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header.customer
|
|
146
|
+
.grid.grid-cols-2-auto-fr.gap-1px
|
|
147
|
+
.bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar.customer
|
|
148
|
+
.grid.gap-1px
|
|
149
|
+
.grid.grid-cols-2-fr-auto
|
|
150
|
+
.bg-white.p-xs.pl-md.h-xxl .main-content
|
|
151
|
+
.bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
|
|
152
|
+
.bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
|
|
153
|
+
%h5.mt-md HTML structure
|
|
154
|
+
%code
|
|
155
|
+
<body class="app-body">
|
|
156
|
+
%br
|
|
157
|
+
.ml-md <header class="header customer">
|
|
158
|
+
.ml-md <nav class="sidebar customer">
|
|
159
|
+
.ml-md <header class="test-header customer">
|
|
160
|
+
.ml-md <main class="main-content">
|
|
161
|
+
.ml-md <aside class="metasidebar">
|
|
162
|
+
.ml-md <footer class="actionbar">
|
|
163
|
+
</body">
|
|
164
|
+
%section.section
|
|
165
|
+
%h2.mb-heading Dummy Content
|
|
166
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
167
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
168
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
169
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
170
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
171
|
+
%aside.metasidebar
|
|
172
|
+
%details.metasidebar-wrapper{open:"true"}
|
|
173
|
+
%summary.metasidebar-btn
|
|
174
|
+
.metasidebar-content
|
|
175
|
+
%h2.metasidebar-title Metasidebar title
|
|
176
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
177
|
+
%h3.metasidebar-subheading Metasidebar subheading
|
|
178
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
179
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
180
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
181
|
+
%p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
|
|
182
|
+
%footer.actionbar
|
|
183
|
+
%button.btn.btn-default.btn-primary
|
|
184
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
185
|
+
Primary action
|
|
186
|
+
%button.btn.btn-default.btn-secondary
|
|
187
|
+
%span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
188
|
+
Secondary action
|
|
189
|
+
%button.btn-intercom
|
|
190
190
|
%span.icon.icon-intercom
|