material 0.9.24 → 0.9.26

package/eslint.config.js

@@ -0,0 +1,63 @@
+import js from '@eslint/js'
+import globals from 'globals'
+
+export default [
+  // Base configuration
+  js.configs.recommended,
+
+  // Standard JS configuration for material library
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        // Material library specific globals
+        log: 'readonly',
+        document: 'readonly',
+        window: 'readonly',
+        navigator: 'readonly',
+        Element: 'readonly',
+        HTMLElement: 'readonly',
+        Event: 'readonly',
+        EventTarget: 'readonly',
+        CustomEvent: 'readonly',
+        localStorage: 'readonly',
+        sessionStorage: 'readonly',
+        requestAnimationFrame: 'readonly',
+        cancelAnimationFrame: 'readonly'
+      }
+    },
+    rules: {
+      // Standard JS rules - core formatting
+      'no-var': 'error',
+      'prefer-const': 'error',
+      'semi': ['error', 'never'],
+      'quotes': ['error', 'single', { avoidEscape: true }],
+      'space-before-function-paren': ['error', 'always'],
+      'object-curly-spacing': ['error', 'always'],
+      'comma-spacing': ['error', { before: false, after: true }],
+      'key-spacing': ['error', { beforeColon: false, afterColon: true }],
+      'no-trailing-spaces': 'error',
+      'eol-last': 'error',
+      'no-multiple-empty-lines': ['error', { max: 1 }],
+      'indent': ['error', 2],
+      'comma-dangle': ['error', 'never'],
+      'space-infix-ops': 'error',
+      'keyword-spacing': ['error', { before: true, after: true }],
+      'space-before-blocks': 'error',
+      'arrow-spacing': ['error', { before: true, after: true }]
+    }
+  },
+
+  // Ignore patterns
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'build/**',
+      '*.min.js'
+    ]
+  }
+]

package/index.d.ts

@@ -0,0 +1,77 @@
+declare module "material" {
+  // Base classes
+  export class Component {
+    constructor(options?: any);
+    options: any;
+    element: HTMLElement;
+    ui: any;
+    underlay?: HTMLElement;
+    position(target: HTMLElement): void;
+    destroy(): Promise<void>;
+    static defaults: any;
+  }
+
+  export class Control extends Component {}
+
+  export class Element {
+    constructor(options?: any);
+    static isElement(): boolean;
+  }
+
+  // Components
+  export class AppBar extends Component {}
+  export class Badge extends Component {}
+  export class Button extends Component {}
+  export class Card extends Component {}
+  export class Checkbox extends Component {}
+  export class ColorPicker extends Component {}
+  export class DateHour extends Component {}
+  export class Dialog extends Component {}
+  export class Drawer extends Component {}
+  export class File extends Component {}
+  export class Form extends Component {}
+  export class Image extends Component {}
+  export class List extends Component {}
+  export class Loading extends Component {}
+  export class Menu extends Component {}
+  export class Navigation extends Component {}
+  export class Progress extends Component {}
+  export class Select extends Component {}
+  export class Selecter extends Component {}
+  export class Snackbar extends Component {}
+  export class Slider extends Component {}
+  export class Switch extends Component {}
+  export class Switcher extends Component {}
+  export class Tabs extends Component {}
+  export class TabView extends Component {}
+  export class Text extends Component {}
+  export class Textfield extends Component {}
+  export class Toolbar extends Component {}
+  export class Tooltip extends Component {}
+  export class View extends Component {}
+
+  // Mixins
+  export const EventEmitter: any;
+  export const display: any;
+  export const build: any;
+  export const position: {
+    position(target: HTMLElement, position?: any): any;
+  };
+
+  // Modules
+  export const attributes: any;
+  export const clone: any;
+  export const create: any;
+  export const dataset: any;
+  export const device: any;
+  export const emitter: any;
+  export const events: any;
+  export const jsonToHTML: any;
+  export const mediator: any;
+  export const merge: any;
+  export const observer: any;
+  export const request: any;
+  export const ripple: any;
+  export const smoothscroll: any;
+  export function touch(): boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.9.24",
+  "version": "0.9.26",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/module/extract.js

@@ -1,42 +1,43 @@
-
 /**
  * extract.e extract a event and the context
  * @param  {[type]} str [description]
  * @return {[type]}     [description]
  */
 const e = (instance, ev) => {
-  if (!ev) return instance
+  if (!ev) return instance;
   else if (!ev.match(/\./)) {
     return {
       element: instance,
-      name: ev
-    }
+      name: ev,
+    };
   }
 
-  let iteration
-  const obj = {}
-  let element
+  let iteration;
+  const obj = {};
+  let element;
 
-  const keys = ev.split('.')
+  const keys = ev.split(".");
 
-  if (keys[0] === 'window') {
-    element = window
+  if (keys[0] === "window") {
+    element = window;
+  } else if (keys[0] === "document") {
+    element = document;
   } else {
     for (let i = 0, l = keys.length; i <= l; i++) {
-      const key = keys[i]
-      iteration = iteration || instance
-      iteration = iteration[key]
+      const key = keys[i];
+      iteration = iteration || instance;
+      iteration = iteration[key];
 
       if (i === keys.length - 2) {
-        element = iteration
+        element = iteration;
       }
     }
   }
 
-  obj.element = element
-  obj.name = keys[keys.length - 1]
-  return obj
-}
+  obj.element = element;
+  obj.name = keys[keys.length - 1];
+  return obj;
+};
 
 /**
  * extract.f extract a function from a string using dot
@@ -44,22 +45,22 @@ const e = (instance, ev) => {
  * @return {function}      The function
  */
 const f = (instance, func) => {
-  if (!func) return
+  if (!func) return;
 
-  if (typeof func === 'function') {
-    return func
-  } else if (!func.match(/\./)) return instance[func]
-  let iteration
+  if (typeof func === "function") {
+    return func;
+  } else if (!func.match(/\./)) return instance[func];
+  let iteration;
 
-  const keys = func.split('.')
+  const keys = func.split(".");
   for (let i = 0, l = keys.length; i < l; i++) {
-    const key = keys[i]
+    const key = keys[i];
 
-    iteration = iteration || instance
-    iteration = iteration[key]
+    iteration = iteration || instance;
+    iteration = iteration[key];
   }
 
-  return iteration
-}
+  return iteration;
+};
 
-export default { e, f }
+export default { e, f };

package/src/module/request.js

@@ -64,7 +64,22 @@ const request = async (
       if (debug) {
         console.error('Response error:', response.status, response.statusText)
       }
-      throw new Error(`HTTP error! status: ${response.status}`)
+
+      // Try to parse error response as JSON to preserve backend error data
+      let errorData
+      try {
+        errorData = await response.json()
+      } catch (jsonError) {
+        // If JSON parsing fails, throw basic error (backward compatible)
+        throw { error: `HTTP error! status: ${response.status}` }
+      }
+
+      // If we successfully parsed JSON, throw it with all data
+      // If we successfully parsed JSON, throw it with all data
+      throw {
+        error: errorData.error || `HTTP error! status: ${response.status}`,
+        ...errorData
+      }
     }
 
     // Handle response based on Accept header
@@ -77,7 +92,12 @@ const request = async (
     if (headers.Accept === 'text/xml') {
       throw error
     } else {
-      throw { error: error.message || 'Request failed' }
+      // If error is already an object with error field, preserve it
+      if (typeof error === 'object' && error.error) {
+        throw error
+      } else {
+        throw { error: error.message || 'Request failed' }
+      }
     }
   }
 }

package/src/skin/material/base/body.scss

@@ -0,0 +1,83 @@
+
+// HTML Tags General Defintion
+html {
+  font-size: 100%;
+  line-height: 1.15;
+  width: 100%;
+  height: 100%;
+
+}
+body {
+  color: rgba(0, 0, 0, 0.67);
+  font-family: Roboto, arial, serif {
+    /* empty */
+  }
+  font-size: 100%;
+  // position: relative
+  // display: block
+  // height: 100%
+  // width: 100%
+  // overflow: hidden
+  margin: 0;
+  padding: 0;
+  // user-select: none
+
+}
+input, {
+  /* empty */
+}
+textarea, {
+  /* empty */
+}
+keygen, {
+  /* empty */
+}
+select, {
+  /* empty */
+}
+button {
+  font-size: 1em;
+  font-family: Roboto, arial, serif {
+    /* empty */
+  }
+  color: rgb(51, 51, 51);
+
+}
+p {
+  line-height: 20px;
+  padding-top: 6px;
+  margin-bottom: 14px;
+  letter-spacing: 0;
+  font-weight: 400;
+
+// get rid of outline
+}
+select, {
+  /* empty */
+}
+input, {
+  /* empty */
+}
+textarea, {
+  /* empty */
+}
+button {
+  outline: none;
+  &:hover {
+    outline: none;
+
+  }
+}
+button {
+  user-select: none;
+
+// set all container boder-box
+}
+* {
+  box-sizing: border-box;
+
+}
+a {
+  color: rgba(0, 0, 0, 0.7);
+
+}

package/src/skin/material/base/{elevation.sass → elevation.scss}

@@ -1,50 +1,76 @@
-.elevation-z0
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
-.elevation-z1
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
-.elevation-z2
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
-.elevation-z3
-  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)
-.elevation-z4
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-.elevation-z5
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12)
-.elevation-z6
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
-.elevation-z7
-  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)
-.elevation-z8
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
-.elevation-z9
-  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12)
-.elevation-z10
-  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12)
-.elevation-z11
-  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12)
-.elevation-z12
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
-.elevation-z13
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12)
-.elevation-z14
-  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12)
-.elevation-z15
-  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12)
-.elevation-z16
-  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
-.elevation-z17
-  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12)
-.elevation-z18
-  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12)
-.elevation-z19
-  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12)
-.elevation-z20
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12)
-.elevation-z21
-  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12)
-.elevation-z22
-  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12)
-.elevation-z23
-  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12)
-.elevation-z24
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
+.elevation-z0 {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z1 {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z2 {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z3 {
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z4 {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z5 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z6 {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.elevation-z7 {
+  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+.elevation-z8 {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.elevation-z9 {
+  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+.elevation-z10 {
+  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+.elevation-z11 {
+  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+.elevation-z12 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z13 {
+  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z14 {
+  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+.elevation-z15 {
+  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z16 {
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z17 {
+  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+.elevation-z18 {
+  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+.elevation-z19 {
+  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+.elevation-z20 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z21 {
+  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z22 {
+  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+.elevation-z23 {
+  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+.elevation-z24 {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+
+}

package/src/skin/material/base/{grid.sass → grid.scss}

@@ -3,61 +3,73 @@
 /////////////////
 
 // Defaults which you can freely override
-$column-width: 60px
-$gutter-width: 20px
-$columns: 12
+$column-width: 60px;
+$gutter-width: 20px;
+$columns: 12;
 
 // Utility function — you should never need to modify this
-@function gridsystem-width($columns:$columns)
-  @return ($column-width * $columns) + ($gutter-width * $columns)
+@function gridsystem-width($columns:$columns) {
+  @return ($column-width * $columns) + ($gutter-width * $columns);
 
 
 // Set $total-width to 100% for a fluid layout
-$total-width: gridsystem-width($columns)
+}
+$total-width: gridsystem-width($columns);
 
 // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
 // $min-width: 999999
 // $correction: 0.5 / $min-width * 100
 
 // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
-@mixin clearfix()
-  *zoom:1
+@mixin clearfix() {
+  *zoom:1;
 
-  &:before,
-  &:after
-      content:""
-      display:table
-  
-  &:after
-      clear:both
+  &:before, {
+    /* empty */
+  }
+  &:after {
+      content:"";
+      display:table;
+
+  }
+  &:after {
+      clear:both;
 
 //////////
 // GRID //
 //////////
 
-body
-  width: 100%
-  @include clearfix()
+  }
+}
+body {
+  width: 100%;
+  @include clearfix();
 
 
-@mixin row($columns:$columns)
-  display: block
-  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))
-  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)
+}
+@mixin row($columns:$columns) {
+  display: block;
+  width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns));
+  margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1);
   // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction
-  @include clearfix()
+  @include clearfix();
 
-@mixin column($x,$columns:$columns)
-  display: inline
-  float: left
-  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))
-  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}
+@mixin column($x,$columns:$columns) {
+  display: inline;
+  float: left;
+  width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns));
+  margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns));
   // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction
   // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction
 
-@mixin push($offset:1)
-  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}
+@mixin push($offset:1) {
+  margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
+
+}
+@mixin pull($offset:1) {
+  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns));
 
-@mixin pull($offset:1)
-  margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns))
+}