Added xs and xl sizes for each component. Sizes are now entirely configurable. inkline#47

Author: alexgrozav

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inkline",
-  "version": "1.14.7",
+  "version": "1.15.0",
   "description": "Inkline is a modern UI/UX framework for Vue.js, designed for creating flawless content-rich responsive web applications",
   "main": "dist/inkline.js",
   "authors": [

package.js

@@ -2,7 +2,7 @@
 
 Package.describe({
     name: "inkline:inkline",
-    version: "1.14.7",
+    version: "1.15.0",
     summary:
         "Inkline is a modern UI/UX framework for Vue.js, designed for creating flawless content-rich responsive web applications",
     git: "https://github.com/inkline/inkline.git",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkline/inkline",
-  "version": "1.14.7",
+  "version": "1.15.0",
   "description": "Inkline is a modern UI/UX framework for Vue.js, designed for creating flawless content-rich responsive web applications",
   "author": "Alex Grozav <alex@grozav.com>",
   "scripts": {

src/components/Alert/css/_sizes.styl

@@ -1,25 +1,25 @@
 //
 // Alert sizes
 //
-for size in (sm md lg)
-    .alert.-{size}
-        border-radius: --alert-border-radius[size]
-        font-size: --alert-font-size[size]
+for --size in --sizes
+    .alert.-{--size}
+        border-radius: --alert-border-radius[--size]
+        font-size: --alert-font-size[--size]
 
         > .content
-            padding: --alert-padding[size]
+            padding: --alert-padding[--size]
 
         > .title
-            margin-bottom: --alert-padding[size]
+            margin-bottom: --alert-padding[--size]
 
         > .link + .link
-            margin-left: --alert-padding[size]
+            margin-left: --alert-padding[--size]
 
         > .dismiss
-            padding: (--alert-padding[size] / 2)
-            margin-right: (--alert-padding[size] / 2)
-            margin-left: (--alert-padding[size] / 2)
+            padding: (--alert-padding[--size] / 2)
+            margin-right: (--alert-padding[--size] / 2)
+            margin-left: (--alert-padding[--size] / 2)
 
         > .icon
-            padding-left: --alert-padding[size]
-            padding-right: --alert-padding[size]
+            padding-left: --alert-padding[--size]
+            padding-right: --alert-padding[--size]

src/components/Alert/css/_variables.styl

@@ -8,14 +8,8 @@
 --alert-border-width := --border-width
 --alert-border-radius := --border-radius
 
---alert-padding-sm := --spacers['1'] * --size-percentages['sm']
---alert-padding-md := --spacers['1'] * --size-percentages['md']
---alert-padding-lg := --spacers['1'] * --size-percentages['lg']
---alert-padding := {
-    'sm': --alert-padding-sm
-    'md': --alert-padding-md
-    'lg': --alert-padding-lg
-}
+--alert-padding-base := --spacers['1']
+--alert-padding := -size-map(--alert-padding-base, --sizes, --size-multipliers)
 
 --alert-dismiss-size := 1rem
 
@@ -29,4 +23,4 @@
 --alert-variant-color-light := --variant-color-light
 --alert-variant-color-dark := --variant-color-dark
 
---variants['alert'] = -add-variant(--alert-variants, { color: --color-groups })
+--variants['alert'] = -add-variant(--alert-variants, { color: --color-groups })

src/components/Badge/css/_sizes.styl

@@ -1,11 +1,11 @@
 //
 // Badge sizes
 //
-for size in (sm md lg)
-    .badge.-{size}
-        border-radius: --badge-border-radius[size]
-        font-size: --badge-font-size[size]
-        padding: --badge-padding[size]
+for --size in --sizes
+    .badge.-{--size}
+        border-radius: --badge-border-radius[--size]
+        font-size: --badge-font-size[--size]
+        padding: --badge-padding[--size]
 
         &.-pill
-            padding: --badge-padding[size]
+            padding: --badge-padding[--size]

src/components/Badge/css/_variables.styl

@@ -12,14 +12,8 @@
 --badge-border-width := --border-width
 --badge-border-radius := --border-radius
 
---badge-padding-sm := --spacers['1/2'] * --size-percentages['sm'] --spacers['2/3'] * --size-percentages['sm']
---badge-padding-md := --spacers['1/2'] * --size-percentages['md'] --spacers['2/3'] * --size-percentages['md']
---badge-padding-lg := --spacers['1/2'] * --size-percentages['lg'] --spacers['2/3'] * --size-percentages['lg']
---badge-padding := {
-    'sm': --badge-padding-sm
-    'md': --badge-padding-md
-    'lg': --badge-padding-lg
-}
+--badge-padding-base := --spacers['1/2'] --spacers['2/3']
+--badge-padding := -size-map(--badge-padding-base, --sizes, --size-multipliers)
 
 --badge-pill-border-radius := 10rem
 

src/components/Breadcrumb/css/_sizes.styl

@@ -1,7 +1,7 @@
 //
 // Breadcrumb sizes
 //
-for size in (sm md lg)
-    .breadcrumb.-{size}
-        border-radius: --breadcrumb-border-radius[size]
-        font-size: --breadcrumb-font-size[size]
+for --size in --sizes
+    .breadcrumb.-{--size}
+        border-radius: --breadcrumb-border-radius[--size]
+        font-size: --breadcrumb-font-size[--size]

src/components/Breadcrumb/css/_variables.styl

@@ -5,14 +5,8 @@
 
 --breadcrumb-border-radius := --border-radius
 
---breadcrumb-padding-sm := --spacers['1/2'] * --size-percentages['sm'] --spacers['1'] * --size-percentages['sm']
---breadcrumb-padding-md := --spacers['1/2'] * --size-percentages['md'] --spacers['1'] * --size-percentages['md']
---breadcrumb-padding-lg := --spacers['1/2'] * --size-percentages['lg'] --spacers['1'] * --size-percentages['lg']
---breadcrumb-padding := {
-    'sm': --breadcrumb-padding-sm
-    'md': --breadcrumb-padding-md
-    'lg': --breadcrumb-padding-lg
-}
+--breadcrumb-padding-base := --spacers['1/2'] --spacers['1']
+--breadcrumb-padding := -size-map(--breadcrumb-padding-base, --sizes, --size-multipliers)
 
 --breadcrumb-margin-bottom := --spacer
 
@@ -28,4 +22,4 @@
 --breadcrumb-variant-color-light := --variant-color-light
 --breadcrumb-variant-color-dark := --variant-color-dark
 
---variants['breadcrumb'] = -add-variant(--breadcrumb-variants, { color: --color-groups })
+--variants['breadcrumb'] = -add-variant(--breadcrumb-variants, { color: --color-groups })

src/components/BreadcrumbItem/css/_sizes.styl

@@ -1,11 +1,11 @@
 //
 // Breadcrumb sizes
 //
-for size in (sm md lg)
-    .breadcrumb.-{size}
+for --size in --sizes
+    .breadcrumb.-{--size}
         > .item
-            padding-left: --breadcrumb-item-padding[size]
+            padding-left: --breadcrumb-item-padding[--size]
 
             + .item
                 &::before
-                    padding-right: --breadcrumb-item-padding[size]
+                    padding-right: --breadcrumb-item-padding[--size]