diff --git a/.gitignore b/.gitignore index 45b829f..7084d00 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ -dist/*.map \ No newline at end of file +mix-manifest.json +package-lock.json \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..9cf9495 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/README.md b/README.md index a95697a..a282632 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A style guide (CSS and Sass) providing a convenient base for styling common sidebar/drawer elements like menus, brand, etc. -This package complements the [drawer](https://github.com/themekit/material-design-kit/tree/master/src/drawer) component from [material-design-kit](https://github.com/themekit/material-design-kit). +This package complements the [drawer](https://github.com/FrontendMatter/material-design-kit/tree/master/src/drawer) component from [material-design-kit](https://github.com/FrontendMatter/material-design-kit). ## Installation @@ -47,7 +47,7 @@ There are two base skin variants that you get out of the box for making a sideba -Note that none of the skin classes include a background color, so the following example assumes you are adding the background with the additional `.bg-primary` and `.bg-white` custom classes. +Note that none of the skin classes include a background color, so the following example assumes you are adding the background with additional custom classes (i.e `.bg-primary` and `.bg-white` from Bootstrap). ```html @@ -155,13 +155,18 @@ You can customize sidebar menus with the following Sass variables. $sm-spacing-x Defines the horizontal spacing for sidebar menus - $sidebar-spacing-x + 0 $sm-spacing-y Defines the vertical spacing for sidebar menus $sidebar-spacing-y + + $sm-inner-spacing-x + Defines the horizontal spacing between button elements such as icons and badges + 5px + @@ -191,6 +196,11 @@ You can customize sidebar menus with the following Sass variables. Defines the height in px for .sidebar-menu-button 42px + + $sm-button-spacing-x + Defines the horizontal spacing for sidebar menu buttons + $sidebar-spacing-x + $sm-active-button-font-weight Defines the font weight for .sidebar-menu-button when using li.sidebar-menu-item.active @@ -215,6 +225,10 @@ Add icons to sidebar menus. .sidebar-menu-icon The sidebar menu icon + + .sidebar-menu-icon--left or .sidebar-menu-icon--right + Add spacing between the menu icon and text + .material-icons Required on .sidebar-menu-icon elements when using Material icons @@ -240,7 +254,7 @@ To add an icon to the sidebar menu button, add an element using the `.sidebar-me

• - home + home Menu button text
@@ -264,9 +278,9 @@ You can customize sidebar menu icons with the following Sass variables. 24px - $sm-icon-margin - Defines the margin for sidebar menu icons - $sm-spacing-x * 0.4 + $sm-icon-spacing-x + Defines the horizontal spacing between the sidebar menu icons and text when using .sidebar-menu-icon--left or .sidebar-menu-icon--right modifiers + $sm-inner-spacing-x @@ -302,10 +316,6 @@ You can modify the style of sidebar menus and sidebar submenus by using CSS help .sm-active-button-bg Applies a background color to active sidebar menu items - - .sm-icons-right - Aligns the sidebar menu icons to the right - .sm-icons-block Wrap the sidebar menu icons into a square block with background color @@ -333,12 +343,12 @@ You can customize sidebar utilities with the following Sass variables. $sm-condensed-button-height Defines the height in px for sidebar menu buttons when using .sm-condensed - $sm-button-height - ($sm-button-height/4) + $sm-button-height * 0.75 $ssm-condensed-button-height Defines the height in px for sidebar submenu buttons when using .sm-condensed - $ssm-button-height - ($ssm-button-height/4) + $ssm-button-height * 0.75 @@ -430,7 +440,7 @@ You can customize sidebar utilities with the following Sass variables. $sm-light-active-button-bg Defines the background color for active sidebar menu buttons when using the .sidebar-light skin - $brand-primary + $primary $sm-light-activebuttonbg-button-color @@ -482,19 +492,19 @@ The following example is using [Material icons](https://design.google.com/icons/ ```html -
-
• - - home - Menu button - -
-
• - - menu - Another button - -
+
+
• + + home + Menu button + +
+
• + + menu + Another button + +
``` @@ -535,6 +545,7 @@ To create a basic sidebar submenu: - add `li` submenu items using the `.sidebar-menu-item` class - add `a` submenu buttons using the `.sidebar-menu-button` class - add the `.open` class to the parent `.sidebar-menu-item` element to display a submenu +- add the optional `.sidebar-menu-toggle-icon` indicator element to the top level toggle button ```html @@ -542,7 +553,10 @@ To create a basic sidebar submenu:
• - Dashboard + + Dashboard + +
  @@ -557,7 +571,10 @@ To create a basic sidebar submenu:
  • - Reports + + Reports + +
    diff --git a/dist/sidebar.css b/dist/sidebar.css index 7966957..5fa4ab1 100644 --- a/dist/sidebar.css +++ b/dist/sidebar.css @@ -1,461 +1 @@ -@charset "UTF-8"; -/** - * Get a unitless number - * @param {Number} $number Number to remove unit from - * @return {Number} Unitless number - */ -.sidebar-p-a { - padding: 18.75px 18.75px; } - -.sidebar-p-x { - padding-left: 18.75px; - padding-right: 18.75px; } - -.sidebar-p-y { - padding-top: 18.75px; - padding-bottom: 18.75px; } - -.sidebar-p-t { - padding-top: 18.75px; } - -.sidebar-p-b { - padding-bottom: 18.75px; } - -.sidebar-p-l { - padding-left: 18.75px; - padding-right: 18.75px; } - -.sidebar-p-r { - padding-right: 18.75px; } - -.sidebar-m-a { - margin: 18.75px 18.75px; } - -.sidebar-m-x { - margin-left: 18.75px; - margin-right: 18.75px; } - -.sidebar-m-y { - margin-top: 18.75px; - margin-bottom: 18.75px; } - -.sidebar-m-t { - margin-top: 18.75px; } - -.sidebar-m-b { - margin-bottom: 18.75px; } - -.sidebar-m-l { - margin-left: 18.75px; } - -.sidebar-m-r { - margin-right: 18.75px; } - -.sidebar-b-a { - border: 1px solid transparent; } - -.sidebar-b-x { - border-left: 1px solid transparent; - border-right: 1px solid transparent; } - -.sidebar-b-y { - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; } - -.sidebar-b-t { - border-top: 1px solid transparent; } - -.sidebar-b-b { - border-bottom: 1px solid transparent; } - -.sidebar-block { - padding-left: 18.75px; - padding-right: 18.75px; - margin-bottom: 18.75px; } - -.sidebar > p, -.sidebar > .sidebar-text { - padding-left: 18.75px; - padding-right: 18.75px; - margin-bottom: 18.75px; } - -.sidebar-brand { - font-weight: 500; - font-size: 1.3rem; - margin-bottom: 9.375px; - display: inline-block; } - .sidebar-brand:hover { - text-decoration: none; } - .sidebar-brand i.material-icons { - margin-top: -3px; } - -.sidebar-brand-header { - height: 56px; - line-height: 56px; - padding-left: 18.75px; - padding-right: 18.75px; - margin-bottom: 18.75px; - display: block; - width: 100%; } - -.sidebar-brand-border { - border-bottom: 1px solid transparent; } - -.sidebar-heading { - font-weight: 500; - font-size: 0.9rem; - font-family: inherit; - text-transform: uppercase; - letter-spacing: normal; - line-height: normal; } - -.sidebar > .sidebar-heading { - padding-left: 18.75px; - padding-right: 18.75px; - margin-bottom: 18.75px; } - -.sidebar-label { - display: inline-block; - padding: .25em .4em; - font-size: 75%; - font-weight: 500; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: .25rem; } - -.sidebar-light { - color: rgba(0, 0, 0, 0.54); - background: #ffffff; } - .sidebar-light.sidebar-left { - border-right-width: 1px; - border-right-style: solid; - border-right-color: #e5e5e5; } - .sidebar-light.sidebar-right { - border-left-width: 1px; - border-left-style: solid; - border-left-color: #e5e5e5; } - .sidebar-light .sidebar-link { - color: inherit; } - .sidebar-light [class*="sidebar-b-"] { - border-color: #e5e5e5; } - .sidebar-light .sidebar-text, .sidebar-light p { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .sidebar-heading, .sidebar-light .sidebar-heading > a { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light hr { - border-color: #e5e5e5; } - .sidebar-light .sidebar-brand { - color: #0275d8; } - .sidebar-light .sidebar-brand-bg { - background: rgba(0, 0, 0, 0.07); } - .sidebar-light .sidebar-brand-border { - border-color: #e5e5e5; } - .sidebar-light .sidebar-menu-button { - color: inherit; } - .sidebar-light .sidebar-menu-button:not(:only-child):before { - color: rgba(0, 0, 0, 0.24); } - .sidebar-light .sidebar-menu-icon { - color: inherit; } - .sidebar-light .sidebar-menu-label { - background: rgba(0, 0, 0, 0.3); - color: #ffffff; } - .sidebar-light .sidebar-menu-button:hover { - color: #212121; - background: rgba(0, 0, 0, 0.03); } - .sidebar-light .sidebar-menu-button:hover .sidebar-menu-icon { - color: inherit; } - .sidebar-light .sidebar-submenu .sidebar-menu-button { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .sidebar-submenu .sidebar-menu-icon { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .active > .sidebar-menu-button { - color: #0275d8; } - .sidebar-light .active > .sidebar-menu-button .sidebar-menu-icon { - color: #0275d8; } - .sidebar-light .open { - background: rgba(0, 0, 0, 0.04); } - .sidebar-light .open > .sidebar-menu-button:not(:only-child):before { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .open > .sidebar-menu-button { - background: transparent; - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .open > .sidebar-menu-button .sidebar-menu-icon { - color: rgba(0, 0, 0, 0.54); } - .sidebar-light .sm-bordered { - border-color: #e5e5e5; } - .sidebar-light .sm-bordered.sidebar-submenu { - border-color: #e5e5e5; } - .sidebar-light .sm-item-bordered > .sidebar-menu-item { - border-color: #e5e5e5; } - .sidebar-light .sm-item-bordered.sidebar-submenu > .sidebar-menu-item { - border-color: #e5e5e5; } - .sidebar-light .sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - background: rgba(0, 0, 0, 0.12); - color: inherit; } - .sidebar-light .sm-icons-block > .sidebar-menu-item.open > .sidebar-menu-button .sidebar-menu-icon { - color: rgba(0, 0, 0, 0.54); - background: rgba(0, 0, 0, 0.12); } - .sidebar-light .sm-icons-block > .sidebar-menu-item.active > .sidebar-menu-button .sidebar-menu-icon { - background: #0275d8; - color: #fff; } - .sidebar-light .sm-active-button-bg > .active > .sidebar-menu-button { - background: #0275d8; - color: #fff; } - .sidebar-light .sm-active-button-bg > .active > .sidebar-menu-button .sidebar-menu-icon { - color: #fff; } - .sidebar-light .sm-active-button-bg > .active > .sidebar-menu-button:not(:only-child):before { - color: #fff; } - .sidebar-light .sm-icons-block.sm-active-button-bg > .active > .sidebar-menu-button .sidebar-menu-icon { - background: #0275d8; } - -.sidebar-dark { - color: rgba(255, 255, 255, 0.54); - background: transparent; } - .sidebar-dark.sidebar-left { - border-right-width: 0; - border-right-style: solid; - border-right-color: transparent; } - .sidebar-dark.sidebar-right { - border-left-width: 0; - border-left-style: solid; - border-left-color: transparent; } - .sidebar-dark .sidebar-link { - color: #fff; } - .sidebar-dark [class*="sidebar-b-"] { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sidebar-text, .sidebar-dark p { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sidebar-heading, .sidebar-dark .sidebar-heading > a { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark hr { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sidebar-brand { - color: #ffffff; } - .sidebar-dark .sidebar-brand-bg { - background: rgba(0, 0, 0, 0.12); } - .sidebar-dark .sidebar-brand-border { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sidebar-label { - color: #0275d8; - background: #ffffff; } - .sidebar-dark .sidebar-menu-button { - color: #fff; } - .sidebar-dark .sidebar-menu-button:not(:only-child):before { - color: #fff; } - .sidebar-dark .sidebar-menu-icon { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sidebar-menu-label { - background: rgba(0, 0, 0, 0.3); - color: #ffffff; } - .sidebar-dark .sidebar-menu-button:hover { - color: #fff; - background: rgba(255, 255, 255, 0.12); } - .sidebar-dark .sidebar-menu-button:hover .sidebar-menu-icon { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sidebar-submenu .sidebar-menu-button { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sidebar-submenu .sidebar-menu-icon { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .active > .sidebar-menu-button { - color: #fff; } - .sidebar-dark .active > .sidebar-menu-button .sidebar-menu-icon { - color: #fff; } - .sidebar-dark .open { - background: rgba(0, 0, 0, 0.04); } - .sidebar-dark .open > .sidebar-menu-button:not(:only-child):before { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .open > .sidebar-menu-button { - background: transparent; - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .open > .sidebar-menu-button .sidebar-menu-icon { - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sm-bordered { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sm-bordered.sidebar-submenu { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sm-item-bordered > .sidebar-menu-item { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sm-item-bordered.sidebar-submenu > .sidebar-menu-item { - border-color: rgba(0, 0, 0, 0.15); } - .sidebar-dark .sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - background: rgba(0, 0, 0, 0.12); - color: rgba(255, 255, 255, 0.54); } - .sidebar-dark .sm-icons-block > .sidebar-menu-item.open > .sidebar-menu-button .sidebar-menu-icon { - color: rgba(255, 255, 255, 0.54); - background: rgba(0, 0, 0, 0.12); } - .sidebar-dark .sm-icons-block > .sidebar-menu-item.active > .sidebar-menu-button .sidebar-menu-icon { - background: rgba(255, 255, 255, 0.12); - color: #fff; } - .sidebar-dark .sm-active-button-bg > .active > .sidebar-menu-button { - background: rgba(255, 255, 255, 0.12); - color: #fff; } - .sidebar-dark .sm-active-button-bg > .active > .sidebar-menu-button .sidebar-menu-icon { - color: #fff; } - .sidebar-dark .sm-active-button-bg > .active > .sidebar-menu-button:not(:only-child):before { - color: #fff; } - .sidebar-dark .sm-icons-block.sm-active-button-bg > .active > .sidebar-menu-button .sidebar-menu-icon { - background: rgba(255, 255, 255, 0.12); } - -.sidebar-menu { - margin-bottom: 18.75px; - padding-left: 0; - padding-right: 0; - list-style: none; } - -.sidebar-menu-item { - position: relative; - overflow: hidden; } - -.sidebar-menu-button { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - font-weight: 400; - line-height: 42px; - padding-left: 18.75px; - font-size: 15px; } - .sidebar-menu-button, .sidebar-menu-button:hover, .sidebar-menu-button:focus { - text-decoration: none; } - -.active > .sidebar-menu-button { - font-weight: 400; } - -.sidebar-menu-button:not(:only-child):before { - font-family: "Material Icons"; - content: ""; - position: absolute; - right: 18.75px; - display: block; - font-size: 15px; } - -.open > .sidebar-menu-button:not(:only-child):before { - content: ""; } - -.sidebar-menu-icon { - vertical-align: middle; - width: 31.5px; - font-size: 24px; - display: inline-block; - line-height: normal; - position: relative; } - .sidebar-menu-icon.material-icons { - top: -1px; } - -.sidebar-menu-label { - position: absolute; - right: 18.75px; - margin-top: 13px; - padding: 0.2rem 0.3rem; - font-size: 0.75rem; } - -.sidebar-menu-button:not(:only-child) .sidebar-menu-label { - right: 42.75px; } - -.sidebar-submenu { - display: none; - list-style: none; - margin: 0; - padding: 0; } - .open > .sidebar-submenu { - display: block; } - .sidebar-submenu .sidebar-menu-button { - line-height: 42px; - font-size: 15px; } - .sidebar-submenu .sidebar-menu-icon { - top: -1px; - position: relative; - font-size: 24px; - width: 36px; } - -.sm-icons-bullet .sidebar-menu-icon { - font-size: .68rem !important; - text-align: center; } - -.sm-condensed > .sidebar-menu-item > .sidebar-menu-button { - height: 31.5px; - line-height: 31.5px; } - .sm-condensed > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-label { - margin-top: 8px; } - -.sm-condensed.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button { - height: 31.5px; - line-height: 31.5px; } - .sm-condensed.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-label { - margin-top: 8px; } - -.sm-bordered { - border-bottom-style: solid; - border-bottom-width: 1px; } - -.sm-item-bordered > .sidebar-menu-item { - border-bottom-style: solid; - border-bottom-width: 1px; } - -.sm-item-bordered > .sidebar-menu-item:last-of-type { - border-bottom: none; } - -.sm-item-bordered .sidebar-submenu { - border-bottom: none; } - -.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - text-align: center; - display: inline-block; - height: 30px; - line-height: 30px; - width: 30px; - margin-right: 7.5px; } - -.sm-icons-block.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - height: 30px; - line-height: 30px; - width: 30px; } - -.sm-icons-right > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - text-align: right; - position: absolute; - right: 18.75px; - top: 9px; - margin-right: 0; } - -.sm-icons-right > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-label { - right: 47.75px; } - -.sm-icons-right > .sidebar-menu-item > .sidebar-menu-button:not(:only-child):before { - right: 47.75px; } - -.sm-icons-right > .sidebar-menu-item > .sidebar-menu-button:not(:only-child) .sidebar-menu-label { - right: 67.75px; } - -.sm-icons-right.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: 9px; } - -.sm-icons-right.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - text-align: center; - top: 6px; } - -.sm-icons-right.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-label { - right: 53.75px; } - -.sm-icons-right.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button:not(:only-child):before { - right: 53.75px; } - -.sm-icons-right.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button:not(:only-child) .sidebar-menu-label { - right: 73.75px; } - -.sm-icons-right.sm-icons-block.sm-condensed > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: 0.75px; } - -.sm-icons-right.sm-icons-block.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: 6px; } - -.sm-icons-right.sm-icons-block.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-label { - right: 53.75px; } - -.sm-icons-right.sm-condensed > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: 3.75px; } - -.sm-indent > .sidebar-menu-item .sidebar-menu-button { - padding-left: 37.5px; } +.sidebar-p-a{padding:18.75px}.sidebar-p-x{padding-left:18.75px;padding-right:18.75px}.sidebar-p-y{padding-bottom:18.75px}.sidebar-p-t,.sidebar-p-y{padding-top:18.75px}.sidebar-p-b{padding-bottom:18.75px}.sidebar-p-l{padding-left:18.75px}.sidebar-p-l,.sidebar-p-r{padding-right:18.75px}.sidebar-m-a{margin:18.75px}.sidebar-m-x{margin-left:18.75px;margin-right:18.75px}.sidebar-m-y{margin-bottom:18.75px}.sidebar-m-t,.sidebar-m-y{margin-top:18.75px}.sidebar-m-b{margin-bottom:18.75px}.sidebar-m-l{margin-left:18.75px}.sidebar-m-r{margin-right:18.75px}.sidebar-b-a{border:1px solid transparent}.sidebar-b-x{border-left:1px solid transparent;border-right:1px solid transparent}.sidebar-b-y{border-bottom:1px solid transparent}.sidebar-b-t,.sidebar-b-y{border-top:1px solid transparent}.sidebar-b-b{border-bottom:1px solid transparent}.sidebar-block,.sidebar>.sidebar-text,.sidebar>p{padding-left:18.75px;padding-right:18.75px;margin-bottom:18.75px}.sidebar-brand{font-weight:500;font-size:1.3rem;margin-bottom:9.375px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sidebar-brand:hover{text-decoration:none}.sidebar-brand-icon{margin-right:9.375px}.sidebar-brand-header{height:56px;line-height:56px;padding-left:18.75px;padding-right:18.75px;margin-bottom:18.75px;width:100%}.sidebar-brand-border{border-bottom:1px solid transparent}.sidebar-heading{font-weight:500;font-size:.9rem;font-family:inherit;text-transform:uppercase;letter-spacing:normal;line-height:normal;padding-left:18.75px;padding-right:18.75px;margin-bottom:18.75px}.sidebar-badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:500;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.sidebar-light{color:rgba(0,0,0,.54);background:#fff}.sidebar-light.sidebar-left{border-right-width:1px;border-right-style:solid;border-right-color:#e5e5e5}.sidebar-light.sidebar-right{border-left-width:1px;border-left-style:solid;border-left-color:#e5e5e5}.sidebar-light .sidebar-link{color:inherit}.sidebar-light [class*=sidebar-b-]{border-color:#e5e5e5}.sidebar-light .sidebar-heading,.sidebar-light .sidebar-heading>a,.sidebar-light .sidebar-text,.sidebar-light p{color:rgba(0,0,0,.54)}.sidebar-light hr{border-color:#e5e5e5}.sidebar-light .sidebar-brand{color:#0275d8}.sidebar-light .sidebar-brand-bg{background:rgba(0,0,0,.07)}.sidebar-light .sidebar-brand-border{border-color:#e5e5e5}.sidebar-light .sidebar-menu-button{color:inherit}.sidebar-light .sidebar-menu-toggle-icon{color:rgba(0,0,0,.24)}.sidebar-light .sidebar-menu-icon{color:inherit}.sidebar-light .sidebar-menu-label{background:rgba(0,0,0,.3);color:#fff}.sidebar-light .sidebar-menu-button:hover{color:#212121;background:rgba(0,0,0,.03)}.sidebar-light .sidebar-menu-button:hover .sidebar-menu-icon,.sidebar-light .sidebar-menu-button:hover .sidebar-menu-toggle-icon{color:inherit}.sidebar-light .open{background:rgba(0,0,0,.04)}.sidebar-light .open>.sidebar-menu-button .sidebar-menu-toggle-icon{color:rgba(0,0,0,.54)}.sidebar-light .open>.sidebar-menu-button{background:transparent;color:rgba(0,0,0,.54)}.sidebar-light .open>.sidebar-menu-button .sidebar-menu-icon{color:rgba(0,0,0,.54)}.sidebar-light .active>.sidebar-menu-button,.sidebar-light .active>.sidebar-menu-button .sidebar-menu-icon{color:#0275d8}.sidebar-light .sidebar-submenu .sidebar-menu-button,.sidebar-light .sidebar-submenu .sidebar-menu-icon{color:rgba(0,0,0,.54)}.sidebar-light .sidebar-submenu .sidebar-menu-button:hover,.sidebar-light .sidebar-submenu .sidebar-menu-button:hover .sidebar-menu-icon{color:#212121}.sidebar-light .sidebar-submenu .active>.sidebar-menu-button,.sidebar-light .sidebar-submenu .active>.sidebar-menu-button .sidebar-menu-icon{color:#0275d8}.sidebar-light .sm-bordered,.sidebar-light .sm-bordered.sidebar-submenu,.sidebar-light .sm-item-bordered.sidebar-submenu>.sidebar-menu-item,.sidebar-light .sm-item-bordered>.sidebar-menu-item{border-color:#e5e5e5}.sidebar-light .sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{background:rgba(0,0,0,.12);color:inherit}.sidebar-light .sm-icons-block>.sidebar-menu-item.open>.sidebar-menu-button .sidebar-menu-icon{color:rgba(0,0,0,.54);background:rgba(0,0,0,.12)}.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button,.sidebar-light .sm-icons-block>.sidebar-menu-item.active>.sidebar-menu-button .sidebar-menu-icon{background:#0275d8;color:#fff}.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon,.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-toggle-icon{color:#fff}.sidebar-light .sm-icons-block.sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon{background:#0275d8}.sidebar-dark{color:hsla(0,0%,100%,.54);background:transparent}.sidebar-dark.sidebar-left{border-right-width:1px;border-right-style:solid;border-right-color:rgba(0,0,0,.15)}.sidebar-dark.sidebar-right{border-left-width:1px;border-left-style:solid;border-left-color:rgba(0,0,0,.15)}.sidebar-dark .sidebar-link{color:#fff}.sidebar-dark [class*=sidebar-b-]{border-color:rgba(0,0,0,.15)}.sidebar-dark .sidebar-heading,.sidebar-dark .sidebar-heading>a,.sidebar-dark .sidebar-text,.sidebar-dark p{color:hsla(0,0%,100%,.54)}.sidebar-dark hr{border-color:rgba(0,0,0,.15)}.sidebar-dark .sidebar-brand{color:#fff}.sidebar-dark .sidebar-brand-bg{background:rgba(0,0,0,.12)}.sidebar-dark .sidebar-brand-border{border-color:rgba(0,0,0,.15)}.sidebar-dark .sidebar-menu-button,.sidebar-dark .sidebar-menu-toggle-icon{color:#fff}.sidebar-dark .sidebar-menu-icon{color:hsla(0,0%,100%,.54)}.sidebar-dark .sidebar-menu-button:hover{color:#fff;background:hsla(0,0%,100%,.12)}.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-icon,.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-toggle-icon{color:hsla(0,0%,100%,.54)}.sidebar-dark .open{background:rgba(0,0,0,.04)}.sidebar-dark .open>.sidebar-menu-button .sidebar-menu-toggle-icon{color:hsla(0,0%,100%,.54)}.sidebar-dark .open>.sidebar-menu-button{background:transparent;color:hsla(0,0%,100%,.54)}.sidebar-dark .open>.sidebar-menu-button .sidebar-menu-icon{color:hsla(0,0%,100%,.54)}.sidebar-dark .active>.sidebar-menu-button,.sidebar-dark .active>.sidebar-menu-button .sidebar-menu-icon{color:#fff}.sidebar-dark .sidebar-submenu .sidebar-menu-button,.sidebar-dark .sidebar-submenu .sidebar-menu-icon{color:hsla(0,0%,100%,.54)}.sidebar-dark .sidebar-submenu .active>.sidebar-menu-button,.sidebar-dark .sidebar-submenu .active>.sidebar-menu-button .sidebar-menu-icon,.sidebar-dark .sidebar-submenu .sidebar-menu-button:hover,.sidebar-dark .sidebar-submenu .sidebar-menu-button:hover .sidebar-menu-icon{color:#fff}.sidebar-dark .sm-bordered,.sidebar-dark .sm-bordered.sidebar-submenu,.sidebar-dark .sm-item-bordered.sidebar-submenu>.sidebar-menu-item,.sidebar-dark .sm-item-bordered>.sidebar-menu-item{border-color:rgba(0,0,0,.15)}.sidebar-dark .sm-icons-block>.sidebar-menu-item.open>.sidebar-menu-button .sidebar-menu-icon,.sidebar-dark .sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{background:rgba(0,0,0,.12);color:hsla(0,0%,100%,.54)}.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button,.sidebar-dark .sm-icons-block>.sidebar-menu-item.active>.sidebar-menu-button .sidebar-menu-icon{background:hsla(0,0%,100%,.12);color:#fff}.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon,.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-toggle-icon{color:#fff}.sidebar-dark .sm-icons-block.sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon{background:hsla(0,0%,100%,.12)}.sidebar-menu{margin-bottom:18.75px;padding:0;list-style:none}.sidebar-menu-item{position:relative;overflow:hidden}.sidebar-menu-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:400;line-height:42px;padding:0 18.75px;font-size:15px}.sidebar-menu-button,.sidebar-menu-button:focus,.sidebar-menu-button:hover{text-decoration:none}.active>.sidebar-menu-button{font-weight:400}.sidebar-menu-toggle-icon{position:relative;font-size:15px}.sidebar-menu-toggle-icon:before{font-family:Material Icons;content:"\E5DB";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:inherit;color:inherit}.open>.sidebar-menu-button .sidebar-menu-toggle-icon:before{content:"\E5D8"}.sidebar-menu-icon{vertical-align:middle;font-size:24px;display:inline-block;line-height:normal;position:relative}.sidebar-menu-icon--left{margin-right:5px}.sidebar-menu-icon--right{margin-left:5px}.sidebar-menu-badge{padding:.2rem .3rem;font-size:.75rem}.sidebar-menu-badge,.sidebar-menu-toggle-icon{margin-left:5px}.sidebar-submenu{display:none;list-style:none;margin:0;padding:0}.open>.sidebar-submenu{display:block}.sidebar-submenu .sidebar-menu-button{line-height:42px;font-size:15px}.sidebar-submenu .sidebar-menu-icon{font-size:24px}.sm-icons-1 .sidebar-menu-icon{font-size:1rem}.sm-icons-small .sidebar-menu-icon{font-size:.875rem}.sm-condensed.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button,.sm-condensed>.sidebar-menu-item>.sidebar-menu-button{line-height:31.5px}.sm-bordered,.sm-item-bordered>.sidebar-menu-item{border-bottom-style:solid;border-bottom-width:1px}.sm-item-bordered .sidebar-submenu,.sm-item-bordered>.sidebar-menu-item:last-of-type{border-bottom:none}.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{text-align:center;display:inline-block;height:30px;line-height:30px;width:30px}.sm-icons-block.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{height:30px;line-height:30px;width:30px}.sm-indent>.sidebar-menu-item .sidebar-menu-button{padding-left:37.5px} \ No newline at end of file diff --git a/dist/sidebar.min.css b/dist/sidebar.min.css deleted file mode 100644 index 9d21229..0000000 --- a/dist/sidebar.min.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.sidebar-p-t,.sidebar-p-y{padding-top:18.75px}.sidebar-p-b,.sidebar-p-y{padding-bottom:18.75px}.sidebar-m-t,.sidebar-m-y{margin-top:18.75px}.sidebar-m-l,.sidebar-m-x{margin-left:18.75px}.sidebar-m-r,.sidebar-m-x{margin-right:18.75px}.sidebar-b-t,.sidebar-b-y{border-top:1px solid transparent}.sidebar-m-b,.sidebar-m-y{margin-bottom:18.75px}.sidebar-b-b,.sidebar-b-y,.sidebar-brand-border{border-bottom:1px solid transparent}.sidebar-brand-header,.sidebar-p-l,.sidebar-p-x,.sidebar>.sidebar-heading{padding-left:18.75px;padding-right:18.75px}.sidebar-brand-header,.sidebar-p-l,.sidebar-p-r,.sidebar-p-x,.sidebar>.sidebar-heading{padding-right:18.75px}.sidebar-brand:hover,.sidebar-menu-button,.sidebar-menu-button:focus,.sidebar-menu-button:hover{text-decoration:none}.sidebar-p-a{padding:18.75px}.sidebar-m-a{margin:18.75px}.sidebar-b-a{border:1px solid transparent}.sidebar-b-x{border-left:1px solid transparent;border-right:1px solid transparent}.sidebar-block,.sidebar>.sidebar-text,.sidebar>p{padding-left:18.75px;padding-right:18.75px;margin-bottom:18.75px}.sidebar-brand{font-weight:500;font-size:1.3rem;margin-bottom:9.38px;display:inline-block}.sidebar-brand i.material-icons{margin-top:-3px}.sidebar-brand-header{height:56px;line-height:56px;margin-bottom:18.75px;display:block;width:100%}.sidebar-light .sidebar-brand-border,.sidebar-light .sm-bordered,.sidebar-light .sm-bordered.sidebar-submenu,.sidebar-light .sm-item-bordered.sidebar-submenu>.sidebar-menu-item,.sidebar-light .sm-item-bordered>.sidebar-menu-item,.sidebar-light [class*=sidebar-b-],.sidebar-light hr{border-color:#e5e5e5}.sidebar-heading{font-weight:500;font-size:.9rem;font-family:inherit;text-transform:uppercase;letter-spacing:normal;line-height:normal}.sidebar>.sidebar-heading{margin-bottom:18.75px}.sidebar-label{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:500;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.sidebar-light{color:rgba(0,0,0,.54);background:#fff}.sidebar-light.sidebar-left{border-right-width:1px;border-right-style:solid;border-right-color:#e5e5e5}.sidebar-light.sidebar-right{border-left-width:1px;border-left-style:solid;border-left-color:#e5e5e5}.sidebar-light .sidebar-link{color:inherit}.sidebar-light .sidebar-heading,.sidebar-light .sidebar-heading>a,.sidebar-light .sidebar-text,.sidebar-light p{color:rgba(0,0,0,.54)}.sidebar-light .sidebar-brand{color:#0275d8}.sidebar-light .sidebar-brand-bg{background:rgba(0,0,0,.07)}.sidebar-light .sidebar-menu-button{color:inherit}.sidebar-light .sidebar-menu-button:not(:only-child):before{color:rgba(0,0,0,.24)}.sidebar-light .sidebar-menu-icon{color:inherit}.sidebar-light .sidebar-menu-label{background:rgba(0,0,0,.3);color:#fff}.sidebar-light .sidebar-menu-button:hover{color:#212121;background:rgba(0,0,0,.03)}.sidebar-light .sidebar-menu-button:hover .sidebar-menu-icon{color:inherit}.sidebar-light .sidebar-submenu .sidebar-menu-button,.sidebar-light .sidebar-submenu .sidebar-menu-icon{color:rgba(0,0,0,.54)}.sidebar-light .active>.sidebar-menu-button,.sidebar-light .active>.sidebar-menu-button .sidebar-menu-icon{color:#0275d8}.sidebar-light .open>.sidebar-menu-button .sidebar-menu-icon,.sidebar-light .open>.sidebar-menu-button:not(:only-child):before{color:rgba(0,0,0,.54)}.sidebar-light .open{background:rgba(0,0,0,.04)}.sidebar-light .open>.sidebar-menu-button{background:0 0;color:rgba(0,0,0,.54)}.sidebar-dark .sidebar-brand-border,.sidebar-dark .sm-bordered,.sidebar-dark .sm-bordered.sidebar-submenu,.sidebar-dark .sm-item-bordered.sidebar-submenu>.sidebar-menu-item,.sidebar-dark .sm-item-bordered>.sidebar-menu-item,.sidebar-dark [class*=sidebar-b-],.sidebar-dark hr{border-color:rgba(0,0,0,.15)}.sidebar-light .sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{background:rgba(0,0,0,.12);color:inherit}.sidebar-light .sm-icons-block>.sidebar-menu-item.open>.sidebar-menu-button .sidebar-menu-icon{color:rgba(0,0,0,.54);background:rgba(0,0,0,.12)}.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button,.sidebar-light .sm-icons-block>.sidebar-menu-item.active>.sidebar-menu-button .sidebar-menu-icon{background:#0275d8;color:#fff}.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon,.sidebar-light .sm-active-button-bg>.active>.sidebar-menu-button:not(:only-child):before{color:#fff}.sidebar-light .sm-icons-block.sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon{background:#0275d8}.sidebar-dark{color:rgba(255,255,255,.54);background:0 0}.sidebar-dark.sidebar-left{border-right-width:0;border-right-style:solid;border-right-color:transparent}.sidebar-dark.sidebar-right{border-left-width:0;border-left-style:solid;border-left-color:transparent}.sidebar-dark .sidebar-link{color:#fff}.sidebar-dark .sidebar-heading,.sidebar-dark .sidebar-heading>a,.sidebar-dark .sidebar-text,.sidebar-dark p{color:rgba(255,255,255,.54)}.sidebar-dark .sidebar-brand{color:#fff}.sidebar-dark .sidebar-brand-bg{background:rgba(0,0,0,.12)}.sidebar-dark .sidebar-label{color:#0275d8;background:#fff}.sidebar-dark .sidebar-menu-button,.sidebar-dark .sidebar-menu-button:not(:only-child):before{color:#fff}.sidebar-dark .sidebar-menu-icon{color:rgba(255,255,255,.54)}.sidebar-dark .sidebar-menu-label{background:rgba(0,0,0,.3);color:#fff}.sidebar-dark .sidebar-menu-button:hover{color:#fff;background:rgba(255,255,255,.12)}.sidebar-dark .sidebar-menu-button:hover .sidebar-menu-icon,.sidebar-dark .sidebar-submenu .sidebar-menu-button,.sidebar-dark .sidebar-submenu .sidebar-menu-icon{color:rgba(255,255,255,.54)}.sidebar-dark .active>.sidebar-menu-button,.sidebar-dark .active>.sidebar-menu-button .sidebar-menu-icon{color:#fff}.sidebar-dark .open{background:rgba(0,0,0,.04)}.sidebar-dark .open>.sidebar-menu-button:not(:only-child):before{color:rgba(255,255,255,.54)}.sidebar-dark .open>.sidebar-menu-button{background:0 0;color:rgba(255,255,255,.54)}.sidebar-dark .sm-icons-block>.sidebar-menu-item.open>.sidebar-menu-button .sidebar-menu-icon,.sidebar-dark .sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{color:rgba(255,255,255,.54);background:rgba(0,0,0,.12)}.sidebar-dark .open>.sidebar-menu-button .sidebar-menu-icon{color:rgba(255,255,255,.54)}.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button,.sidebar-dark .sm-icons-block>.sidebar-menu-item.active>.sidebar-menu-button .sidebar-menu-icon{background:rgba(255,255,255,.12);color:#fff}.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon,.sidebar-dark .sm-active-button-bg>.active>.sidebar-menu-button:not(:only-child):before{color:#fff}.sidebar-dark .sm-icons-block.sm-active-button-bg>.active>.sidebar-menu-button .sidebar-menu-icon{background:rgba(255,255,255,.12)}.sidebar-menu{margin-bottom:18.75px;padding-left:0;padding-right:0;list-style:none}.sidebar-menu-item{position:relative;overflow:hidden}.sidebar-menu-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:400;line-height:42px;padding-left:18.75px;font-size:15px}.active>.sidebar-menu-button{font-weight:400}.sidebar-menu-button:not(:only-child):before{font-family:"Material Icons";content:"";position:absolute;right:18.75px;display:block;font-size:15px}.open>.sidebar-menu-button:not(:only-child):before{content:""}.sidebar-menu-icon{vertical-align:middle;width:31.5px;font-size:24px;display:inline-block;line-height:normal;position:relative}.sidebar-menu-icon.material-icons{top:-1px}.sidebar-menu-label{position:absolute;right:18.75px;margin-top:13px;padding:.2rem .3rem;font-size:.75rem}.sidebar-menu-button:not(:only-child) .sidebar-menu-label{right:42.75px}.sidebar-submenu{display:none;list-style:none;margin:0;padding:0}.sm-condensed.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-label,.sm-condensed>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-label{margin-top:8px}.open>.sidebar-submenu{display:block}.sidebar-submenu .sidebar-menu-button{line-height:42px;font-size:15px}.sm-condensed.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button,.sm-condensed>.sidebar-menu-item>.sidebar-menu-button{height:31.5px;line-height:31.5px}.sidebar-submenu .sidebar-menu-icon{top:-1px;position:relative;font-size:24px;width:36px}.sm-icons-bullet .sidebar-menu-icon{font-size:.68rem!important;text-align:center}.sm-bordered,.sm-item-bordered>.sidebar-menu-item{border-bottom-style:solid;border-bottom-width:1px}.sm-item-bordered .sidebar-submenu,.sm-item-bordered>.sidebar-menu-item:last-of-type{border-bottom:none}.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{text-align:center;display:inline-block;height:30px;line-height:30px;width:30px;margin-right:7.5px}.sm-icons-block.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{height:30px;line-height:30px;width:30px}.sm-icons-right>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{text-align:right;position:absolute;right:18.75px;top:9px;margin-right:0}.sm-icons-right>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-label,.sm-icons-right>.sidebar-menu-item>.sidebar-menu-button:not(:only-child):before{right:47.75px}.sm-icons-right>.sidebar-menu-item>.sidebar-menu-button:not(:only-child) .sidebar-menu-label{right:67.75px}.sm-icons-right.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{top:9px}.sm-icons-right.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{text-align:center;top:6px}.sm-icons-right.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-label,.sm-icons-right.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button:not(:only-child):before{right:53.75px}.sm-icons-right.sm-icons-block>.sidebar-menu-item>.sidebar-menu-button:not(:only-child) .sidebar-menu-label{right:73.75px}.sm-icons-right.sm-icons-block.sm-condensed>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{top:.75px}.sm-icons-right.sm-icons-block.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{top:6px}.sm-icons-right.sm-icons-block.sidebar-submenu>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-label{right:53.75px}.sm-icons-right.sm-condensed>.sidebar-menu-item>.sidebar-menu-button .sidebar-menu-icon{top:3.75px}.sm-indent>.sidebar-menu-item .sidebar-menu-button{padding-left:37.5px} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 6164f23..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,46 +0,0 @@ -var gulp = require('gulp'); -var $ = require('gulp-load-plugins')(); - -var __SRC = './sass/sidebar.scss'; -var __DIST = './dist'; -var __WATCH = './sass/**/*'; - -function sass (src, dist, minify) { - return gulp.src(src) - // Compile Sass - .pipe($.sass({ - // Resolve Sass file imports from node_modules - importer: require('sass-importer-npm') - }) - // Handle errors - .on('error', $.sass.logError)) - // Post CSS - .pipe($.postcss([ - // autoprefixer - require('autoprefixer')({ browsers: ['last 2 versions'] }) - ])) - // also save non minified version - .pipe($.if(minify, gulp.dest(dist))) - // (optional) Minify CSS - .pipe($.if(minify, $.rename({ extname: '.min.css' }))) - .pipe($.if(minify, $.cleanCss())) - // Write CSS file - .pipe(gulp.dest(dist)) -} - -// Build dev -gulp.task('build:dev', function () { - return sass(__SRC, __DIST); -}); - -// Build production -gulp.task('build', function () { - return sass(__SRC, __DIST, true); -}); - -// Watch -gulp.task('watch', ['build:dev'], function () { - gulp.watch(__WATCH, ['build:dev']); -}); - -gulp.task('default', ['build']); \ No newline at end of file diff --git a/package.json b/package.json index 2f51ba2..b5ab7f0 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,25 @@ { "name": "sidebar-style-guide", - "version": "1.0.0", + "version": "2.0.0", "description": "Sidebar navigation style guide (CSS and Sass)", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, - "author": "MOSAICPRO (http://themeforest.net/user/mosaicpro/portfolio)", + "author": "FrontendMatter (http://www.frontendmatter.com)", "license": "ISC", "devDependencies": { - "autoprefixer": "^6.3.3", - "gulp": "^3.9.1", - "gulp-clean-css": "^2.0.7", - "gulp-if": "^2.0.1", - "gulp-load-plugins": "^1.2.2", - "gulp-postcss": "^6.1.1", - "gulp-rename": "^1.2.2", - "gulp-sass": "^2.3.1", - "sass-importer-npm": "^1.0.0", - "sass-strip-unit": "^1.0.0" + "cross-env": "^5.1.1", + "laravel-mix": "^1.5.1" }, "dependencies": {}, "repository": { "type": "git", - "url": "git+https://github.com/themekit/sidebar-style-guide.git" + "url": "git+https://github.com/FrontendMatter/sidebar-style-guide.git" }, "bugs": { - "url": "https://github.com/themekit/sidebar-style-guide/issues" + "url": "https://github.com/FrontendMatter/sidebar-style-guide/issues" }, - "homepage": "https://github.com/themekit/sidebar-style-guide#readme" + "homepage": "https://github.com/FrontendMatter/sidebar-style-guide#readme" } diff --git a/sass/_variables.scss b/sass/_variables.scss index 29f84ea..efcb899 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -1,15 +1,9 @@ -/////////// -// UTILS // -/////////// - -@import 'sass-strip-unit/strip-unit'; - ///////////////////// // SIDEBAR GENERAL // ///////////////////// $sidebar-font-size: 15px !default; -$brand-primary: #0275d8 !default; +$primary: #0275d8 !default; // general spacing $sidebar-spacing: $sidebar-font-size * 1.25 !default; @@ -30,26 +24,26 @@ $sidebar-heading-letter-spacing: normal !default; $sidebar-heading-line-height: normal !default; // menu spacing -$sm-spacing-x: $sidebar-spacing-x !default; +$sm-spacing-x: 0 !default; $sm-spacing-y: $sidebar-spacing-y !default; // horizontal spacing between elements such as -// .sidebar-menu-label and .sidebar-menu-icon +// .sidebar-menu-badge and .sidebar-menu-icon // within a menu button -$sm-element-spacing-x: 5px !default; +$sm-inner-spacing-x: 5px !default; // menu buttons $sm-button-font-size: $sidebar-font-size !default; $sm-button-font-weight: 400 !default; $sm-button-height: 42px !default; +$sm-button-spacing-x: $sidebar-spacing-x !default; // menu condensed buttons -$sm-condensed-button-height: $sm-button-height - ($sm-button-height/4) !default; +$sm-condensed-button-height: $sm-button-height * 0.75 !default; // menu icons $sm-icon-font-size: 24px !default; -$sm-icon-margin: $sm-spacing-x * 0.4 !default; -$sm-icon-width: $sm-icon-font-size + $sm-icon-margin !default; +$sm-icon-spacing-x: $sm-inner-spacing-x !default; // menu icons using .sm-icons-block $sm-iconsblock-spacing: $sm-icon-font-size * 0.25 !default; @@ -63,7 +57,7 @@ $ssm-button-height: $sm-button-height !default; $ssm-button-font-size: $sm-button-font-size !default; // submenu condensed buttons -$ssm-condensed-button-height: $ssm-button-height - ($ssm-button-height/4) !default; +$ssm-condensed-button-height: $ssm-button-height * 0.75 !default; // submenu icons $ssm-icon-font-size: $sm-icon-font-size !default; @@ -74,11 +68,6 @@ $ssm-iconsblock-width: $ssm-icon-font-size + $ssm-iconsblock-spacin // menu toggle button indicator $sm-toggle-font-size: $sm-button-font-size !default; -// $sm-toggle-family: "FontAwesome" !default; -// $sm-toggle-icon: "\f067" !default; // plus -// $sm-open-toggle-icon: "\f068" !default; // minus -// $sm-toggle-icon: "\f078" !default; // chevron-down -// $sm-open-toggle-icon: "\f077" !default; // chevron-up // See Material Icons: // - https://design.google.com/icons/ @@ -88,20 +77,18 @@ $sm-toggle-icon: "\e5db" !default; $sm-open-toggle-icon: "\e5d8" !default; // label -$sm-label-spacing-horizontal: .3rem !default; -$sm-label-spacing-vertical: .2rem !default; -$sm-label-font-size: .75rem !default; -$sm-label-width: (strip-unit($sm-label-font-size) * $sidebar-font-size) + (strip-unit($sm-label-spacing-horizontal) * $sidebar-font-size); -$sm-label-height: (strip-unit($sm-label-font-size) * $sidebar-font-size) + (strip-unit($sm-label-spacing-vertical) * $sidebar-font-size); +$sm-badge-spacing-x: .3rem !default; +$sm-badge-spacing-y: .2rem !default; +$sm-badge-font-size: .75rem !default; ////////////////// // SIDEBAR DARK // ////////////////// -@import 'variables/sidebar-dark'; +@import './variables/sidebar-dark'; /////////////////// // SIDEBAR LIGHT // /////////////////// -@import 'variables/sidebar-light'; \ No newline at end of file +@import './variables/sidebar-light'; \ No newline at end of file diff --git a/sass/sidebar-menu/_sidebar-menu.scss b/sass/sidebar-menu/_sidebar-menu.scss index c7842fc..c8c6b0d 100644 --- a/sass/sidebar-menu/_sidebar-menu.scss +++ b/sass/sidebar-menu/_sidebar-menu.scss @@ -1,78 +1,78 @@ .sidebar-menu { - margin-bottom: $sm-spacing-y; - padding-left: 0; - padding-right: 0; - list-style: none; + margin-bottom: $sm-spacing-y; + padding: 0 $sm-spacing-x; + list-style: none; } .sidebar-menu-item { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; } .sidebar-menu-button { - display: flex; - align-items: center; - font-weight: $sm-button-font-weight; - line-height: $sm-button-height; - padding-left: $sm-spacing-x; - font-size: $sm-button-font-size; - &, &:hover, &:focus { - text-decoration: none; - } + display: flex; + align-items: center; + font-weight: $sm-button-font-weight; + line-height: $sm-button-height; + padding: 0 $sm-button-spacing-x; + font-size: $sm-button-font-size; + &, &:hover, &:focus { + text-decoration: none; + } } .active > .sidebar-menu-button { - font-weight: $sm-active-button-font-weight; + font-weight: $sm-active-button-font-weight; } -.sidebar-menu-button:not(:only-child):before { - font-family: $sm-toggle-family; - content: $sm-toggle-icon; - position: absolute; - right: $sm-spacing-x; - display: block; - font-size: $sm-toggle-font-size; +.sidebar-menu-toggle-icon { + position: relative; + font-size: $sm-toggle-font-size; } -.open > .sidebar-menu-button:not(:only-child):before { - content: $sm-open-toggle-icon; +.sidebar-menu-toggle-icon:before { + font-family: $sm-toggle-family; + content: $sm-toggle-icon; + display: flex; + align-items: center; + font-size: inherit; + color: inherit; +} +.open > .sidebar-menu-button .sidebar-menu-toggle-icon:before { + content: $sm-open-toggle-icon; } .sidebar-menu-icon { - vertical-align: middle; - width: $sm-icon-width; - font-size: $sm-icon-font-size; - display: inline-block; - line-height: normal; - position: relative; - &.material-icons { - top: -1px; - } + vertical-align: middle; + font-size: $sm-icon-font-size; + display: inline-block; + line-height: normal; + position: relative; + &--left { + margin-right: $sm-icon-spacing-x; + } + &--right { + margin-left: $sm-icon-spacing-x; + } } -.sidebar-menu-label { - position: absolute; - right: $sm-spacing-x; - margin-top: floor(($sm-button-height - $sm-label-height) / 2); - padding: $sm-label-spacing-vertical $sm-label-spacing-horizontal; - font-size: $sm-label-font-size; +.sidebar-menu-badge { + padding: $sm-badge-spacing-y $sm-badge-spacing-x; + font-size: $sm-badge-font-size; } -.sidebar-menu-button:not(:only-child) .sidebar-menu-label { - right: $sm-spacing-x + $sm-icon-font-size; +.sidebar-menu-badge, +.sidebar-menu-toggle-icon { + margin-left: $sm-inner-spacing-x; } // submenus .sidebar-submenu { - display: none; - list-style: none; - margin: 0; - padding: 0; + display: none; + list-style: none; + margin: 0; + padding: 0; - .open > & { - display: block; - } - .sidebar-menu-button { - line-height: $ssm-button-height; - font-size: $ssm-button-font-size; - } - .sidebar-menu-icon { - top:-1px; - position: relative; - font-size: $ssm-icon-font-size; - width: $ssm-icon-font-size + ($ssm-icon-font-size / 2); - } + .open > & { + display: block; + } + .sidebar-menu-button { + line-height: $ssm-button-height; + font-size: $ssm-button-font-size; + } + .sidebar-menu-icon { + font-size: $ssm-icon-font-size; + } } \ No newline at end of file diff --git a/sass/sidebar-menu/_util.scss b/sass/sidebar-menu/_util.scss index 88142b2..0e9024a 100644 --- a/sass/sidebar-menu/_util.scss +++ b/sass/sidebar-menu/_util.scss @@ -1,126 +1,57 @@ -// smaller bullet icons -.sm-icons-bullet .sidebar-menu-icon { - font-size: .68rem !important; - text-align: center; +// icon sizing +.sm-icons-1 .sidebar-menu-icon { + font-size: 1rem; +} +.sm-icons-small .sidebar-menu-icon { + font-size: .875rem; } // condensed menu items .sm-condensed > .sidebar-menu-item > .sidebar-menu-button { - height: $sm-condensed-button-height; - line-height: $sm-condensed-button-height; - .sidebar-menu-label { - margin-top: floor(($sm-condensed-button-height - $sm-label-height) / 2); - } + line-height: $sm-condensed-button-height; } // condensed submenu items .sm-condensed.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button { - height: $ssm-condensed-button-height; - line-height: $ssm-condensed-button-height; - .sidebar-menu-label { - margin-top: floor(($ssm-condensed-button-height - $sm-label-height) / 2); - } + line-height: $ssm-condensed-button-height; } // bordered menu .sm-bordered { - border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-width: 1px; } // bordered menu item .sm-item-bordered { - > .sidebar-menu-item { - border-bottom-style: solid; - border-bottom-width: 1px; - } - > .sidebar-menu-item:last-of-type { - border-bottom: none; - } - .sidebar-submenu { - border-bottom: none; - } + > .sidebar-menu-item { + border-bottom-style: solid; + border-bottom-width: 1px; + } + > .sidebar-menu-item:last-of-type { + border-bottom: none; + } + .sidebar-submenu { + border-bottom: none; + } } // icons block .sm-icons-block > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - text-align: center; - display: inline-block; - height: $sm-iconsblock-width; - line-height: $sm-iconsblock-width; - width: $sm-iconsblock-width; - margin-right: $sm-icon-margin; + text-align: center; + display: inline-block; + height: $sm-iconsblock-width; + line-height: $sm-iconsblock-width; + width: $sm-iconsblock-width; } // icons block + submenu .sm-icons-block.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - height: $ssm-iconsblock-width; - line-height: $ssm-iconsblock-width; - width: $ssm-iconsblock-width; -} - -// icons on right -.sm-icons-right > .sidebar-menu-item > .sidebar-menu-button { - .sidebar-menu-icon { - text-align: right; - position: absolute; - right: $sm-spacing-x; - top: ($sm-button-height - $sm-icon-font-size) / 2; - margin-right: 0; - } - .sidebar-menu-label { - right: $sm-spacing-x + ($sm-icon-font-size + $sm-element-spacing-x); - } - &:not(:only-child):before { - right: $sm-spacing-x + ($sm-icon-font-size + $sm-element-spacing-x); - } - &:not(:only-child) .sidebar-menu-label { - right: $sm-spacing-x + ($sm-icon-font-size + $sm-element-spacing-x) + ($sm-button-font-size + $sm-element-spacing-x); - } -} - -// icons on right + submenu -.sm-icons-right.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: ($ssm-button-height - $ssm-icon-font-size) / 2; -} - -// icons on right + icons block -.sm-icons-right.sm-icons-block > .sidebar-menu-item > .sidebar-menu-button { - .sidebar-menu-icon { - text-align: center; - top: ($sm-button-height - $sm-iconsblock-width) / 2; - } - .sidebar-menu-label { - right: $sm-spacing-x + ($sm-iconsblock-width + $sm-element-spacing-x); - } - &:not(:only-child):before { - right: $sm-spacing-x + ($sm-iconsblock-width + $sm-element-spacing-x); - } - &:not(:only-child) .sidebar-menu-label { - right: $sm-spacing-x + ($sm-iconsblock-width + $sm-element-spacing-x) + ($sm-toggle-font-size + $sm-element-spacing-x); - } -} - -// icons on right + icons block + condensed -.sm-icons-right.sm-icons-block.sm-condensed > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: ($sm-condensed-button-height - $sm-iconsblock-width) / 2; -} - -// icons on right + icons block + submenu -.sm-icons-right.sm-icons-block.sidebar-submenu > .sidebar-menu-item > .sidebar-menu-button { - .sidebar-menu-icon { - top: ($ssm-button-height - $ssm-iconsblock-width) / 2; - } - .sidebar-menu-label { - right: $sm-spacing-x + ($ssm-iconsblock-width + $sm-element-spacing-x); - } -} - -// icons on right + condensed -.sm-icons-right.sm-condensed > .sidebar-menu-item > .sidebar-menu-button .sidebar-menu-icon { - top: ($sm-condensed-button-height - $sm-icon-font-size) / 2; + height: $ssm-iconsblock-width; + line-height: $ssm-iconsblock-width; + width: $ssm-iconsblock-width; } // increase sidebar menu buttons horizontal spacing .sm-indent > .sidebar-menu-item .sidebar-menu-button { - padding-left: $sm-spacing-x * 2; + padding-left: $sm-button-spacing-x * 2; } \ No newline at end of file diff --git a/sass/sidebar-skins/_sidebar-dark.scss b/sass/sidebar-skins/_sidebar-dark.scss index d70e5ab..846a1eb 100644 --- a/sass/sidebar-skins/_sidebar-dark.scss +++ b/sass/sidebar-skins/_sidebar-dark.scss @@ -54,12 +54,6 @@ border-color: $sidebar-dark-brand-border-color; } - // label - .sidebar-label { - color: $brand-primary; - background: #ffffff; - } - ////////// // menu // ////////// @@ -67,41 +61,26 @@ .sidebar-menu-button { color: $sm-dark-button-color; } - .sidebar-menu-button:not(:only-child):before { + .sidebar-menu-toggle-icon { color: $sm-dark-toggle-color; } .sidebar-menu-icon { color: $sm-dark-icon-color; } - .sidebar-menu-label { - background: $sidebar-dark-label-bg; - color: $sidebar-dark-label-color; - } .sidebar-menu-button:hover { color: $sm-dark-hover-button-color; background: $sm-dark-hover-button-bg; .sidebar-menu-icon { color: $sm-dark-hover-icon-color; } - } - .sidebar-submenu { - .sidebar-menu-button { - color: $ssm-dark-button-color; - } - .sidebar-menu-icon { - color: $ssm-dark-icon-color; - } - } - .active > .sidebar-menu-button { - color: $sm-dark-active-button-color; - .sidebar-menu-icon { - color: $sm-dark-active-icon-color; + .sidebar-menu-toggle-icon { + color: $sm-dark-hover-icon-color; } } .open { background: $sm-dark-open-bg; } - .open > .sidebar-menu-button:not(:only-child):before { + .open > .sidebar-menu-button .sidebar-menu-toggle-icon { color: $sm-dark-open-toggle-color; } .open > .sidebar-menu-button { @@ -111,6 +90,32 @@ color: $sm-dark-open-icon-color; } } + .active > .sidebar-menu-button { + color: $sm-dark-active-button-color; + .sidebar-menu-icon { + color: $sm-dark-active-icon-color; + } + } + .sidebar-submenu { + .sidebar-menu-button { + color: $ssm-dark-button-color; + } + .sidebar-menu-icon { + color: $ssm-dark-icon-color; + } + .sidebar-menu-button:hover { + color: $ssm-dark-hover-button-color; + .sidebar-menu-icon { + color: $ssm-dark-hover-icon-color; + } + } + .active > .sidebar-menu-button { + color: $ssm-dark-active-button-color; + .sidebar-menu-icon { + color: $ssm-dark-active-icon-color; + } + } + } /////////// // utils // @@ -155,7 +160,7 @@ .sidebar-menu-icon { color: $sm-dark-activebuttonbg-icon-color; } - &:not(:only-child):before { + .sidebar-menu-toggle-icon { color: $sm-dark-activebuttonbg-icon-color; } } diff --git a/sass/sidebar-skins/_sidebar-light.scss b/sass/sidebar-skins/_sidebar-light.scss index b275f8b..4e0f604 100644 --- a/sass/sidebar-skins/_sidebar-light.scss +++ b/sass/sidebar-skins/_sidebar-light.scss @@ -61,7 +61,7 @@ .sidebar-menu-button { color: $sm-light-button-color; } - .sidebar-menu-button:not(:only-child):before { + .sidebar-menu-toggle-icon { color: $sm-light-toggle-color; } .sidebar-menu-icon { @@ -77,25 +77,14 @@ .sidebar-menu-icon { color: $sm-light-hover-icon-color; } - } - .sidebar-submenu { - .sidebar-menu-button { - color: $ssm-light-button-color; - } - .sidebar-menu-icon { - color: $ssm-light-icon-color; - } - } - .active > .sidebar-menu-button { - color: $sm-light-active-button-color; - .sidebar-menu-icon { - color: $sm-light-active-icon-color; + .sidebar-menu-toggle-icon { + color: $sm-light-hover-icon-color; } } .open { background: $sm-light-open-bg; } - .open > .sidebar-menu-button:not(:only-child):before { + .open > .sidebar-menu-button .sidebar-menu-toggle-icon { color: $sm-light-open-toggle-color; } .open > .sidebar-menu-button { @@ -105,6 +94,32 @@ color: $sm-light-open-icon-color; } } + .active > .sidebar-menu-button { + color: $sm-light-active-button-color; + .sidebar-menu-icon { + color: $sm-light-active-icon-color; + } + } + .sidebar-submenu { + .sidebar-menu-button { + color: $ssm-light-button-color; + } + .sidebar-menu-icon { + color: $ssm-light-icon-color; + } + .sidebar-menu-button:hover { + color: $ssm-light-hover-button-color; + .sidebar-menu-icon { + color: $ssm-light-hover-icon-color; + } + } + .active > .sidebar-menu-button { + color: $ssm-light-active-button-color; + .sidebar-menu-icon { + color: $ssm-light-active-icon-color; + } + } + } /////////// // utils // @@ -149,7 +164,7 @@ .sidebar-menu-icon { color: $sm-light-activebuttonbg-icon-color; } - &:not(:only-child):before { + .sidebar-menu-toggle-icon { color: $sm-light-activebuttonbg-icon-color; } } diff --git a/sass/sidebar/_label.scss b/sass/sidebar/_badge.scss similarity index 92% rename from sass/sidebar/_label.scss rename to sass/sidebar/_badge.scss index 291be4a..df16b9c 100644 --- a/sass/sidebar/_label.scss +++ b/sass/sidebar/_badge.scss @@ -1,4 +1,4 @@ -.sidebar-label { +.sidebar-badge { display: inline-block; padding: .25em .4em; font-size: 75%; diff --git a/sass/sidebar/_brand.scss b/sass/sidebar/_brand.scss index e21e1ff..30f7923 100644 --- a/sass/sidebar/_brand.scss +++ b/sass/sidebar/_brand.scss @@ -3,13 +3,14 @@ font-weight: $sidebar-brand-weight; font-size: $sidebar-brand-size; margin-bottom: $sidebar-spacing-y/2; - display: inline-block; + display: flex; + align-items: center; &:hover { text-decoration: none; } - i.material-icons { - margin-top: -3px; - } +} +.sidebar-brand-icon { + margin-right: $sidebar-spacing-x/2; } .sidebar-brand-header { height: $sidebar-brand-height; @@ -17,7 +18,6 @@ padding-left: $sidebar-spacing-x; padding-right: $sidebar-spacing-x; margin-bottom: $sidebar-spacing-y; - display: block; width: 100%; } .sidebar-brand-border { diff --git a/sass/sidebar/_heading.scss b/sass/sidebar/_heading.scss index 464dda6..81b6bf9 100644 --- a/sass/sidebar/_heading.scss +++ b/sass/sidebar/_heading.scss @@ -5,9 +5,7 @@ text-transform: $sidebar-heading-text-transform; letter-spacing: $sidebar-heading-letter-spacing; line-height: $sidebar-heading-line-height; -} -.sidebar > .sidebar-heading { - padding-left: $sidebar-spacing-x; - padding-right: $sidebar-spacing-x; - margin-bottom: $sidebar-spacing-y; + padding-left: $sidebar-spacing-x; + padding-right: $sidebar-spacing-x; + margin-bottom: $sidebar-spacing-y; } \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index 603c721..3938604 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -3,7 +3,7 @@ @import './sidebar/text'; @import './sidebar/brand'; @import './sidebar/heading'; -@import './sidebar/label'; +@import './sidebar/badge'; // Sidebar skins @import './sidebar-skins/sidebar-light'; diff --git a/sass/variables/_sidebar-dark.scss b/sass/variables/_sidebar-dark.scss index 3815c7c..9abb900 100644 --- a/sass/variables/_sidebar-dark.scss +++ b/sass/variables/_sidebar-dark.scss @@ -5,10 +5,11 @@ $sidebar-dark-bg: transparent !default; $sidebar-dark-text-color: rgba(255, 255, 255, .54) !default; $sidebar-dark-link-color: #fff !default; +$sidebar-dark-hover-link-color: #fff !default; // borders -$sidebar-dark-container-border-color: transparent !default; -$sidebar-dark-container-border-width: 0 !default; +$sidebar-dark-container-border-color: rgba(0, 0, 0, .15) !default; +$sidebar-dark-container-border-width: 1px !default; $sidebar-dark-border-color: rgba(0, 0, 0, .15) !default; // brand @@ -38,7 +39,7 @@ $sm-dark-icon-color: rgba(255, 255, 255, .54) !default; $sm-dark-icon-bg: rgba(0, 0, 0, .12) !default; // hover menu button -$sm-dark-hover-button-color: $sm-dark-button-color !default; +$sm-dark-hover-button-color: #ffffff !default; $sm-dark-hover-button-bg: rgba(255, 255, 255, .12) !default; // hover menu icon @@ -84,4 +85,12 @@ $ssm-dark-item-border-color: $sm-dark-item-border-color !default; $ssm-dark-button-color: $sidebar-dark-text-color !default; // submenu icon -$ssm-dark-icon-color: $ssm-dark-button-color !default; \ No newline at end of file +$ssm-dark-icon-color: $ssm-dark-button-color !default; + +// submenu active +$ssm-dark-active-button-color: $sm-dark-active-button-color !default; +$ssm-dark-active-icon-color: $ssm-dark-active-button-color !default; + +// hover submenu +$ssm-dark-hover-button-color: $sm-dark-hover-button-color !default; +$ssm-dark-hover-icon-color: $ssm-dark-hover-button-color !default; \ No newline at end of file diff --git a/sass/variables/_sidebar-light.scss b/sass/variables/_sidebar-light.scss index 83d208b..75a3027 100644 --- a/sass/variables/_sidebar-light.scss +++ b/sass/variables/_sidebar-light.scss @@ -5,6 +5,7 @@ $sidebar-light-bg: #ffffff !default; $sidebar-light-text-color: rgba(0, 0, 0, .54) !default; $sidebar-light-link-color: inherit !default; +$sidebar-light-hover-link-color: #212121 !default; // borders $sidebar-light-container-border-color: #e5e5e5 !default; @@ -12,7 +13,7 @@ $sidebar-light-container-border-width: 1px !default; $sidebar-light-border-color: #e5e5e5 !default; // brand -$sidebar-light-brand-color: $brand-primary !default; +$sidebar-light-brand-color: $primary !default; $sidebar-light-brand-bg: rgba(0, 0, 0, .07) !default; $sidebar-light-brand-border-color: $sidebar-light-border-color !default; @@ -56,8 +57,8 @@ $sm-light-open-icon-color: $sm-light-open-button-color !defaul $sm-light-open-icon-bg: $sm-light-icon-bg !default; // active menu button -$sm-light-active-button-bg: $brand-primary !default; -$sm-light-active-button-color: $brand-primary !default; +$sm-light-active-button-bg: $primary !default; +$sm-light-active-button-color: $primary !default; $sm-light-active-icon-color: $sm-light-active-button-color !default; // menu icon with sm-icons-block @@ -84,4 +85,12 @@ $ssm-light-item-border-color: $sm-light-item-border-color !defaul $ssm-light-button-color: $sidebar-light-text-color !default; // submenu icon -$ssm-light-icon-color: $ssm-light-button-color !default; \ No newline at end of file +$ssm-light-icon-color: $ssm-light-button-color !default; + +// submenu active +$ssm-light-active-button-color: $sm-light-active-button-color !default; +$ssm-light-active-icon-color: $ssm-light-active-button-color !default; + +// hover submenu +$ssm-light-hover-button-color: $sm-light-hover-button-color !default; +$ssm-light-hover-icon-color: $ssm-light-hover-button-color !default; \ No newline at end of file diff --git a/webpack.mix.js b/webpack.mix.js new file mode 100644 index 0000000..918e23b --- /dev/null +++ b/webpack.mix.js @@ -0,0 +1,3 @@ +const { mix } = require('laravel-mix') + +mix.sass('sass/sidebar.scss', 'dist') \ No newline at end of file