Date: Mon, 30 Oct 2017 11:21:31 +0200
Subject: [PATCH 9/9] =?UTF-8?q?v2.0.0=20-=20rename=20$brand-primary=20to?=
=?UTF-8?q?=20$primary=20to=20simplify=20integration=20with=20bootstrap=20?=
=?UTF-8?q?4=20beta=20-=20cleanup=20sizing=20and=20positioning=20for=20ico?=
=?UTF-8?q?ns=20and=20badges=20-=20remove=20unused=20badge=20width=20and?=
=?UTF-8?q?=20height=20variables=20-=20rename=20$sm-element-spacing-x=20to?=
=?UTF-8?q?=20$sm-inner-spacing-x=20-=20change=20$sm-spacing-x=20to=20appl?=
=?UTF-8?q?y=20horizontal=20spacing=20to=20menus=20instead=20of=20buttons?=
=?UTF-8?q?=20-=20add=20$sm-button-spacing-x=20to=20apply=20horizontal=20s?=
=?UTF-8?q?pacing=20to=20buttons=20-=20make=20the=20toggle=20button=20indi?=
=?UTF-8?q?cator=20icon=20optional=20by=20moving=20.sidebar-menu-button:no?=
=?UTF-8?q?t(:only-child):before=20to=20a=20separate=20element=20with=20.s?=
=?UTF-8?q?idebar-menu-toggle-icon=20class=20-=20add=20.sidebar-menu-icon?=
=?UTF-8?q?=E2=80=94left=20and=20.sidebar-menu-icon=E2=80=94right=20spacin?=
=?UTF-8?q?g=20modifiers=20to=20apply=20horizontal=20spacing=20between=20b?=
=?UTF-8?q?uttons=20icon=20and=20text=20-=20add=20icon=20sizing=20utility?=
=?UTF-8?q?=20classes=20.sm-icons-1=20and=20.sm-icons-small=20-=20cleanup?=
=?UTF-8?q?=20condensed=20menus=20-=20remove=20.sm-icons-right=20utility?=
=?UTF-8?q?=20in=20favor=20of=20adding=20margin-left:=20auto=20to=20the=20?=
=?UTF-8?q?icons=20since=20the=20buttons=20are=20using=20flexbox=20-=20dro?=
=?UTF-8?q?p=20sass-strip-unit=20dependency=20-=20disable=20npm=20lock=20f?=
=?UTF-8?q?ile=20-=20upgrade=20dev=20tools=20to=20webpack=20-=20update=20R?=
=?UTF-8?q?EADME=20-=20drop=20dist/sidebar.min.css=20in=20favor=20of=20a?=
=?UTF-8?q?=20single=20dist/sidebar.css=20file=20already=20minified?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 3 +-
.npmrc | 1 +
README.md | 75 +-
dist/sidebar.css | 474 +---
dist/sidebar.min.css | 1 -
gulpfile.js | 46 -
package-lock.json | 2418 ---------------------
package.json | 26 +-
sass/_variables.scss | 39 +-
sass/sidebar-menu/_sidebar-menu.scss | 112 +-
sass/sidebar-menu/_util.scss | 127 +-
sass/sidebar-skins/_sidebar-dark.scss | 8 +-
sass/sidebar-skins/_sidebar-light.scss | 8 +-
sass/sidebar/{_label.scss => _badge.scss} | 0
sass/style.scss | 2 +-
sass/variables/_sidebar-light.scss | 6 +-
webpack.mix.js | 3 +
17 files changed, 175 insertions(+), 3174 deletions(-)
create mode 100644 .npmrc
delete mode 100644 dist/sidebar.min.css
delete mode 100644 gulpfile.js
delete mode 100644 package-lock.json
rename sass/sidebar/{_label.scss => _badge.scss} (100%)
create mode 100644 webpack.mix.js
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
- $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
-