diff --git a/README.md b/README.md index 65b957ae4..483884fcb 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system - [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites -- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section -- [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens #### Components - [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content @@ -67,10 +65,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range - [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers - [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks +- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens - [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links - [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages +- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section - [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers - [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views diff --git a/bower.json b/bower.json index a20e4bb65..92a8b7b1d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.2.15", + "version": "0.3.1", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", diff --git a/docs/components.html b/docs/components.html index 3143683f2..ef5f18dcd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -104,12 +104,6 @@

Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -732,7 +732,7 @@

    Bars< </div> -

    Slider bars

    +

    Slider bars

    @@ -788,7 +788,7 @@

    Microsoft
    -
    Software and hardware
    +
    Software and hardware
    Empower every person and every organization on the planet to achieve more. @@ -888,7 +888,7 @@

    Card
    Apple
    -
    Hardware and software
    +
    Hardware and software
    OS X Yosemite @@ -913,7 +913,7 @@

    Card
    Google I/O
    -
    Software and hardware
    +
    Software and hardware
    An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. @@ -938,7 +938,7 @@

    Card
    Apple
    -
    Hardware and software
    +
    Hardware and software
    To make a contribution to the world by making tools for the mind that advance humankind. @@ -952,7 +952,7 @@

    Card
    Google
    -
    Software and hardware
    +
    Software and hardware
    Organize the world’s information and make it universally accessible and useful. @@ -978,7 +978,7 @@

    Card </div> <div class="card-header"> <div class="card-title h5">Microsoft</div> - <div class="card-subtitle">Software and hardware</div> + <div class="card-subtitle text-gray">Software and hardware</div> </div> <div class="card-body"> Empower every person and every organization on the planet to achieve more. @@ -1049,6 +1049,73 @@

    Chip

    +
    +

    Empty states

    +
    +

    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

    +
    +
    +
    +
    +
    + +
    +

    You have no new messages

    +

    Click the button to start a conversation

    +
    + +
    +
    +
    +
    +
    +
    + +
    +

    You've successfully signed up

    +

    Click the button to invite your friends

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +

    You are not following anyone

    +

    Start to meet new friends

    +
    + + +
    +
    +
    +
    + +
    +

    An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

    +
    + + +
    <div class="empty">
+  <div class="empty-icon">
+    <i class="icon icon-people"></i>
+  </div>
+  <p class="empty-title h5">You have no new messages</p>
+  <p class="empty-subtitle">Click the button to start a conversation.</p>
+  <div class="empty-action">
+    <button class="btn btn-primary">Send a message</button>
+  </div>
+</div>
+
    + +
    +
    @@ -1322,7 +1386,7 @@

    Candy ipsum

    </div> -

    Modal sizes

    +

    Modal sizes

    @@ -1338,8 +1402,8 @@

    Modal sizes

    - +
    @@ -1374,8 +1438,8 @@

    Modal sizes

    - +

    @@ -1491,14 +1555,14 @@

  • -

    Previous

    -

    Getting started

    +
    Previous
    +
    Getting started
  • -

    Next

    -

    Layout

    +
    Next
    +
    Layout
    • @@ -1512,14 +1576,14 @@

    Layout

    <ul class="pagination">
   <li class="page-item page-prev">
     <a href="#">
-      <p class="page-item-subtitle">Previous</p>
-      <h3 class="page-item-title">Getting started</h3>
+      <div class="page-item-subtitle">Previous</div>
+      <div class="page-item-title h5">Getting started</div>
     </a>
   </li>
   <li class="page-item page-next">
     <a href="#">
-      <p class="page-item-subtitle">Next</p>
-      <h3 class="page-item-title">Layout</h3>
+      <div class="page-item-subtitle">Next</div>
+      <div class="page-item-title h5">Layout</div>
     </a>
   </li>
 </ul>
@@ -1527,6 +1591,167 @@ 
    Layout
    +
    +

    Panels

    +
    +

    Panels are flexible view container with auto-expand content section.

    +
    +
    +
    +
    +
    +
    + Avatar +
    +
    Bruce Banner
    +
    THE HULK
    +
    + +
    +
    +
    +
    E-mail
    +
    bruce.banner@hulk.com
    +
    +
    + +
    +
    +
    +
    +
    Skype
    +
    bruce.banner
    +
    +
    + +
    +
    +
    +
    +
    Location
    +
    Dayton, Ohio
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    Comments
    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Thor Odinson

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Bruce Banner

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    +
    +
    +

    Tony Stark

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Steve Rogers

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    + Avatar +
    +
    +
    +

    Natasha Romanoff

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + +
    +

    Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

    +
    + + +
    <div class="panel">
+  <div class="panel-header">
+    <div class="panel-title">Comments</div>
+  </div>
+  <div class="panel-nav">
+    <!-- navigation components: tabs, breadcrumbs or pagination -->
+  </div>
+  <div class="panel-body">
+    <!-- contents -->
+  </div>
+  <div class="panel-footer">
+    <!-- buttons or inputs -->
+  </div>
+</div>
+
    + +
    +     -

    Headings

    +

    Headings

    H1 Heading 40px

    @@ -284,7 +284,7 @@
    H6 Heading 16px
    <span class="h1">H1 Heading</span> -

    Paragraphs

    +

    Paragraphs

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

    @@ -295,7 +295,7 @@

    Paragraphs

    <p>...</p> -

    Semantic text elements

    +

    Semantic text elements

    I18N @@ -374,7 +374,7 @@

    Semantic text elements

    -

    Optimized for east asian fonts

    +

    Optimized for east asian fonts

    你好, こんにちは, 안녕하세요
    Chinese (Simplified)
    @@ -409,7 +409,7 @@
    Korean
    <p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p> -

    Blockquote

    +

    Blockquote

    The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

    - Bill Gates @@ -422,7 +422,7 @@

    Blockquote

    </blockquote> -

    Lists

    +

    Lists

      @@ -555,11 +555,7 @@

      Bu
      -
      -
      -
      -
      @@ -568,60 +564,25 @@

      Bu

      Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

    -
    -

    Add the disabled class or the disabled attribute for a disabled button.

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -

    A button with the loading class can show loading indicator.

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - 
    <button class="btn">default button</button>
 <button class="btn btn-primary">primary button</button>
 <button class="btn btn-link">link button</button>
-
-<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
-<!-- a button with loading state -->
-<button class="btn loading">button</button>
    -

    Button sizes

    +

    Button sizes

    -
    +
    - + +
    +
    - + +
    +
    - +
    @@ -661,16 +622,73 @@

    Button sizes

    <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button> -

    Button groups

    +

    Button states

    + +
    +

    Add the active class for active button state style.

    +
    + +
    +
    + + + +
    +
    + + +
    
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    + +
    +

    Add the disabled class or the disabled attribute for disabled button state style.

    +
    +
    + + + +
    +
    + + +
    
+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    + +
    +

    A button with the loading class can show loading indicator.

    +
    + +
    +
    + + + +
    +
    + + +
    <!-- a button with loading state -->
+<button class="btn loading">button</button>
+
    + +

    Button groups

    +
    +
    - - - + + +
    -
    +
    @@ -679,14 +697,14 @@

    Button groups

    -
    +
    -
    +
    @@ -714,20 +732,80 @@

    Form

    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

    -
    -
    -
    - - -
    -
    - - -
    +
    +
    + + +
    +
    + + +
    +
    +
    + +
    <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+</div>
+
    + +
    +
    +
    + + +
    +
    +
    + +
    <!-- form textarea control -->
+<div class="form-group">
+<label class="form-label" for="input-example-3">Message</label>
+<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+
    + +
    +
    +
    + +
    +
    + +
    +
    +
    + +
    <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
    + +
    +
    +
    -
    - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    - -
    <form>
-  <!-- form input control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
-  </div>
-  <!-- form radio control -->
-  <div class="form-group">
-    <label class="form-label">Gender</label>
-    <label class="form-radio">
-      <input type="radio" name="gender" />
-      <i class="form-icon"></i> Male
-    </label>
-    <label class="form-radio">
-      <input type="radio" name="gender" checked />
-      <i class="form-icon"></i> Female
-    </label>
-  </div>
-  <!-- form select control -->
-  <div class="form-group">
-    <select class="form-select">
-      <option>Choose an option</option>
-      <option>Slack</option>
-      <option>Skype</option>
-      <option>Hipchat</option>
-    </select>
-  </div>
-  <!-- form switch control -->
-  <div class="form-group">
-    <label class="form-switch">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Send me emails with news and tips
-    </label>
-  </div>
-  <!-- form textarea control -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-3">Message</label>
-    <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-  </div>
-  <!-- form checkbox control -->
-  <div class="form-group">
-    <label class="form-checkbox">
-      <input type="checkbox" />
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
+
    <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked />
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender" />
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
    
+
+          
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+          
    
+
+
    <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
    
+
+          
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+          
    
+
+
    <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox" />
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
 
    
 
           
    
             
    You can use :indeterminate pseudo class for indeterminate state of checkboxes.
    
           
    
 
-          
    Horizontal forms
    
+          
    Horizontal forms
    
           
    
             
    If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] class to the child elements for form row layout. 
    
           
    
@@ -860,7 +926,9 @@ 
    Horizontal forms
    -
    +
    + +
    @@ -1042,7 +1111,7 @@

    Form icons

    </div>     -

    Input types

    +

    Input types

    @@ -1122,7 +1191,7 @@

    Input types

    -

    Input groups

    +

    Input groups

    @@ -1205,7 +1274,7 @@

    Input groups

    </div> -

    Form validation styles

    +

    Form validation styles

    To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

    @@ -1251,7 +1320,7 @@

    Form validation styles

    - form-checkbox, radio and switch + form-checkbox, radio and switch (Error status only)

    Spectre CSS file (~10KB min+gzip):

    -

    Download Spectre.css

    +

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    +

    Download Spectre.css

    Include spectre.css located in /docs/dist in your website or Web app <head>. Also, you can add spectre-icons.css and spectre-exp.css accordingly.

    @@ -315,18 +315,29 @@
    Install with Bower

    Custom version

    -

    Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less, spectre-exp.less and spectre-icons.less.

    +

    You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from .less source files.

    +

    Spectre.css Source Code

    +
    +

    Compiling CSS

    +
    +

    Spectre uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.

    Then, you can build the CSS file from the command line:

    1. Navigate to the root directory of Spectre.
    2. Run npm install. NPM will install all dev dependencies as listed in package.json.
      3. -
    3. When completed, run gulp build to compile LESS to CSS and minify files.
      4. +
    4. When completed, run gulp build task to compile LESS to CSS and minify files.
    5. You can find compiled CSS files in /dist directory.
    -

    You can watch file changes and rebuild CSS files by using gulp watch.

    +

    All available Gulp tasks:

    +
      +
    • gulp build - compile LESS to CSS and minify files (default)
      • +
    • gulp docs - compile Docs related files
      • +
    • gulp watch - watch file changes and re-compile CSS files
      • +
    - +

    Folder Structure

    + 
    spectre/
 ├── dist/                               // Build folder (Git ignored)
 │   ├── spectre-exp.css
@@ -364,9 +375,9 @@ 
    C
 
           
    Variables
    
           
    
-            
    Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design.
+            
    Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design.
    
           
    
-          
    Colors
      
+          
    Colors
    
           
    
             
    
               
    
@@ -445,11 +456,39 @@ 
    Colors
    
               
    
             
    
           
    
-          
    Sizes
    
+          
+          
    Sizes
    
           
    
             
    The default REM (root em) size in Spectre.css is 20px. 
    
-            
    Please note in Chinese/Japanese/Korean Chrome, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate. 
    
-            
    Spectre also use 4px as the unit size. Sizes of components are based on the unit size. 
    
+            
    Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate. 
    
+            
    Spectre uses 4px as the unit size. Sizes of components are based on the unit size. 
    
+          
    
+          
+          
    Custom prefix
    
+          
    
+            
    There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it. 
    
+          
    
+
+
+
    $ npm install gulp-css-prefix
+
    
+
+          
    
+            
    To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.
    
+          
    
+
+
+
    var cssPrefix = require('gulp-css-prefix');
+  
+gulp.task('prefix', function() {
+  gulp.src('./dist/*.css')
+      .pipe(cssPrefix('spectre-'))
+      .pipe(gulp.dest('./dist'))
+});
+
    
+
+          
    
+            
    After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.
    @@ -475,6 +514,12 @@

    B

    What's new

    +

    August 2017

    +

    April 2017

    • @@ -493,7 +538,7 @@

      W

      March 2017

      • - Icons: single-element, responsive and pure CSS icons NEW + Icons: single-element, responsive and pure CSS icons
      • Popovers: small overlay content containers @@ -531,6 +576,7 @@

        W
        • Initial commit
        +

        Releases

    diff --git a/docs/index.html b/docs/index.html index 20489da20..e98754dbe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,27 +12,21 @@ -
    -
    +
    +
    -
    -
    - -
    -

    Spectre.css

    A lightweight, responsive and modern CSS framework

    -
    -
    - Docs - GitHub -
    -
    +

    + Docs + GitHub +

    +

    Latest version:

    @@ -72,11 +66,11 @@

    A lightweight, responsive and modern CSS framework

    Installation

    -
    +

    There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.

    -
    - Get started +
    + Install Spectre.css
    diff --git a/docs/layout.html b/docs/layout.html index edf206b51..15a9dec77 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -104,12 +104,6 @@

    Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -318,7 +318,7 @@

    Flexb

    Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

    -

    And you can add the col-gapless class to have gapless columns.

    +

    And you can add the col-gapless class to the columns to have gapless columns.

    @@ -356,34 +356,87 @@

    Flexb <div class="column col-6">col-6</div> <div class="column col-6">col-6</div> </div> + + <div class="columns col-oneline"> + <div class="column col-8">col-8</div> + <div class="column col-8">col-8</div> + </div> </div> -

    - -
    -

    Responsive grid

    +

    Grid offset

    -

    Spectre provides a neat responsive layout grid system and responsive visibility utilities.

    +

    The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

    +
    + +
    +
    +
    col-2
    +
    +
    +
    col-4 col-mx-auto
    +
    +
    +
    +
    +
    col-2
    +
    +
    +
    col-4 col-ml-auto
    +
    -
    -
    col-lg-6
    +
    +
    col-4 col-ml-auto
    +
    +
    +
    col-2
    +
    +
    +
    +
    +
    col-4 col-mx-auto
    +
    +
    +
    col-2
    -
    -
    col-md-6
    +
    +
    col-4 col-mr-auto
    +
    +
    +
    col-2
    -
    -
    col-sm-6
    +
    +
    col-4 col-mx-auto
    + + +
    <div class="container">
+  <div class="columns">
+    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+    <div class="column col-2">col-2</div>
+  </div>
+</div>
+
    + +
    + +
    +

    Responsive

    +
    +

    Spectre provides a neat responsive layout grid system and responsive visibility utilities.

    +
    -
    -
    col-xs-6
    +
    +
    col-10
    col-lg-8
    col-md-6
    col-sm-4
    +
    +
    +
    col-2
    col-lg-4
    col-md-6
    col-sm-8
    @@ -408,7 +461,7 @@

    /div> -

    Responsive container

    +

    Responsive container

    The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.

    @@ -422,11 +475,11 @@

    Responsive container

    </div> -

    Responsive visibility

    +

    Responsive visibility

    The responsive visibility utilities help show and hide elements on specific viewport sizes.

    - +
    @@ -492,7 +545,7 @@

    Responsive visibility

    -
    +
    @@ -643,234 +696,6 @@

    Nav -
    -

    Panels

    -
    -

    Panels are flexible view container layout with auto-expand content section.

    -
    -
    -
    -
    -
    -
    - Avatar -
    -
    Bruce Banner
    -
    THE HULK
    -
    - -
    -
    -
    -
    E-mail
    -
    bruce.banner@hulk.com
    -
    -
    - -
    -
    -
    -
    -
    Skype
    -
    bruce.banner
    -
    -
    - -
    -
    -
    -
    -
    Location
    -
    Dayton, Ohio
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    Comments
    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Thor Odinson

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Bruce Banner

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    -
    -
    -
    -
    -
    -
    -
    -

    Tony Stark

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Steve Rogers

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Natasha Romanoff

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - -
    -

    Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

    -
    - - -
    <div class="panel">
-  <div class="panel-header">
-    <div class="panel-title">Comments</div>
-  </div>
-  <div class="panel-nav">
-    <!-- navigation components: tabs, breadcrumbs or pagination -->
-  </div>
-  <div class="panel-body">
-    <!-- contents -->
-  </div>
-  <div class="panel-footer">
-    <!-- buttons or inputs -->
-  </div>
-</div>
-
    - -
    - -
    -

    Empty states / blank slates

    -
    -

    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

    -
    -
    -
    -
    -
    - -
    -

    You have no new messages

    -

    Click the button to start a conversation

    -
    - -
    -
    -
    -
    -
    -
    - -
    -

    You've successfully signed up

    -

    Click the button to invite your friends

    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -

    You are not following anyone

    -

    Start to meet new friends

    -
    - - -
    -
    -
    -
    - -
    -

    An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

    -
    - - -
    <div class="empty">
-  <div class="empty-icon">
-    <i class="icon icon-people"></i>
-  </div>
-  <p class="empty-title h5">You have no new messages</p>
-  <p class="empty-subtitle">Click the button to start a conversation.</p>
-  <div class="empty-action">
-    <button class="btn btn-primary">Send a message</button>
-  </div>
-</div>
-
    - -
    -

    GitHub | Twitter | PayPal Donate | Version

    Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.

    diff --git a/docs/src/docs.less b/docs/src/docs.less index b16bf3db8..7bb83a57f 100644 --- a/docs/src/docs.less +++ b/docs/src/docs.less @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.2.15"; + content: "0.3.1"; } // Core variables and mixins @import '../../src/variables.less'; @@ -139,7 +139,7 @@ .docs-block { border-radius: @border-radius; - padding: .5rem; + padding: @unit-2; &.bg-gray { background: @bg-color-dark; @@ -293,24 +293,17 @@ } /* Spectre Homepage style */ -.section-header { - backdrop-filter: blur(.5rem); // Safari only feature - background: fade(@bg-color, 90%); +.section-hero { padding: 1rem .5rem; - position: fixed; - top: 0; - width: 100%; - z-index: @zindex-2; + position: relative; .s-brand { - padding: 0; - position: static; - } -} + position: absolute; -.section-hero { - padding: 1.5rem .5rem; - position: relative; + h2 { + color: @primary-color; + } + } .column { padding: @layout-spacing; @@ -347,7 +340,7 @@ } .grid-hero { - margin-top: 5rem; + margin-top: 6rem; margin-bottom: 2rem; h1 { @@ -469,6 +462,7 @@ .s-title, .s-subtitle { + padding-top: 5rem; position: static; &::before { @@ -476,6 +470,22 @@ } } } + + .section-hero { + .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + + .s-logo { + height: auto; + } + + img { + height: 3.2rem; + width: 3.2rem; + } + } + } } @media screen and (max-width: 600px) { @@ -492,7 +502,7 @@ padding: 3.5rem .5rem 0 .5rem; .docs-block { - padding: .5rem .1rem; + padding: @unit-2 @unit-h; } .anchor { diff --git a/docs/utilities.html b/docs/utilities.html index 5077792f3..d50271287 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -104,12 +104,6 @@

    Spectre.css

  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@

    Spectre.css

  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@

    Spectre.css

  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -256,12 +256,12 @@

    Col

    Color utilities are used for changing colors for text, link and background.

    -

    Text colors

    +

    Text colors

    primary color

    secondary color

    gray color

    -

    light color

    +

    light color

    success color

    warning color

    error color

    @@ -278,13 +278,13 @@

    Text colors

    -

    primary link

    -

    secondary link

    -

    gray link

    -

    light link

    -

    success link

    -

    warning link

    -

    error link

    +

    primary link

    +

    secondary link

    +

    gray link

    +

    light link

    +

    success link

    +

    warning link

    +

    error link

    @@ -297,15 +297,15 @@

    Text colors

    <a class="text-error" href="#">error color</a> -

    Background colors

    +

    Background colors

    -

    primary bg

    -

    secondary bg

    -

    dark bg

    -

    gray bg

    -

    success bg

    -

    warning bg

    -

    error bg

    +

    primary bg

    +

    secondary bg

    +

    dark bg

    +

    gray bg

    +

    success bg

    +

    warning bg

    +

    error bg

    @@ -328,21 +328,22 @@

    Di 
    <!-- display: block; -->
-<div class="block"></div>
+<div class="d-block"></div>
 <!-- display: inline; -->
-<div class="inline"></div>
+<div class="d-inline"></div>
 <!-- display: inline-block; -->
-<div class="inline-block"></div>
+<div class="d-inline-block"></div>
 <!-- display: flex; -->
-<div class="flex"></div>
+<div class="d-flex"></div>
 <!-- display: inline-flex; -->
-<div class="inline-flex"></div>
+<div class="d-inline-flex"></div>
 <!-- display: none; -->
-<div class="hide"></div>
+<div class="d-none"></div>
+<div class="d-hide"></div>
 <!-- visibility: visible; -->
-<div class="visible"></div>
+<div class="d-visible"></div>
 <!-- visibility: hidden; -->
-<div class="invisible"></div>
+<div class="d-invisible"></div>
 <!-- hide text contents -->
 <div class="text-hide"></div>
 <!-- assistive text for screen reader -->
@@ -428,7 +429,7 @@ 
    Di
         
    
           
    Loading
    
           
    
-            
    Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status. Add the btn-lg class for large size. 
    
+            
    Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.
    
           
    
           
    
             
    
@@ -436,8 +437,8 @@ 
    Lo
             
    
           
    
           
    
-              
    Add the btn-lg class for large size. 
    
-            
    
+            
    Add the loading-lg class for large size. 
    
+          
    
           
    
             
    
               
    
diff --git a/package.json b/package.json
index 9a8e46115..e38e69e72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.15",
+  "version": "0.3.1",
   "homepage": "http://picturepan2.github.io/spectre",
   "author": "Yan Zhu ",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
diff --git a/spectre.less b/spectre.less
index c61207ea9..14c150d6b 100644
--- a/spectre.less
+++ b/spectre.less
@@ -29,15 +29,18 @@
 @import 'src/autocomplete.less';
 @import 'src/avatars.less';
 @import 'src/badges.less';
+@import 'src/breadcrumbs.less';
 @import 'src/bars.less';
 @import 'src/cards.less';
 @import 'src/chips.less';
 @import 'src/dropdowns.less';
 @import 'src/menus.less';
 @import 'src/modals.less';
-@import 'src/navigation.less';
+@import 'src/navs.less';
+@import 'src/pagination.less';
 @import 'src/popovers.less';
 @import 'src/steps.less';
+@import 'src/tabs.less';
 @import 'src/tiles.less';
 @import 'src/toasts.less';
 @import 'src/tooltips.less';
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 280250b41..0b0f757d0 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -1,5 +1,7 @@
 // Breadcrumbs
 .breadcrumb {
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .breadcrumb-item {
diff --git a/src/buttons.less b/src/buttons.less
index 3f1e326ce..1beba4d77 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -91,13 +91,13 @@
   &.btn-sm {
     font-size: @font-size-sm;
     height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    padding: @control-padding-v-sm @control-padding-h * .75;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
     height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    padding: @control-padding-v-lg @control-padding-h * 1.5;
   }
 
   // Button Block
diff --git a/src/cards.less b/src/cards.less
index 1a84c21c2..dadfa8bfd 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -3,7 +3,8 @@
   background: @bg-color-light;
   border: @border-width solid @border-color;
   border-radius: @border-radius;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
   .card-header,
   .card-body,
@@ -35,8 +36,4 @@
       }
     }
   }
-
-  .card-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-}
+}
\ No newline at end of file
diff --git a/src/empty.less b/src/empty.less
index acfc8a026..b6cb1ae58 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -15,10 +15,6 @@
     margin: @layout-spacing auto;
   }
 
-  .empty-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
-
   .empty-action {
     margin-top: @layout-spacing-lg;
   }
diff --git a/src/forms.less b/src/forms.less
index b0e9a9e67..bc9b57160 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -81,7 +81,7 @@ legend {
 
   // Input types
   &[type="file"] {
-    height: auto;
+    padding: .125rem;
   }
 }
 
@@ -109,20 +109,23 @@ legend {
   border-radius: @border-radius;
   color: inherit;
   font-size: @font-size;
+  height: @control-size;
   line-height: @line-height;
   outline: none;
   padding: @control-padding-v @control-padding-h;
   vertical-align: middle;
   width: 100%;
 
+  &[size],
   &[multiple] {
+    height: auto;
+    
     option {
       padding: @unit-h @unit-1;
     }
   }
-  &:not([multiple]) {
+  &:not([multiple]):not([size]) {
     background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    height: @control-size;
     padding-right: @control-icon-size + @control-padding-h;
   }
   &:focus {
diff --git a/src/labels.less b/src/labels.less
index dfef4b68a..c67759bc1 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -7,6 +7,10 @@
     .label-variant(@light-color, @primary-color);
   }
 
+  &.label-secondary {
+    .label-variant(@primary-color, @secondary-color);
+  }
+
   &.label-success {
     .label-variant(@light-color, @control-color-success);
   }
diff --git a/src/layout.less b/src/layout.less
index 36323fff1..7fd2c60a4 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -28,6 +28,15 @@
   }
 }
 
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
 // Responsive grid system
 .columns {
   display: flex;
@@ -39,7 +48,7 @@
     margin-left: 0;
     margin-right: 0;
 
-    .column {
+    & > .column {
       padding-left: 0;
       padding-right: 0;
     }
@@ -106,6 +115,21 @@
 .col-1 {
   width: 8.33333333%;
 }
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
 @media screen and (max-width: @size-xl ) {
   .col-xl-12,
   .col-xl-11,
@@ -157,6 +181,12 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-lg ) {
   .col-lg-12,
@@ -209,6 +239,12 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-md ) {
   .col-md-12,
@@ -261,6 +297,12 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-sm ) {
   .col-sm-12,
@@ -313,6 +355,12 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-xs) {
   .col-xs-12,
@@ -365,17 +413,6 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
-}
-
-// Responsive breakpoint system
-.show-xs,
-.show-sm,
-.show-md,
-.show-lg,
-.show-xl {
-  display: none !important;
-}
-@media screen and (max-width: @size-xs) {
   .hide-xs {
     display: none !important;
   }
@@ -383,35 +420,3 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-sm) {
-  .hide-sm {
-    display: none !important;
-  }
-  .show-sm {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-md) {
-  .hide-md {
-    display: none !important;
-  }
-  .show-md {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-lg) {
-  .hide-lg {
-    display: none !important;
-  }
-  .show-lg {
-    display: block !important;
-  }
-}
-@media screen and (max-width: @size-xl) {
-  .hide-xl {
-    display: none !important;
-  }
-  .show-xl {
-    display: block !important;
-  }
-}
diff --git a/src/media.less b/src/media.less
index 455d77c5e..a55b8cb55 100644
--- a/src/media.less
+++ b/src/media.less
@@ -32,6 +32,7 @@
   iframe,
   object,
   embed {
+    border: 0;
     bottom: 0;
     height: 100%;
     left: 0;
diff --git a/src/mixins.less b/src/mixins.less
index 52cd74351..6fd4d6d93 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -35,8 +35,8 @@
 .label-base() {
   border-radius: @border-radius;
   display: inline-block;
-  line-height: 1;
-  padding: .2em .3em;
+  line-height: 1.2;
+  padding: .1em .3em;
   vertical-align: baseline;
 }
 
@@ -51,55 +51,55 @@
 }
 
 // Position utility mixin
-.margin-variant(@size: 1) {
-  .m-@{size} {
-    padding: @size * @unit-1;
+.margin-variant(@id: 1, @size: 1) {
+  .m-@{id} {
+    margin: @size;
   }
-  .mb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .mb-@{id} {
+    margin-bottom: @size;
   }
-  .ml-@{size} {
-    padding-left: @size * @unit-1;
+  .ml-@{id} {
+    margin-left: @size;
   }
-  .mr-@{size} {
-    padding-right: @size * @unit-1;
+  .mr-@{id} {
+    margin-right: @size;
   }
-  .mt-@{size} {
-    padding-top: @size * @unit-1;
+  .mt-@{id} {
+    margin-top: @size;
   }
-  .mx-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .mx-@{id} {
+    margin-left: @size;
+    margin-right: @size;
   }
-  .my-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .my-@{id} {
+    margin-bottom: @size;
+    margin-top: @size;
   }
 }
 
-.padding-variant(@size: 1) {
-  .p-@{size} {
-    padding: @size * @unit-1;
+.padding-variant(@id: 1, @size: 1) {
+  .p-@{id} {
+    padding: @size;
   }
-  .pb-@{size} {
-    padding-bottom: @size * @unit-1;
+  .pb-@{id} {
+    padding-bottom: @size;
   }
-  .pl-@{size} {
-    padding-left: @size * @unit-1;
+  .pl-@{id} {
+    padding-left: @size;
   }
-  .pr-@{size} {
-    padding-right: @size * @unit-1;
+  .pr-@{id} {
+    padding-right: @size;
   }
-  .pt-@{size} {
-    padding-top: @size * @unit-1;
+  .pt-@{id} {
+    padding-top: @size;
   }
-  .px-@{size} {
-    padding-left: @size * @unit-1;
-    padding-right: @size * @unit-1;
+  .px-@{id} {
+    padding-left: @size;
+    padding-right: @size;
   }
-  .py-@{size} {
-    padding-bottom: @size * @unit-1;
-    padding-top: @size * @unit-1;
+  .py-@{id} {
+    padding-bottom: @size;
+    padding-top: @size;
   }
 }
 
diff --git a/src/navigation.less b/src/navigation.less
deleted file mode 100644
index a12988610..000000000
--- a/src/navigation.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// Navigation
-.breadcrumb,
-.tab,
-.pagination,
-.nav {
-  list-style: none;
-  margin: @unit-1 0;
-}
-
-@import 'breadcrumbs.less';
-@import 'tabs.less';
-@import 'pagination.less';
-@import 'navs.less';
diff --git a/src/navs.less b/src/navs.less
index edfc3d379..5f471b09b 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -2,6 +2,8 @@
 .nav {
   display: flex;
   flex-direction: column;
+  list-style: none;
+  margin: @unit-1 0;
 
   .nav-item {
     a {
diff --git a/src/pagination.less b/src/pagination.less
index 0523bad55..7372c590c 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -1,6 +1,8 @@
 // Pagination
 .pagination {
   display: flex;
+  list-style: none;
+  margin: @unit-1 0;
   padding: @unit-1 0;
 
   .page-item {
diff --git a/src/panels.less b/src/panels.less
index 873d21f76..3c6bae893 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -20,8 +20,4 @@
     overflow-y: auto;
     padding: 0 @layout-spacing-lg;
   }
-
-  .panel-subtitle {
-    color: lighten(@body-font-color, 40%);
-  }
 }
diff --git a/src/tabs.less b/src/tabs.less
index 1abfe75a4..c5af2b603 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,8 +1,11 @@
 // Tabs
 .tab {
   align-items: center;
+  border-bottom: @border-width solid @border-color;
   display: flex;
   flex-wrap: wrap;
+  list-style: none;
+  margin: @unit-1 0 @unit-1 - @border-width 0;
 
   .tab-item {
     margin-top: 0;
@@ -16,8 +19,8 @@
       border-bottom: @border-width-lg solid transparent;
       color: inherit;
       display: block;
-      margin-top: 0;
-      padding: 6px 12px 4px 12px;
+      margin: 0 @unit-2 0 0;
+      padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -36,6 +39,10 @@
       flex: 1 0 0;
       text-align: center;
 
+      a {
+        margin: 0;
+      }
+
       .badge {
         &[data-badge]::after {
           position: absolute;
diff --git a/src/tiles.less b/src/tiles.less
index 79c1a6967..a99540ea3 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -17,11 +17,8 @@
       padding-right: @unit-2;
     }
   }
-  .tile-title {
-    line-height: @line-height;
-  }
+  .tile-title,
   .tile-subtitle {
-    color: lighten(@body-font-color, 40%);
     line-height: @line-height;
   }
 
diff --git a/src/utilities/display.less b/src/utilities/display.less
index a00aa4a11..26e611e36 100644
--- a/src/utilities/display.less
+++ b/src/utilities/display.less
@@ -1,26 +1,27 @@
 // Display
-.block {
+.d-block {
   display: block;
 }
-.inline {
+.d-inline {
   display: inline;
 }
-.inline-block {
+.d-inline-block {
   display: inline-block;
 }
-.flex {
+.d-flex {
   display: flex;
 }
-.inline-flex {
+.d-inline-flex {
   display: inline-flex;
 }
+.d-none,
 .hide {
   display: none !important;
 }
-.visible {
+.d-visible {
   visibility: visible;
 }
-.invisible {
+.d-invisible {
   visibility: hidden;
 }
 .text-hide {
diff --git a/src/utilities/position.less b/src/utilities/position.less
index 1bf33b54d..235d6a645 100644
--- a/src/utilities/position.less
+++ b/src/utilities/position.less
@@ -26,8 +26,10 @@
 }
 
 // Spacing
-.margin-variant(1);
-.margin-variant(2);
+.margin-variant(0, 0);
+.margin-variant(1, @unit-1);
+.margin-variant(2, @unit-2);
 
-.padding-variant(1);
-.padding-variant(2);
\ No newline at end of file
+.padding-variant(0, 0);
+.padding-variant(1, @unit-1);
+.padding-variant(2, @unit-2);
\ No newline at end of file