diff --git a/_config.yml b/_config.yml index 5b21827d8..9e3fe6646 100644 --- a/_config.yml +++ b/_config.yml @@ -25,6 +25,77 @@ tabler-plugins: exclude: - .jekyll-cache + - 400.html + - 401.html + - 403.html + - 404.html + - 500.html + - 503.html + - all.html + - blank.html + - blog.html + - buttons.html + - calendar.html + - cards.html + - carousel.html + - changelog.html + - charts.html + - charts-heatmap.html + - components.html + - crypto-currencies.html + - datatables.html + - docs.html + - dropdowns.html + - email.html + - empty.html + - favicon.ico + - flags.html + - forgot-password.html + - form-elements.html + - gallery.html + - homepage.html + - icons.html + - index.html + - invoice.html + - layout-dark.html + - layout-dark-navigation.html + - layout-dark-topnav.html + - layout-sidebar.html + - layout-sidebar-dark.html + - layout-sidebar-narrow.html + - layout-sidebar-only.html + - layout-sidebar-right.html + - layouts.html + - license.html + - lists.html + - lookup.html + - maintenance.html + - maps.html + - markdown.md + - music.html + - pagination.html + - pricing.html + - profile.html + - ribbons.html + - rtl.html + - search-results.html + - sign-in.html + - sign-up.html + - sitemap.xml + - snippets.html + - social.html + - store.html + - tabs.html + - terms-of-service.html + - tmp.html + - tmp2.html + - tmp3.html + - tmp4.html + - tmp-dark.html + - tmp-forms.html + - typography.html + - users.html + - welcome.html keep_files: - css/ui-kit.css @@ -47,13 +118,13 @@ jekyll_tidy: ignore_env: development -collections: - docs: - output: true - changelog: - output: false - components: - output: true +#collections: +# docs: +# output: false +# changelog: +# output: false +# components: +# output: false defaults: - scope: @@ -66,14 +137,14 @@ defaults: type: "pages" values: layout: default - - scope: - type: "docs" - values: - layout: docs - - scope: - type: "components" - values: - layout: component +# - scope: +# type: "docs" +# values: +# layout: docs +# - scope: +# type: "components" +# values: +# layout: component colors: diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 68448a79f..968034be4 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -92,16 +92,6 @@ base: maintenance: url: maintenance.html title: Maintenance page -a: - title: A - icon: menu - children: - b: - title: B - children: - c: - title: C - url: tmp.html layouts: title: Layouts diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/pages/_includes/layout/debug.html b/pages/_includes/layout/debug.html index fcb9d7c74..e215452c9 100644 --- a/pages/_includes/layout/debug.html +++ b/pages/_includes/layout/debug.html @@ -47,10 +47,6 @@ display: flex; } - .content-page { - padding-bottom: 2rem; - } - .debug a { color: inherit; margin-right: 1rem; diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index b0c791c80..caba5501e 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -66,7 +66,7 @@ -{% include layout/page-title.html title="Invoices" %} +{% include layout/page-header.html title="Invoices" %}
diff --git a/pages/_includes/layout/menu-aside.html b/pages/_includes/layout/menu-aside.html index 44a0bafdb..40c565a43 100644 --- a/pages/_includes/layout/menu-aside.html +++ b/pages/_includes/layout/menu-aside.html @@ -1,3 +1,4 @@ +{% comment %} {% assign current-page = page.menu | default: layout.menu | split: '.' %} +{% endcomment %} \ No newline at end of file diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html index a85a18563..6b4b1dfd7 100644 --- a/pages/_includes/layout/menu.html +++ b/pages/_includes/layout/menu.html @@ -1,3 +1,4 @@ +{% comment %} {% assign current-page = page.menu | default: layout.menu | split: '.' %} +{% endcomment %} diff --git a/pages/_includes/layout/navbar-primary.html b/pages/_includes/layout/navbar-primary.html new file mode 100644 index 000000000..69e2a8655 --- /dev/null +++ b/pages/_includes/layout/navbar-primary.html @@ -0,0 +1,10 @@ + + diff --git a/pages/_includes/layout/navbar-secondary.html b/pages/_includes/layout/navbar-secondary.html new file mode 100644 index 000000000..ed373eed7 --- /dev/null +++ b/pages/_includes/layout/navbar-secondary.html @@ -0,0 +1,6 @@ + + diff --git a/pages/_includes/layout/page-title-actions.html b/pages/_includes/layout/page-header-actions.html similarity index 100% rename from pages/_includes/layout/page-title-actions.html rename to pages/_includes/layout/page-header-actions.html diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-header.html similarity index 83% rename from pages/_includes/layout/page-title.html rename to pages/_includes/layout/page-header.html index b47f8eaa2..acd04a1f1 100644 --- a/pages/_includes/layout/page-title.html +++ b/pages/_includes/layout/page-header.html @@ -1,5 +1,5 @@ -
+ +{% endcomment %} \ No newline at end of file diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html index 0959ba5e9..4d4ab6a1e 100644 --- a/pages/_includes/layout/topnav.html +++ b/pages/_includes/layout/topnav.html @@ -1,3 +1,5 @@ +{% comment %} + {% assign person-id = include.person-id | default: 12 | minus: 1 %} {% assign person = site.data.people[person-id] %} @@ -74,4 +76,6 @@ {% endunless %} -{% endunless %} \ No newline at end of file +{% endunless %} + +{% endcomment %} \ No newline at end of file diff --git a/pages/_layouts/component.html b/pages/_layouts/component.html index b920c854f..67daa19d7 100644 --- a/pages/_layouts/component.html +++ b/pages/_layouts/component.html @@ -1,7 +1,7 @@ --- layout: default menu: components -page-title: Tabler components +page-header: Tabler components og-component: true --- diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index 1dfedcdb0..8b8d1c3e9 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -2,24 +2,19 @@ layout: base --- -{% assign page-title = page.page-title | default: layout.page-title %} +{% assign page-header = page.page-header | default: layout.page-header %}
- {% if page.sidebar %} - {% include layout/sidebar.html %} - {% endif %} + {% include layout/navbar-primary.html %} + {% include layout/navbar-secondary.html %}
- {% include layout/topnav.html %} +
+ {% if page-header %} + {% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %} + {% endif %} -
-
- {% if page-title %} - {% include layout/page-title.html title=page-title description=page.page-title-description actions=page.page-title-actions pretitle=page.page-pretitle %} - {% endif %} - - {{ content }} -
-
+ {{ content }} +
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html index 52feb3323..614651cef 100644 --- a/pages/_layouts/docs.html +++ b/pages/_layouts/docs.html @@ -2,7 +2,7 @@ layout: default menu: docs title: Documentation -page-title: Documentation +page-header: Documentation --- {% assign current-url = page.url | replace_regex: "^/", "" %} diff --git a/pages/all.html b/pages/all.html index 5814b7fbe..2e568f869 100644 --- a/pages/all.html +++ b/pages/all.html @@ -1,6 +1,6 @@ --- title: Index -page-title: Index +page-header: Index menu: index --- diff --git a/pages/blog.html b/pages/blog.html index 72bb77149..a8bbfa355 100644 --- a/pages/blog.html +++ b/pages/blog.html @@ -1,6 +1,6 @@ --- title: Blog -page-title: Blog +page-header: Blog menu: extra.blog --- diff --git a/pages/buttons.html b/pages/buttons.html index 00bcbc083..db815e690 100644 --- a/pages/buttons.html +++ b/pages/buttons.html @@ -1,6 +1,6 @@ --- title: Buttons -page-title: Buttons +page-header: Buttons done: true menu: base.buttons --- diff --git a/pages/calendar.html b/pages/calendar.html index 18b17be23..de8260568 100644 --- a/pages/calendar.html +++ b/pages/calendar.html @@ -1,7 +1,7 @@ --- title: Calendar -page-title: Calendar -page-title-actions: calendar +page-header: Calendar +page-header-actions: calendar menu: base.calendar --- diff --git a/pages/cards.html b/pages/cards.html index 77055b2a3..523b2cb64 100644 --- a/pages/cards.html +++ b/pages/cards.html @@ -1,6 +1,6 @@ --- title: Cards -page-title: Cards +page-header: Cards menu: base.cards --- diff --git a/pages/carousel.html b/pages/carousel.html index 501e37648..ad58453b7 100644 --- a/pages/carousel.html +++ b/pages/carousel.html @@ -1,6 +1,6 @@ --- title: Carousel -page-title: Carousel +page-header: Carousel layout: default done: true menu: base.carousel diff --git a/pages/changelog.html b/pages/changelog.html index 0c0eca08d..2d8be87ed 100644 --- a/pages/changelog.html +++ b/pages/changelog.html @@ -1,6 +1,6 @@ --- title: Changelog -page-title: Changelog +page-header: Changelog menu: changelog done: true --- diff --git a/pages/charts-heatmap.html b/pages/charts-heatmap.html index 28baa16b5..cd7353dfe 100644 --- a/pages/charts-heatmap.html +++ b/pages/charts-heatmap.html @@ -1,6 +1,6 @@ --- title: Heatmap Charts -page-title: Heatmap Charts +page-header: Heatmap Charts done: true --- diff --git a/pages/charts.html b/pages/charts.html index c572ecc7e..a6d379c62 100644 --- a/pages/charts.html +++ b/pages/charts.html @@ -1,6 +1,6 @@ --- title: Charts -page-title: Charts +page-header: Charts menu: charts --- diff --git a/pages/crypto-currencies.html b/pages/crypto-currencies.html index 361bc9df8..bc00060a0 100644 --- a/pages/crypto-currencies.html +++ b/pages/crypto-currencies.html @@ -1,6 +1,6 @@ --- title: Crypto currencies -page-title: Crypto currencies +page-header: Crypto currencies done: true --- diff --git a/pages/dropdowns.html b/pages/dropdowns.html index 5e92bd1ac..dd20e93e3 100644 --- a/pages/dropdowns.html +++ b/pages/dropdowns.html @@ -1,6 +1,6 @@ --- title: Dropdowns -page-title: Dropdowns +page-header: Dropdowns --- {% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %} diff --git a/pages/email.html b/pages/email.html index d2826cbb8..131a630cf 100644 --- a/pages/email.html +++ b/pages/email.html @@ -1,6 +1,6 @@ --- title: Email -page-title: Crypto currencies +page-header: Crypto currencies ---
diff --git a/pages/flags.html b/pages/flags.html index 70a1cfc2c..1549d1864 100644 --- a/pages/flags.html +++ b/pages/flags.html @@ -1,6 +1,6 @@ --- title: Flags -page-title: Flags +page-header: Flags done: true ---
diff --git a/pages/form-elements.html b/pages/form-elements.html index ce2ce9182..5a394bfe1 100644 --- a/pages/form-elements.html +++ b/pages/form-elements.html @@ -1,6 +1,6 @@ --- title: Form elements -page-title: Form elements +page-header: Form elements menu: forms --- diff --git a/pages/gallery.html b/pages/gallery.html index 8ea88f1f3..bd93b922f 100644 --- a/pages/gallery.html +++ b/pages/gallery.html @@ -1,8 +1,8 @@ --- title: Gallery -page-title: Gallery -page-title-description: 1-12 of 241 photos -page-title-actions: photos +page-header: Gallery +page-header-description: 1-12 of 241 photos +page-header-actions: photos done: true menu: base.gallery --- diff --git a/pages/homepage.html b/pages/homepage.html index f76ac74aa..59b6e6c7a 100644 --- a/pages/homepage.html +++ b/pages/homepage.html @@ -1,7 +1,7 @@ --- title: Homepage -page-title: Homepage -page-pretitle: Overview +page-header: Homepage +page-header-pretitle: Overview ---
diff --git a/pages/icons.html b/pages/icons.html index 56e841ad0..a973e8954 100644 --- a/pages/icons.html +++ b/pages/icons.html @@ -1,6 +1,6 @@ --- title: Icons -page-title: Icons +page-header: Icons ---
diff --git a/pages/index.html b/pages/index.html index 401f49f16..9ff491546 100644 --- a/pages/index.html +++ b/pages/index.html @@ -1,8 +1,8 @@ --- title: Dashboard -page-title: Dashboard -page-pretitle: Overview -page-title-actions: buttons +page-header: Dashboard +page-header-pretitle: Overview +page-header-actions: buttons menu: home --- diff --git a/pages/layout-dark-navigation.html b/pages/layout-dark-navigation.html index e5a7f776a..a7151f2e3 100644 --- a/pages/layout-dark-navigation.html +++ b/pages/layout-dark-navigation.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts topmenu-dark: true --- diff --git a/pages/layout-dark-topnav.html b/pages/layout-dark-topnav.html index df0a1b33f..92b1ecf26 100644 --- a/pages/layout-dark-topnav.html +++ b/pages/layout-dark-topnav.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts topnav-dark: true --- diff --git a/pages/layout-dark.html b/pages/layout-dark.html index 59cfb6146..cb794831e 100644 --- a/pages/layout-dark.html +++ b/pages/layout-dark.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts --- diff --git a/pages/layout-sidebar-dark.html b/pages/layout-sidebar-dark.html index c9da13271..9c8a2451a 100644 --- a/pages/layout-sidebar-dark.html +++ b/pages/layout-sidebar-dark.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts sidebar: true sidebar-dark: true diff --git a/pages/layout-sidebar-narrow.html b/pages/layout-sidebar-narrow.html index 1b22cb659..c5c47a7e9 100644 --- a/pages/layout-sidebar-narrow.html +++ b/pages/layout-sidebar-narrow.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts sidebar: true sidebar-dark: true diff --git a/pages/layout-sidebar-only.html b/pages/layout-sidebar-only.html index 4005cecfe..2a9cc284b 100644 --- a/pages/layout-sidebar-only.html +++ b/pages/layout-sidebar-only.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts sidebar: true hide-topnav: true diff --git a/pages/layout-sidebar-right.html b/pages/layout-sidebar-right.html index a1f5ce439..c5a3c4951 100644 --- a/pages/layout-sidebar-right.html +++ b/pages/layout-sidebar-right.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts sidebar: true sidebar-right: true diff --git a/pages/layout-sidebar.html b/pages/layout-sidebar.html index 2bc0f2950..e17fa35cd 100644 --- a/pages/layout-sidebar.html +++ b/pages/layout-sidebar.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts sidebar: true --- diff --git a/pages/layouts.html b/pages/layouts.html index 59cfb6146..cb794831e 100644 --- a/pages/layouts.html +++ b/pages/layouts.html @@ -1,5 +1,5 @@ --- -page-title: Page Layouts +page-header: Page Layouts menu: layouts --- diff --git a/pages/license.html b/pages/license.html index 8bd32bef9..f202caccf 100644 --- a/pages/license.html +++ b/pages/license.html @@ -1,6 +1,6 @@ --- tmp: true -page-title: Tabler licence +page-header: Tabler licence ---
diff --git a/pages/lists.html b/pages/lists.html index 23653e6cc..91d4495d3 100644 --- a/pages/lists.html +++ b/pages/lists.html @@ -1,7 +1,7 @@ --- menu: base.lists title: Lists -page-title: Lists +page-header: Lists ---
diff --git a/pages/lookup.html b/pages/lookup.html index 1ba534445..71779cc63 100644 --- a/pages/lookup.html +++ b/pages/lookup.html @@ -1,6 +1,6 @@ --- title: Lookup company -page-title: Lookup company +page-header: Lookup company layout: default --- diff --git a/pages/maps.html b/pages/maps.html index 7231bfd42..6b977bd27 100644 --- a/pages/maps.html +++ b/pages/maps.html @@ -1,6 +1,6 @@ --- title: Maps -page-title: Maps +page-header: Maps ---
diff --git a/pages/markdown.md b/pages/markdown.md index 057142dac..e089553d1 100644 --- a/pages/markdown.md +++ b/pages/markdown.md @@ -1,6 +1,6 @@ --- title: Markdown -page-title: Markdown +page-header: Markdown --- # Who's that then? diff --git a/pages/music.html b/pages/music.html index d74232504..5244894f0 100644 --- a/pages/music.html +++ b/pages/music.html @@ -1,6 +1,6 @@ --- title: Music components -page-title: Music components +page-header: Music components menu: base.music --- diff --git a/pages/pricing.html b/pages/pricing.html index 63363ca56..7850e75e3 100644 --- a/pages/pricing.html +++ b/pages/pricing.html @@ -1,6 +1,6 @@ --- title: Pricing cards -page-title: Pricing cards +page-header: Pricing cards done: true --- diff --git a/pages/profile.html b/pages/profile.html index 0982b0835..f29fc20d4 100644 --- a/pages/profile.html +++ b/pages/profile.html @@ -1,6 +1,6 @@ --- title: Profile -page-title: Profile +page-header: Profile menu: base.profile --- diff --git a/pages/ribbons.html b/pages/ribbons.html index b4983b9be..12951840c 100644 --- a/pages/ribbons.html +++ b/pages/ribbons.html @@ -1,6 +1,6 @@ --- title: Ribbons -page-title: Ribbons +page-header: Ribbons done: true --- diff --git a/pages/rtl.html b/pages/rtl.html index efe8c3acb..2ab651bf6 100644 --- a/pages/rtl.html +++ b/pages/rtl.html @@ -1,7 +1,7 @@ --- rtl: true title: RTL mode -page-title: RTL mode +page-header: RTL mode menu: pages.rtl --- diff --git a/pages/search-results.html b/pages/search-results.html index 7a8da8f52..273bae2af 100644 --- a/pages/search-results.html +++ b/pages/search-results.html @@ -1,6 +1,6 @@ --- -page-title: Search results -page-title-description: About 2,410 result (0.19 seconds) +page-header: Search results +page-header-description: About 2,410 result (0.19 seconds) menu: extra.search-results --- diff --git a/pages/snippets.html b/pages/snippets.html index 18707a19c..9c967be49 100644 --- a/pages/snippets.html +++ b/pages/snippets.html @@ -1,7 +1,7 @@ --- title: Snippets -page-title: Snippets -page-title-right: date +page-header: Snippets +page-header-actions: date menu: extra.snippets --- diff --git a/pages/social.html b/pages/social.html index e04c4ea92..7bd2d22d4 100644 --- a/pages/social.html +++ b/pages/social.html @@ -1,6 +1,6 @@ --- title: Social elements -page-title: Social elements +page-header: Social elements done: true --- diff --git a/pages/store.html b/pages/store.html index a54f49654..38aa36bab 100644 --- a/pages/store.html +++ b/pages/store.html @@ -1,6 +1,6 @@ --- title: Store -page-title: Store +page-header: Store --- diff --git a/pages/tabs.html b/pages/tabs.html index 43c929396..d3f55d44e 100644 --- a/pages/tabs.html +++ b/pages/tabs.html @@ -1,6 +1,6 @@ --- title: Tabs -page-title: Tabs +page-header: Tabs done: true --- diff --git a/pages/tmp-dark.html b/pages/tmp-dark.html index 813ab51bb..60bafe25c 100644 --- a/pages/tmp-dark.html +++ b/pages/tmp-dark.html @@ -1,5 +1,5 @@ --- -page-title: Dark +page-header: Dark ---
diff --git a/pages/tmp-layout.html b/pages/tmp-layout.html new file mode 100644 index 000000000..09c20bfef --- /dev/null +++ b/pages/tmp-layout.html @@ -0,0 +1,84 @@ +--- +tmp: true +page-header: Layout test +page-header-actions: breadcrumb +--- + +
+ + + {% for i in (1..6) %} +
+
+
+
+
+ {% endfor %} + {% for i in (1..6) %} +
+
+
+
+
+ {% endfor %} +
+ +{% capture_global scripts %} + +{% endcapture_global %} \ No newline at end of file diff --git a/pages/tmp2.html b/pages/tmp2.html index c4bb54525..78ef52de8 100644 --- a/pages/tmp2.html +++ b/pages/tmp2.html @@ -1,6 +1,6 @@ --- tmp: true -page-title: Search results +page-header: Search results --- diff --git a/pages/typography.html b/pages/typography.html index 99c0e4f43..757aeeed2 100644 --- a/pages/typography.html +++ b/pages/typography.html @@ -1,6 +1,6 @@ --- title: Typography -page-title: Typography +page-header: Typography done: true --- diff --git a/pages/users.html b/pages/users.html index dcd957ff3..441ace54e 100644 --- a/pages/users.html +++ b/pages/users.html @@ -1,9 +1,9 @@ --- layout: default title: Users list -page-title: Users -page-title-actions: users -page-title-description: 1-18 of 413 people +page-header: Users +page-header-actions: users +page-header-description: 1-18 of 413 people done: true menu: base.users --- diff --git a/scss/_tabler-core.scss b/scss/_tabler-core.scss index b4a86ddab..e5ee94311 100644 --- a/scss/_tabler-core.scss +++ b/scss/_tabler-core.scss @@ -8,6 +8,7 @@ @import "layout/navbar"; @import "layout/sidenav"; @import "layout/page"; +@import "layout/mainnav"; @import "ui/alerts"; @import "ui/avatars"; diff --git a/scss/_variables.scss b/scss/_variables.scss index ab5ae6c95..db424cfd3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -14,7 +14,7 @@ $icon-fonts: () !default; $theme-color-interval: 10% !default; $light: #f5f7fb !default; -$dark: #303645 !default; +$dark: #354052 !default; $light-black: rgba($dark, .24) !default; $light-mix: rgba(mix($light, $dark, 64%), .24) !default; @@ -206,6 +206,17 @@ $embed-responsive-aspect-ratios: ( ) ) !default; +//sidenav +$sidenav-width: 15.625rem !default; +$sidenav-width-narrow: 4rem !default; +$sidenav-bg: $white !default; +$sidenav-border-color: $border-color !default; +$sidenav-dark-bg: $dark !default; +$sidenav-dark-color: $white !default; +$sidenav-padding: 1.25rem !default; +$sidenav-breakpoint-show: 'sm' !default; +$sidenav-breakpoint-folded: 'lg' !default; + //alerts $alert-link-font-weight: $font-weight-bold !default; $alert-bg-level: -8 !default; diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index 95c450b21..1a9a16907 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -1,12 +1,10 @@ // stylelint-disable property-no-vendor-prefix html { - height: 100%; font-size: 16px; } body { - min-height: 100%; - //overflow-y: scroll; + overflow-y: scroll; letter-spacing: $body-letter-spacing; touch-action: manipulation; text-rendering: optimizeLegibility; diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index dca08d1d5..2134c415d 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -1,393 +1,385 @@ -//sidenav -$sidenav-width: 16rem; -$sidenav-width-narrow: 4rem; -$sidenav-bg: $white; -$sidenav-border-color: $border-color; -$sidenav-dark-bg: $dark; -$sidenav-padding: 1.25rem; -$sidenav-breakpoint-show: 'sm'; -$sidenav-breakpoint-folded: 'lg'; -$sidenav-folded-item-height: 3.5rem; - -@mixin sidebar-narrow { - width: $sidenav-width-narrow; - - .sidebar-brand { - width: 100%; - } - - .sidebar-brand-logo { - &-sm { - display: inline-block; - } - - &-lg { - display: none; - } - } - - .sidebar-content { - padding: 0; - overflow: visible; - } - - .sidebar-nav { - margin: 0; - - > .sidebar-nav-item { - position: relative; - white-space: nowrap; - - &:hover { - background: $primary; - width: $sidenav-width; - - > .sidebar-nav-link { - color: #ffffff; - - > span { - display: block; - } - - .icon { - margin-right: add(1rem, $sidenav-padding); - } - } - - .sidebar-subnav { - display: block; - - .sidebar-nav-link { - padding-left: $sidenav-padding; - } - } - } - - > .sidebar-nav-link { - min-height: $sidenav-folded-item-height; - padding: 0 1rem !important; - position: relative; - - .icon { - margin: 0; - width: 2rem; - height: 1.125rem; - } - - > span { - display: none; - } - - .badge { - display: block; - position: absolute; - left: 2.5rem; - top: 1rem; - - text-indent: -99999px; - width: $badge-empty-size; - height: $badge-empty-size; - padding: 0; - } - } - } - } - - .sidebar-subnav { - display: none; - position: absolute; - top: $sidenav-folded-item-height; - left: $sidenav-width-narrow; - right: 0; - padding: .5rem 0; - background: $dark; - box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow; - } - - .sidebar-nav-arrow { - display: none !important; - } - - .sidebar-nav-title { - display: none; - } - - + .content { - margin-left: $sidenav-width-narrow; - - .navbar.fixed-top { - left: $sidenav-width-narrow; - } - } - - &.sidebar-right { - + .content { - margin-left: 0; - margin-right: $sidenav-width-narrow; - - .navbar.fixed-top { - left: 0; - right: $sidenav-width-narrow; - } - } - } - - .hide-sidebar-narrow { - display: none !important - } -} - -@mixin sidebar-visible { - display: flex; - - + .content .navbar.fixed-top { - left: $sidenav-width; - } - - .hide-sidebar-visible, - + .content .hide-sidebar-visible { - display: none !important; - } -} - -/** -Wrapper - */ -.page { - height: 100%; - overflow: hidden; - width: 100%; -} - -/** -Content - */ -.content { - overflow: hidden; - min-height: 100vh; - display: flex; - flex-direction: column; - - .sidebar + & { - margin-left: $sidenav-width; - - @if $sidenav-breakpoint-folded { - @include media-breakpoint-down($sidenav-breakpoint-folded) { - margin-left: $sidenav-width-narrow; - } - } - - @include media-breakpoint-down($sidenav-breakpoint-show) { - margin-left: 0; - padding-left: 0; - padding-right: 0; - } - } -} - -.content-page { - flex: 1; - display: flex; - - //@include media-breakpoint-up($cards-grid-breakpoint) { - // padding-left: $cards-grid-gap / 2; - // padding-right: $cards-grid-gap / 2; - //} - - @media print { - padding-top: 0 !important; - } -} - -/** -Sidebar - */ -.sidebar { - width: $sidenav-width; - position: fixed; - z-index: $zindex-fixed; - padding: 0; - background: $sidenav-bg; - box-shadow: inset -1px 0 $sidenav-border-color; - top: 0; - bottom: 0; - display: none; - flex-direction: column; - - @include media-breakpoint-up($sidenav-breakpoint-show) { - @include sidebar-visible; - } - - @if $sidenav-breakpoint-folded { - @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) { - @include sidebar-narrow; - } - } -} - -.sidebar-brand { - display: block; - text-align: center; - - line-height: $navbar-height; - width: $sidenav-width; - position: absolute; - top: 0; - left: 0; -} - -.sidebar-brand-logo { - height: 2rem; - - &-sm { - display: none; - } -} - -.sidebar-content { - padding: $sidenav-padding; - flex: 1; - display: flex; - flex-direction: column; - overflow-y: scroll; - @include scrollbar; - - .sidebar-brand + & { - margin-top: $navbar-height; - } -} - -/** -Sidebar menu - */ -.sidebar-nav { - margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding; - padding: 0; - list-style: none; - user-select: none; - color: $text-muted; - - ul { - margin: 0; - padding: 0; - list-style: none; - } -} - -.sidebar-nav-link { - padding: .5rem $sidenav-padding; - transition: .3s color, .3s background-color; - color: inherit; - display: flex; - align-items: center; - - .sidebar-nav-item .sidebar-nav-item & { - padding-left: add(1.5rem, $sidenav-padding); - } - - .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & { - padding-left: add(3rem, $sidenav-padding); - } - - &:hover { - background-color: rgba(#fff, .02); - text-decoration: none; - color: $body-color !important; - cursor: pointer !important; - } - - &.active { - opacity: 1; - color: $body-color !important; - box-shadow: inset 3px 0 $primary; - background-color: rgba(#fff, .01); - } - - .icon { - width: 1rem; - margin-right: .5rem; - } - - .badge { - margin-left: auto; - } -} - -.sidebar-nav-arrow { - display: block; - - margin-left: auto; - @include caret(right); - - &:after { - transition: .3s transform; - } - - .sidebar-nav-link[aria-expanded="true"] &:after { - transform: rotate(-45deg); - } -} - -.sidebar-subnav { -} - -.sidebar-nav-title { - @include subheader(false); - color: inherit; - opacity: .8; - padding: $sidenav-padding $sidenav-padding .5rem; - - &:not(:first-child) { - margin-top: .5rem; - } -} - -/** -Sidebar dark - */ -.sidebar-dark { - background: $sidenav-dark-bg; - color: $text-muted; - box-shadow: none; - - .sidebar-brand { - filter: brightness(0) invert(1); - } - - .sidebar-nav-link { - &:hover, - &.active { - color: $white !important; - } - } - - .sidebar-content { - @include scrollbar(true); - } -} - -/** -Right sidebar - */ -.sidebar-right { - left: auto; - right: 0; - box-shadow: inset 1px 0 $sidenav-border-color; - - + .content { - margin-left: 0; - margin-right: $sidenav-width; - - .navbar.fixed-top { - left: 0; - right: $sidenav-width; - } - } -} - -/** -Folded sidebar - */ -.sidebar-narrow { - @include sidebar-narrow; -} +////sidenav +// +// +//@mixin sidebar-narrow { +// width: $sidenav-width-narrow; +// +// .sidebar-brand { +// width: 100%; +// } +// +// .sidebar-brand-logo { +// &-sm { +// display: inline-block; +// } +// +// &-lg { +// display: none; +// } +// } +// +// .sidebar-content { +// padding: 0; +// overflow: visible; +// } +// +// .sidebar-nav { +// margin: 0; +// +// > .sidebar-nav-item { +// position: relative; +// white-space: nowrap; +// +// &:hover { +// background: $primary; +// width: $sidenav-width; +// +// > .sidebar-nav-link { +// color: #ffffff; +// +// > span { +// display: block; +// } +// +// .icon { +// margin-right: add(1rem, $sidenav-padding); +// } +// } +// +// .sidebar-subnav { +// display: block; +// +// .sidebar-nav-link { +// padding-left: $sidenav-padding; +// } +// } +// } +// +// > .sidebar-nav-link { +// min-height: $sidenav-folded-item-height; +// padding: 0 1rem !important; +// position: relative; +// +// .icon { +// margin: 0; +// width: 2rem; +// height: 1.125rem; +// } +// +// > span { +// display: none; +// } +// +// .badge { +// display: block; +// position: absolute; +// left: 2.5rem; +// top: 1rem; +// +// text-indent: -99999px; +// width: $badge-empty-size; +// height: $badge-empty-size; +// padding: 0; +// } +// } +// } +// } +// +// .sidebar-subnav { +// display: none; +// position: absolute; +// top: $sidenav-folded-item-height; +// left: $sidenav-width-narrow; +// right: 0; +// padding: .5rem 0; +// background: $dark; +// box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow; +// } +// +// .sidebar-nav-arrow { +// display: none !important; +// } +// +// .sidebar-nav-title { +// display: none; +// } +// +// + .content { +// margin-left: $sidenav-width-narrow; +// +// .navbar.fixed-top { +// left: $sidenav-width-narrow; +// } +// } +// +// &.sidebar-right { +// + .content { +// margin-left: 0; +// margin-right: $sidenav-width-narrow; +// +// .navbar.fixed-top { +// left: 0; +// right: $sidenav-width-narrow; +// } +// } +// } +// +// .hide-sidebar-narrow { +// display: none !important +// } +//} +// +//@mixin sidebar-visible { +// display: flex; +// +// + .content .navbar.fixed-top { +// left: $sidenav-width; +// } +// +// .hide-sidebar-visible, +// + .content .hide-sidebar-visible { +// display: none !important; +// } +//} +// +///** +//Wrapper +// */ +//.page { +// height: 100%; +// overflow: hidden; +// width: 100%; +//} +// +///** +//Content +// */ +//.content { +// overflow: hidden; +// min-height: 100vh; +// display: flex; +// flex-direction: column; +// +// .sidebar + & { +// margin-left: $sidenav-width; +// +// @if $sidenav-breakpoint-folded { +// @include media-breakpoint-down($sidenav-breakpoint-folded) { +// margin-left: $sidenav-width-narrow; +// } +// } +// +// @include media-breakpoint-down($sidenav-breakpoint-show) { +// margin-left: 0; +// padding-left: 0; +// padding-right: 0; +// } +// } +//} +// +//.content-page { +// flex: 1; +// display: flex; +// +// //@include media-breakpoint-up($cards-grid-breakpoint) { +// // padding-left: $cards-grid-gap / 2; +// // padding-right: $cards-grid-gap / 2; +// //} +// +// @media print { +// padding-top: 0 !important; +// } +//} +// +///** +//Sidebar +// */ +//.sidebar { +// width: $sidenav-width; +// position: fixed; +// z-index: $zindex-fixed; +// padding: 0; +// background: $sidenav-bg; +// box-shadow: inset -1px 0 $sidenav-border-color; +// top: 0; +// bottom: 0; +// display: none; +// flex-direction: column; +// +// @include media-breakpoint-up($sidenav-breakpoint-show) { +// @include sidebar-visible; +// } +// +// @if $sidenav-breakpoint-folded { +// @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) { +// @include sidebar-narrow; +// } +// } +//} +// +//.sidebar-brand { +// display: block; +// text-align: center; +// +// line-height: $navbar-height; +// width: $sidenav-width; +// position: absolute; +// top: 0; +// left: 0; +//} +// +//.sidebar-brand-logo { +// height: 2rem; +// +// &-sm { +// display: none; +// } +//} +// +//.sidebar-content { +// padding: $sidenav-padding; +// flex: 1; +// display: flex; +// flex-direction: column; +// overflow-y: scroll; +// @include scrollbar; +// +// .sidebar-brand + & { +// margin-top: $navbar-height; +// } +//} +// +///** +//Sidebar menu +// */ +//.sidebar-nav { +// margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding; +// padding: 0; +// list-style: none; +// user-select: none; +// color: $text-muted; +// +// ul { +// margin: 0; +// padding: 0; +// list-style: none; +// } +//} +// +//.sidebar-nav-link { +// padding: .5rem $sidenav-padding; +// transition: .3s color, .3s background-color; +// color: inherit; +// display: flex; +// align-items: center; +// +// .sidebar-nav-item .sidebar-nav-item & { +// padding-left: add(1.5rem, $sidenav-padding); +// } +// +// .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & { +// padding-left: add(3rem, $sidenav-padding); +// } +// +// &:hover { +// background-color: rgba(#fff, .02); +// text-decoration: none; +// color: $body-color !important; +// cursor: pointer !important; +// } +// +// &.active { +// opacity: 1; +// color: $body-color !important; +// box-shadow: inset 3px 0 $primary; +// background-color: rgba(#fff, .01); +// } +// +// .icon { +// width: 1rem; +// margin-right: .5rem; +// } +// +// .badge { +// margin-left: auto; +// } +//} +// +//.sidebar-nav-arrow { +// display: block; +// +// margin-left: auto; +// @include caret(right); +// +// &:after { +// transition: .3s transform; +// } +// +// .sidebar-nav-link[aria-expanded="true"] &:after { +// transform: rotate(-45deg); +// } +//} +// +//.sidebar-subnav { +//} +// +//.sidebar-nav-title { +// @include subheader(false); +// color: inherit; +// opacity: .8; +// padding: $sidenav-padding $sidenav-padding .5rem; +// +// &:not(:first-child) { +// margin-top: .5rem; +// } +//} +// +///** +//Sidebar dark +// */ +//.sidebar-dark { +// background: $sidenav-dark-bg; +// color: $text-muted; +// box-shadow: none; +// +// .sidebar-brand { +// filter: brightness(0) invert(1); +// } +// +// .sidebar-nav-link { +// &:hover, +// &.active { +// color: $white !important; +// } +// } +// +// .sidebar-content { +// @include scrollbar(true); +// } +//} +// +///** +//Right sidebar +// */ +//.sidebar-right { +// left: auto; +// right: 0; +// box-shadow: inset 1px 0 $sidenav-border-color; +// +// + .content { +// margin-left: 0; +// margin-right: $sidenav-width; +// +// .navbar.fixed-top { +// left: 0; +// right: $sidenav-width; +// } +// } +//} +// +///** +//Folded sidebar +// */ +//.sidebar-narrow { +// @include sidebar-narrow; +//} diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss new file mode 100644 index 000000000..e23d42ac4 --- /dev/null +++ b/scss/layout/_mainnav.scss @@ -0,0 +1,89 @@ +@mixin navbar-vertical { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: $sidenav-width; + z-index: $zindex-fixed; + min-height: auto; + align-items: start; + + >.container { + flex-direction: column; + } + + ~ .navbar, + ~ .content { + margin-left: $sidenav-width; + } + + &.navbar-vertical-narrow { + width: $sidenav-width-narrow; + + ~ .navbar, + ~ .content { + margin-left: $sidenav-width-narrow; + } + } + + &.navbar-right { + left: auto; + right: 0; + + ~ .navbar, + ~ .content { + margin-left: 0; + margin-right: $sidenav-width; + } + + &.navbar-vertical-narrow { + ~ .navbar, + ~ .content { + margin-right: $sidenav-width-narrow; + } + } + } +} + +.page { + display: flex; + flex-direction: column; +} + +.content { + padding-top: map-get($spacers, 4); + padding-bottom: map-get($spacers, 4); + + @include media-breakpoint-up(xl) { + padding-left: .5rem; + padding-right: .5rem; + } +} + +.navbar { + min-height: $navbar-height; +} + +.navbar-light { + background: $white; + box-shadow: 0 0 0 1px $border-color; +} + +.navbar-dark { + background: $sidenav-dark-bg; + color: $sidenav-dark-color; +} + +.navbar-vertical { + @each $breakpoint, $breakpoint-max-width in $grid-breakpoints { + @include media-breakpoint-up($breakpoint) { + &.navbar-expand-#{$breakpoint} { + @include navbar-vertical; + } + } + } +} + +.navbar-secondary { + order: -1; +} \ No newline at end of file diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index 3ad08be8f..a949058d1 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -1,180 +1,180 @@ -/* -Navbar - */ -.navbar { - - &, .navbar-dark { - min-height: $navbar-height; - - &.fixed-top { - + .content-page { - padding-top: $navbar-height; - } - - + .navbar:not(.fixed-top) { - margin-top: $navbar-height; - } - - + .navbar.fixed-top { - top: $navbar-height; - - + .content-page { - padding-top: $navbar-height * 2; - } - } - } - } - - @include media-breakpoint-up($cards-grid-breakpoint) { - padding-left: $cards-grid-gap / 2; - padding-right: $cards-grid-gap / 2; - } -} - -.navbar-collapse-absolute { - @each $breakpoint, $width in $grid-breakpoints { - @at-root .navbar-expand-#{$breakpoint} & { - position: absolute; - background: inherit; - z-index: $zindex-sticky; - left: 0; - right: 0; - - @include media-breakpoint-up($breakpoint) { - position: static; - } - } - } -} - -/** -navbar toggler - */ -.navbar-toggler { - border: 0; - font-size: $navbar-toggler-font-size; - width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2); - height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2); - margin: $navbar-toggler-margin; - position: relative; -} - - -.navbar-toggler-icon { - $time: $navbar-toggler-transform-time / 2; - - background-image: none !important; - position: absolute; - width: $navbar-toggler-size; - height: $navbar-toggler-item-height; - border-radius: 3px; - - left: 50%; - top: 50%; - margin-left: -($navbar-toggler-size / 2); - margin-top: -($navbar-toggler-item-height / 2); - - background: currentColor; - transform-origin: center; - transition: transform $time, top $time $time, bottom $time $time; - - &:before, - &:after { - content: ''; - background: inherit; - position: absolute; - height: inherit; - width: inherit; - left: 0; - border-radius: inherit; - transition: inherit; - } - - &:before { - top: $navbar-toggler-item-spacing; - } - - &:after { - bottom: $navbar-toggler-item-spacing; - } - - .navbar-toggler[aria-expanded="true"] & { - transform: rotate(45deg); - transition: top $time, bottom $time, transform $time $time, opacity $time; - - &:before { - top: 0; - transform: rotate(-90deg); - } - - &:after { - bottom: 0; - opacity: 0; - } - } -} - -/** -navbar with border -*/ -.navbar-border { - box-shadow: inset 0 -1px 0 0px $navbar-border-color; -} - -/** -Navbar logo - */ -.navbar-brand-logo { - height: 2rem; -} - -.navbar-nav { - margin-right: -($navbar-nav-link-padding-x); - margin-left: -($navbar-nav-link-padding-x); - - .nav-link { - padding-left: $navbar-nav-link-padding-x; - padding-right: $navbar-nav-link-padding-x; - } - - @each $breakpoint, $width in $grid-breakpoints { - @at-root .navbar-expand-#{$breakpoint} & { - @include media-breakpoint-up($breakpoint) { - .nav-item:hover, - .dropright:hover { - > .dropdown-menu { - display: block; - } - } - } - - @include media-breakpoint-down($breakpoint) { - .dropdown-menu { - box-shadow: none; - border: 0; - padding: 0; - } - - .dropdown-item { - padding-left: add($navbar-nav-link-padding-x, 19px); - padding-right: 0; - } - } - } - } - - .dropdown-menu { - .dropdown, - .dropright { - .dropdown-toggle:after { - margin-left: auto; - } - } - } -} - -.navbar-brand { - padding: 0; - line-height: 1; -} - +///* +//Navbar +// */ +//.navbar { +// +// &, .navbar-dark { +// min-height: $navbar-height; +// +// &.fixed-top { +// + .content-page { +// padding-top: $navbar-height; +// } +// +// + .navbar:not(.fixed-top) { +// margin-top: $navbar-height; +// } +// +// + .navbar.fixed-top { +// top: $navbar-height; +// +// + .content-page { +// padding-top: $navbar-height * 2; +// } +// } +// } +// } +// +// @include media-breakpoint-up($cards-grid-breakpoint) { +// padding-left: $cards-grid-gap / 2; +// padding-right: $cards-grid-gap / 2; +// } +//} +// +//.navbar-collapse-absolute { +// @each $breakpoint, $width in $grid-breakpoints { +// @at-root .navbar-expand-#{$breakpoint} & { +// position: absolute; +// background: inherit; +// z-index: $zindex-sticky; +// left: 0; +// right: 0; +// +// @include media-breakpoint-up($breakpoint) { +// position: static; +// } +// } +// } +//} +// +///** +//navbar toggler +// */ +//.navbar-toggler { +// border: 0; +// font-size: $navbar-toggler-font-size; +// width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2); +// height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2); +// margin: $navbar-toggler-margin; +// position: relative; +//} +// +// +//.navbar-toggler-icon { +// $time: $navbar-toggler-transform-time / 2; +// +// background-image: none !important; +// position: absolute; +// width: $navbar-toggler-size; +// height: $navbar-toggler-item-height; +// border-radius: 3px; +// +// left: 50%; +// top: 50%; +// margin-left: -($navbar-toggler-size / 2); +// margin-top: -($navbar-toggler-item-height / 2); +// +// background: currentColor; +// transform-origin: center; +// transition: transform $time, top $time $time, bottom $time $time; +// +// &:before, +// &:after { +// content: ''; +// background: inherit; +// position: absolute; +// height: inherit; +// width: inherit; +// left: 0; +// border-radius: inherit; +// transition: inherit; +// } +// +// &:before { +// top: $navbar-toggler-item-spacing; +// } +// +// &:after { +// bottom: $navbar-toggler-item-spacing; +// } +// +// .navbar-toggler[aria-expanded="true"] & { +// transform: rotate(45deg); +// transition: top $time, bottom $time, transform $time $time, opacity $time; +// +// &:before { +// top: 0; +// transform: rotate(-90deg); +// } +// +// &:after { +// bottom: 0; +// opacity: 0; +// } +// } +//} +// +///** +//navbar with border +//*/ +//.navbar-border { +// box-shadow: inset 0 -1px 0 0px $navbar-border-color; +//} +// +///** +//Navbar logo +// */ +//.navbar-brand-logo { +// height: 2rem; +//} +// +//.navbar-nav { +// margin-right: -($navbar-nav-link-padding-x); +// margin-left: -($navbar-nav-link-padding-x); +// +// .nav-link { +// padding-left: $navbar-nav-link-padding-x; +// padding-right: $navbar-nav-link-padding-x; +// } +// +// @each $breakpoint, $width in $grid-breakpoints { +// @at-root .navbar-expand-#{$breakpoint} & { +// @include media-breakpoint-up($breakpoint) { +// .nav-item:hover, +// .dropright:hover { +// > .dropdown-menu { +// display: block; +// } +// } +// } +// +// @include media-breakpoint-down($breakpoint) { +// .dropdown-menu { +// box-shadow: none; +// border: 0; +// padding: 0; +// } +// +// .dropdown-item { +// padding-left: add($navbar-nav-link-padding-x, 19px); +// padding-right: 0; +// } +// } +// } +// } +// +// .dropdown-menu { +// .dropdown, +// .dropright { +// .dropdown-toggle:after { +// margin-left: auto; +// } +// } +// } +//} +// +//.navbar-brand { +// padding: 0; +// line-height: 1; +//} +// diff --git a/scss/layout/_page.scss b/scss/layout/_page.scss index 6ab18867f..d1f2fa57b 100644 --- a/scss/layout/_page.scss +++ b/scss/layout/_page.scss @@ -1,4 +1,4 @@ -.page-title-box { +.page-header { display: flex; align-items: center; min-height: 2.25rem; diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 9c8a362cc..1a3daa508 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -92,7 +92,7 @@ .btn-list { display: flex; flex-wrap: wrap; - margin-bottom: -.5rem; + margin-bottom: -.5rem !important; margin-right: -.5rem; > .btn, diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 382ca46eb..65687d686 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -185,6 +185,10 @@ } .card-body { + >:last-child:not { + margin-bottom: 0; + } + .card-sm & { padding: map-get($spacers, 3); }