diff --git a/package.json b/package.json index ff0196d..c0389d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "960.css", - "version": "1.0.9", + "version": "1.0.10", "description": "960 SCSS Layout most used and shortests css classes.", "main": "960.scss", "style": "css/960.css", diff --git a/scss/dom/overflow.scss b/scss/dom/overflow.scss new file mode 100644 index 0000000..be9134b --- /dev/null +++ b/scss/dom/overflow.scss @@ -0,0 +1,27 @@ +.ofh { + overflow: hidden; +} + +.ofv { + overflow: visible; +} + +.ofs { + overflow: scroll; +} + +.ofsx { + overflow-x: visible; +} + +.ofsxh { + overflow-x: hidden; +} + +.ofsy { + overflow-y: visible; +} + +.ofsyh { + overflow-y: hidden; +} diff --git a/scss/flex/flex.scss b/scss/flex/flex.scss index 0eb032d..10b8326 100644 --- a/scss/flex/flex.scss +++ b/scss/flex/flex.scss @@ -1,5 +1,6 @@ @use "../medias" as *; @use "../variables" as *; +@use "../functions" as *; /* FLEX @@ -210,3 +211,17 @@ @include flexBasis("xl"); } } + +@mixin apply-gap($class) { + $gap-value: extract-number($class); + gap: #{$gap-value}px; +} + +/* add gap */ +.gp { + @for $i from 0 through 50 { + &\[#{$i}\] { + @include apply-gap("gp[#{$i}]"); + } + } +} diff --git a/scss/functions.scss b/scss/functions.scss new file mode 100644 index 0000000..7b2373b --- /dev/null +++ b/scss/functions.scss @@ -0,0 +1,11 @@ +@use "sass:string"; + +/* FUNCTIONS ---------------------------------------------------------------------- */ + +@function extract-number($class) { + $start: string.index($class, "[") + 1; + $end: string.index($class, "]") - 1; + @return string.slice($class, $start, $end); +} + +/* -------------------------------------------------------------------------------- */ diff --git a/scss/index.scss b/scss/index.scss index a919b9a..eef84d6 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -5,6 +5,8 @@ @use "global/global.scss"; +@use "dom/overflow.scss"; + @use "grid/grid.scss"; @use "text/text.scss"; @use "list/list.scss";