@mastors/flexer 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +475 -0
- package/dist/mastors-flexer.css +2744 -0
- package/dist/mastors-flexer.css.map +1 -0
- package/package.json +53 -0
- package/scss/generators/_flex-generator.scss +87 -0
- package/scss/generators/_index.scss +2 -0
- package/scss/index.scss +18 -0
- package/scss/mixins/_flex-center.scss +36 -0
- package/scss/mixins/_flex-container.scss +35 -0
- package/scss/mixins/_flex-item.scss +30 -0
- package/scss/mixins/_index.scss +4 -0
- package/scss/responsive/_index.scss +155 -0
- package/scss/utilities/_align-content.scss +24 -0
- package/scss/utilities/_align-items.scss +20 -0
- package/scss/utilities/_align-self.scss +21 -0
- package/scss/utilities/_flex-basis.scss +38 -0
- package/scss/utilities/_flex-direction.scss +19 -0
- package/scss/utilities/_flex-display.scss +16 -0
- package/scss/utilities/_flex-flow.scss +21 -0
- package/scss/utilities/_flex-grow.scss +16 -0
- package/scss/utilities/_flex-shorthand.scss +13 -0
- package/scss/utilities/_flex-shrink.scss +16 -0
- package/scss/utilities/_flex-wrap.scss +18 -0
- package/scss/utilities/_gap.scss +17 -0
- package/scss/utilities/_index.scss +22 -0
- package/scss/utilities/_justify-content.scss +23 -0
- package/scss/utilities/_justify-items.scss +19 -0
- package/scss/utilities/_justify-self.scss +20 -0
- package/scss/utilities/_order.scss +23 -0
- package/scss/utilities/_place-content.scss +23 -0
- package/scss/utilities/_place-items.scss +20 -0
- package/scss/utilities/_place-self.scss +20 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/node_modules/@mastors/core/scss/responsive/_container-queries.scss","file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/node_modules/@mastors/core/scss/generators/_class-generator.scss","file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/scss/utilities/_flex-basis.scss","file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/scss/utilities/_flex-shorthand.scss","file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/scss/utilities/_order.scss","file:///D:/Web/Mastors%20CDN/Mastors/packages/flexer/node_modules/@mastors/core/scss/responsive/_engine.scss"],"names":[],"mappings":"AAUA;EAAc;;;AACd;EAAc;;;AACd;EAAc;;;AAKd;EACE;;;ACYI;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AC1BR;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AAGf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AACf;EAAe;;;AAGf;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AACb;EAAa;;;AC5Bb;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AAChB;EAAgB;;;AFkBV;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AASA;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AA3BV;EA0BiB;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;EADO;IACP;;;AArCZ;EACE;;;AADF;EACE;;;AADF;EACE;;;AGVN;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;AACV;EAAe,OADL;;;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","sourcesContent":["// responsive/_container-queries.scss\n// CSS container query helpers (@container).\n// ─────────────────────────────────────────────────────────────\n\n// Container query helpers\n// Requires elements to have a containment context set:\n// .cq-inline { container-type: inline-size; }\n// .cq-size { container-type: size; }\n// .cq-normal { container-type: normal; }\n\n.cq-inline { container-type: inline-size; }\n.cq-size { container-type: size; }\n.cq-normal { container-type: normal; }\n\n// Named container helper\n// Usage: <div class=\"cq-inline\" style=\"container-name: card\">...\n// or use data attribute: [data-container] { container-type: inline-size; }\n[data-container] {\n container-type: inline-size;\n}\n\n// Mixin for inline container queries in component SCSS\n// @use \"@mastors/core/api\" as m;\n// @include m.cq(40rem) { ... }\n@mixin cq($min-width, $name: null) {\n @if $name {\n @container #{$name} (min-width: #{$min-width}) { @content; }\n } @else {\n @container (min-width: #{$min-width}) { @content; }\n }\n}\n","// generators/_class-generator.scss\n// Core mixin engine for generating utility class output.\n// ─────────────────────────────────────────────────────────────\n\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"sass:string\";\n@use \"../config/settings\" as cfg;\n@use \"../config/flags\";\n@use \"../variables/breakpoints\" as bpvars;\n\n/// Core utility class generator engine.\n@mixin generate-utilities($utilities) {\n $cls-prefix: cfg.config(\"prefix\");\n $important: null;\n @if cfg.config(\"important\") {\n $important: !important;\n }\n\n // ── Pass 1: base (unprefixed) classes ──────────────────────\n @each $name, $config in $utilities {\n $prop: map.get($config, property);\n $values: map.get($config, values);\n $prefix: map.get($config, prefix);\n\n @each $suffix, $value in $values {\n $class-name: \"#{$cls-prefix}#{$suffix}\";\n @if $prefix {\n $class-name: \"#{$cls-prefix}#{$prefix}-#{$suffix}\";\n }\n .#{$class-name} {\n #{$prop}: $value $important;\n }\n }\n }\n\n // ── Pass 2: responsive variants (.sm\\:, .md\\:, …) ─────────\n @if flags.$enable-responsive {\n @each $bp-key, $bp-value in bpvars.$breakpoints {\n @if $bp-value != 0px {\n @media (min-width: #{$bp-value}) {\n @each $name, $config in $utilities {\n @if map.get($config, responsive) == true {\n $prop: map.get($config, property);\n $values: map.get($config, values);\n $prefix: map.get($config, prefix);\n\n @each $suffix, $value in $values {\n $class: null;\n @if $prefix {\n $class: \"#{$cls-prefix}#{$prefix}-#{$suffix}\";\n } @else {\n $class: \"#{$cls-prefix}#{$suffix}\";\n }\n\n $first: string.slice(\"#{$bp-key}\", 1, 1);\n $rest: string.slice(\"#{$bp-key}\", 2);\n $safe-bp: null;\n @if $first == \"0\" or $first == \"1\" or $first == \"2\" or $first == \"3\" or\n $first == \"4\" or $first == \"5\" or $first == \"6\" or $first == \"7\" or\n $first == \"8\" or $first == \"9\" {\n $safe-bp: \"\\\\3#{$first} #{$rest}\";\n } @else {\n $safe-bp: \"#{$bp-key}\";\n }\n\n @at-root .#{$safe-bp}\\:#{$class} {\n #{$prop}: $value $important;\n }\n }\n }\n }\n }\n }\n }\n }\n}\n","// @mastors/flexer — utilities/_flex-basis.scss\n// flex-basis utility classes.\n// ─────────────────────────────────────────────────────────────\n\n// Named basis values\n.basis-auto { flex-basis: auto; }\n.basis-full { flex-basis: 100%; }\n.basis-0 { flex-basis: 0px; }\n\n// Fractional basis values\n.basis-1\\/2 { flex-basis: 50%; }\n.basis-1\\/3 { flex-basis: 33.333333%; }\n.basis-2\\/3 { flex-basis: 66.666667%; }\n.basis-1\\/4 { flex-basis: 25%; }\n.basis-2\\/4 { flex-basis: 50%; }\n.basis-3\\/4 { flex-basis: 75%; }\n.basis-1\\/5 { flex-basis: 20%; }\n.basis-2\\/5 { flex-basis: 40%; }\n.basis-3\\/5 { flex-basis: 60%; }\n.basis-4\\/5 { flex-basis: 80%; }\n.basis-1\\/6 { flex-basis: 16.666667%; }\n.basis-5\\/6 { flex-basis: 83.333333%; }\n.basis-1\\/12 { flex-basis: 8.333333%; }\n\n// Fixed sizes — common breakpoint-friendly values\n.basis-16 { flex-basis: 4rem; }\n.basis-20 { flex-basis: 5rem; }\n.basis-24 { flex-basis: 6rem; }\n.basis-28 { flex-basis: 7rem; }\n.basis-32 { flex-basis: 8rem; }\n.basis-36 { flex-basis: 9rem; }\n.basis-40 { flex-basis: 10rem; }\n.basis-48 { flex-basis: 12rem; }\n.basis-56 { flex-basis: 14rem; }\n.basis-64 { flex-basis: 16rem; }\n.basis-72 { flex-basis: 18rem; }\n.basis-80 { flex-basis: 20rem; }\n.basis-96 { flex-basis: 24rem; }\n","// @mastors/flexer — utilities/_flex-shorthand.scss\n// flex shorthand utility classes (grow + shrink + basis combined).\n// ─────────────────────────────────────────────────────────────\n\n// .flex-1 → flex: 1 1 0% (grow, shrink, zero basis — the workhorse)\n// .flex-auto → flex: 1 1 auto (grow, shrink, natural basis)\n// .flex-initial→ flex: 0 1 auto (don't grow, shrink, natural basis — browser default)\n// .flex-none → flex: none (no grow, no shrink, natural basis — rigid)\n\n.flex-1 { flex: 1 1 0%; }\n.flex-auto { flex: 1 1 auto; }\n.flex-initial { flex: 0 1 auto; }\n.flex-none { flex: none; }\n","// @mastors/flexer — utilities/_order.scss\n// order utility classes (visual ordering of flex items).\n// ─────────────────────────────────────────────────────────────\n\n@use \"@mastors/core/scss/generators/class-generator\" as gen;\n\n// Named convenience values\n@include gen.generate-utilities((\n \"order-named\": (\n property: order,\n prefix: \"order\",\n values: (\n \"first\": -9999,\n \"last\": 9999,\n \"none\": 0,\n ),\n ),\n));\n\n// Numeric scale: .order-{1–12}\n@each $n in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {\n .order-#{$n} { order: $n; }\n}\n","// responsive/_engine.scss\n// Core responsive variant generation engine.\n// ─────────────────────────────────────────────────────────────\n\n@use \"sass:map\";\n@use \"../variables/breakpoints\" as bpvars;\n@use \"../config/flags\";\n\n// Responsive engine — generates breakpoint-prefixed variants\n// of any utility that declares responsive: true.\n//\n// Class pattern: .{bp}\\:{utility}\n// Example output: .sm\\:hidden, .md\\:flex, .lg\\:gap-8\n//\n// Sub-packages pass their $utilities map here via @include engine.run()\n// so the engine iterates breakpoints and re-emits the classes.\n\n@use \"sass:string\";\n\n@mixin run($utilities) {\n @if flags.$enable-responsive {\n @each $bp-key, $bp-value in bpvars.$breakpoints {\n // Skip xs — no prefix, already emitted as base classes\n @if $bp-value != 0px {\n @media (min-width: #{$bp-value}) {\n @each $name, $config in $utilities {\n @if map.get($config, responsive) == true {\n $prop: map.get($config, property);\n $values: map.get($config, values);\n $prefix: map.get($config, prefix);\n\n @each $suffix, $value in $values {\n $class: null;\n @if $prefix {\n $class: \"#{$prefix}-#{$suffix}\";\n } @else {\n $class: \"#{$suffix}\";\n }\n\n // CSS class names cannot start with a digit.\n // When the breakpoint key begins with a number (e.g. \"2xl\"),\n // escape it using the CSS identifier-escape syntax: \\3X (space after hex).\n $first: string.slice(\"#{$bp-key}\", 1, 1);\n $rest: string.slice(\"#{$bp-key}\", 2);\n $safe-bp: null;\n @if $first == \"0\" or $first == \"1\" or $first == \"2\" or $first == \"3\" or\n $first == \"4\" or $first == \"5\" or $first == \"6\" or $first == \"7\" or\n $first == \"8\" or $first == \"9\" {\n // \\3X is the CSS escape for the digit (space terminates the escape)\n $safe-bp: \"\\\\3#{$first} #{$rest}\";\n } @else {\n $safe-bp: \"#{$bp-key}\";\n }\n\n // Use #{} interpolation so Sass emits the selector verbatim\n // without re-parsing the leading backslash as a Sass identifier.\n @at-root .#{$safe-bp}\\:#{$class} {\n #{$prop}: $value;\n }\n }\n }\n }\n }\n }\n }\n }\n}\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mastors/flexer",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "Mastors Flexer — complete flexbox utility class system",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Mastors Contributors",
|
|
7
|
+
"homepage": "https://mastorscdn.kehem.com/packages/flexer",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/KEHEM-IT/Mastors.git",
|
|
11
|
+
"directory": "packages/flexer"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"mastors",
|
|
15
|
+
"flexer",
|
|
16
|
+
"flexbox",
|
|
17
|
+
"scss",
|
|
18
|
+
"utilities",
|
|
19
|
+
"css-framework"
|
|
20
|
+
],
|
|
21
|
+
"sass": "./scss/index.scss",
|
|
22
|
+
"style": "./dist/mastors-flexer.css",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": "./dist/mastors-flexer.css",
|
|
25
|
+
"./scss": "./scss/index.scss",
|
|
26
|
+
"./scss/*": "./scss/*"
|
|
27
|
+
},
|
|
28
|
+
"files": [
|
|
29
|
+
"dist",
|
|
30
|
+
"scss",
|
|
31
|
+
"README.md"
|
|
32
|
+
],
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"rimraf": "^5.0.0",
|
|
35
|
+
"sass": "^1.80.0",
|
|
36
|
+
"@mastors/build-utils": "2.0.0",
|
|
37
|
+
"@mastors/sass-config": "1.0.1"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"@mastors/core": ">=1.0.0",
|
|
41
|
+
"sass": ">=1.80.0"
|
|
42
|
+
},
|
|
43
|
+
"sideEffects": [
|
|
44
|
+
"dist/*.css",
|
|
45
|
+
"scss/**/*.scss"
|
|
46
|
+
],
|
|
47
|
+
"scripts": {
|
|
48
|
+
"build": "node build.js",
|
|
49
|
+
"build:prod": "node build.js --prod",
|
|
50
|
+
"dev": "node build.js --watch",
|
|
51
|
+
"clean": "rimraf dist"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
// generators/_flex-generator.scss
|
|
2
|
+
// generate-flex-utilities() — emit a complete flex utility set from a config map.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "sass:map";
|
|
6
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
7
|
+
|
|
8
|
+
@mixin generate-flex-utilities($config: ()) {
|
|
9
|
+
// Replace deprecated if(map-get(...) != false, true, false) with @if/@else
|
|
10
|
+
$direction: false;
|
|
11
|
+
$wrap: false;
|
|
12
|
+
$justify: false;
|
|
13
|
+
$align: false;
|
|
14
|
+
$grow: false;
|
|
15
|
+
$shrink: false;
|
|
16
|
+
$order: false;
|
|
17
|
+
$responsive: false;
|
|
18
|
+
|
|
19
|
+
@if map.get($config, direction) != false { $direction: true; }
|
|
20
|
+
@if map.get($config, wrap) != false { $wrap: true; }
|
|
21
|
+
@if map.get($config, justify) != false { $justify: true; }
|
|
22
|
+
@if map.get($config, align) != false { $align: true; }
|
|
23
|
+
@if map.get($config, grow) != false { $grow: true; }
|
|
24
|
+
@if map.get($config, shrink) != false { $shrink: true; }
|
|
25
|
+
@if map.get($config, order) != false { $order: true; }
|
|
26
|
+
@if map.get($config, responsive) != false { $responsive: true; }
|
|
27
|
+
|
|
28
|
+
@if $direction {
|
|
29
|
+
@include gen.generate-utilities(("flex-direction": (
|
|
30
|
+
property: flex-direction, prefix: "flex",
|
|
31
|
+
values: ("row": row, "row-reverse": row-reverse, "col": column, "col-reverse": column-reverse),
|
|
32
|
+
responsive: $responsive,
|
|
33
|
+
)));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@if $wrap {
|
|
37
|
+
@include gen.generate-utilities(("flex-wrap": (
|
|
38
|
+
property: flex-wrap, prefix: "flex",
|
|
39
|
+
values: ("wrap": wrap, "wrap-reverse": wrap-reverse, "nowrap": nowrap),
|
|
40
|
+
responsive: $responsive,
|
|
41
|
+
)));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@if $justify {
|
|
45
|
+
@include gen.generate-utilities(("justify-content": (
|
|
46
|
+
property: justify-content, prefix: "justify",
|
|
47
|
+
values: (
|
|
48
|
+
"start": flex-start, "end": flex-end, "center": center,
|
|
49
|
+
"between": space-between, "around": space-around,
|
|
50
|
+
"evenly": space-evenly, "stretch": stretch,
|
|
51
|
+
),
|
|
52
|
+
responsive: $responsive,
|
|
53
|
+
)));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@if $align {
|
|
57
|
+
@include gen.generate-utilities(("align-items": (
|
|
58
|
+
property: align-items, prefix: "items",
|
|
59
|
+
values: (
|
|
60
|
+
"start": flex-start, "end": flex-end,
|
|
61
|
+
"center": center, "stretch": stretch, "baseline": baseline,
|
|
62
|
+
),
|
|
63
|
+
responsive: $responsive,
|
|
64
|
+
)));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@if $grow {
|
|
68
|
+
@include gen.generate-utilities(("flex-grow": (
|
|
69
|
+
property: flex-grow, prefix: "grow",
|
|
70
|
+
values: ("": 1, "0": 0),
|
|
71
|
+
)));
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@if $shrink {
|
|
75
|
+
@include gen.generate-utilities(("flex-shrink": (
|
|
76
|
+
property: flex-shrink, prefix: "shrink",
|
|
77
|
+
values: ("": 1, "0": 0),
|
|
78
|
+
)));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@if $order {
|
|
82
|
+
@include gen.generate-utilities(("order": (
|
|
83
|
+
property: order, prefix: "order",
|
|
84
|
+
values: ("first": -9999, "last": 9999, "none": 0),
|
|
85
|
+
)));
|
|
86
|
+
}
|
|
87
|
+
}
|
package/scss/index.scss
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// @mastors/flexer — scss/index.scss
|
|
2
|
+
// ─────────────────────────────────────────────────────────────
|
|
3
|
+
// Entry point for the Flexer package.
|
|
4
|
+
// Provides flex container and item utility classes.
|
|
5
|
+
// ─────────────────────────────────────────────────────────────
|
|
6
|
+
|
|
7
|
+
// Consume core public API (tokens, mixins, functions — no CSS output)
|
|
8
|
+
@use "@mastors/core/api" as core;
|
|
9
|
+
|
|
10
|
+
// Flexer internals
|
|
11
|
+
@use "mixins/index" as *;
|
|
12
|
+
@use "generators/index" as *;
|
|
13
|
+
|
|
14
|
+
// Utility output
|
|
15
|
+
@use "utilities/index" as utilities;
|
|
16
|
+
|
|
17
|
+
// Responsive variants
|
|
18
|
+
@use "responsive/index" as responsive;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// mixins/_flex-center.scss
|
|
2
|
+
// flex-center() mixin — the most common flex pattern, one line.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
/// Center children both axes using flexbox.
|
|
6
|
+
///
|
|
7
|
+
/// @param {Boolean} $inline - use inline-flex (default: false)
|
|
8
|
+
@mixin flex-center($inline: false) {
|
|
9
|
+
@if $inline {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
} @else {
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/// Center children on the main axis only (horizontal for row direction).
|
|
19
|
+
@mixin flex-center-x($inline: false) {
|
|
20
|
+
@if $inline {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
} @else {
|
|
23
|
+
display: flex;
|
|
24
|
+
}
|
|
25
|
+
justify-content: center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/// Center children on the cross axis only (vertical for row direction).
|
|
29
|
+
@mixin flex-center-y($inline: false) {
|
|
30
|
+
@if $inline {
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
} @else {
|
|
33
|
+
display: flex;
|
|
34
|
+
}
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// mixins/_flex-container.scss
|
|
2
|
+
// flex-container() mixin — configure a flex container in one call.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "sass:math";
|
|
6
|
+
@use "sass:meta";
|
|
7
|
+
@use "@mastors/core/scss/tokens/spacing" as sp;
|
|
8
|
+
|
|
9
|
+
/// Apply flex container properties declaratively in one include.
|
|
10
|
+
///
|
|
11
|
+
/// @param {String} $direction - flex-direction (default: row)
|
|
12
|
+
/// @param {String} $wrap - flex-wrap (default: nowrap)
|
|
13
|
+
/// @param {String} $justify - justify-content (default: flex-start)
|
|
14
|
+
/// @param {String} $align - align-items (default: stretch)
|
|
15
|
+
/// @param {*} $gap - raw CSS gap value (default: null)
|
|
16
|
+
/// @param {Boolean} $inline - use inline-flex (default: false)
|
|
17
|
+
@mixin flex-container(
|
|
18
|
+
$direction: row,
|
|
19
|
+
$wrap: nowrap,
|
|
20
|
+
$justify: flex-start,
|
|
21
|
+
$align: stretch,
|
|
22
|
+
$gap: null,
|
|
23
|
+
$inline: false
|
|
24
|
+
) {
|
|
25
|
+
@if $inline {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
} @else {
|
|
28
|
+
display: flex;
|
|
29
|
+
}
|
|
30
|
+
flex-direction: $direction;
|
|
31
|
+
flex-wrap: $wrap;
|
|
32
|
+
justify-content: $justify;
|
|
33
|
+
align-items: $align;
|
|
34
|
+
@if $gap != null { gap: $gap; }
|
|
35
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// mixins/_flex-item.scss
|
|
2
|
+
// flex-item() mixin — configure a flex child in one call.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
/// Apply flex item properties declaratively in one include.
|
|
6
|
+
///
|
|
7
|
+
/// @param {Number|String} $grow - flex-grow value (default: 0)
|
|
8
|
+
/// @param {Number|String} $shrink - flex-shrink value (default: 1)
|
|
9
|
+
/// @param {*} $basis - flex-basis value (default: auto)
|
|
10
|
+
/// @param {String} $align - align-self (default: auto)
|
|
11
|
+
/// @param {Number} $order - order (default: null)
|
|
12
|
+
///
|
|
13
|
+
/// Usage:
|
|
14
|
+
/// .main-content {
|
|
15
|
+
/// @include flex-item($grow: 1, $basis: 0%);
|
|
16
|
+
/// }
|
|
17
|
+
/// .sidebar {
|
|
18
|
+
/// @include flex-item($grow: 0, $shrink: 0, $basis: 280px);
|
|
19
|
+
/// }
|
|
20
|
+
@mixin flex-item(
|
|
21
|
+
$grow: 0,
|
|
22
|
+
$shrink: 1,
|
|
23
|
+
$basis: auto,
|
|
24
|
+
$align: auto,
|
|
25
|
+
$order: null
|
|
26
|
+
) {
|
|
27
|
+
flex: $grow $shrink $basis;
|
|
28
|
+
@if $align != auto { align-self: $align; }
|
|
29
|
+
@if $order != null { order: $order; }
|
|
30
|
+
}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
// @mastors/flexer — scss/responsive/_index.scss
|
|
2
|
+
// Responsive breakpoint variants for flexer utilities.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
//
|
|
5
|
+
// Wraps all `responsive: true` flex utilities in breakpoint-prefixed
|
|
6
|
+
// media queries via the core responsive engine.
|
|
7
|
+
//
|
|
8
|
+
// Class pattern: .{bp}:{utility}
|
|
9
|
+
// Examples: .md:flex-row, .lg:justify-between, .sm:items-center
|
|
10
|
+
|
|
11
|
+
@use "@mastors/core/scss/responsive/engine" as engine;
|
|
12
|
+
|
|
13
|
+
// ─── Responsive utilities map ─────────────────────────────────────────────────
|
|
14
|
+
// Mirrors every `responsive: true` entry from the utilities layer.
|
|
15
|
+
|
|
16
|
+
$-responsive-utilities: (
|
|
17
|
+
|
|
18
|
+
// Display
|
|
19
|
+
"flex-display": (
|
|
20
|
+
property: display,
|
|
21
|
+
values: ("flex": flex, "inline-flex": inline-flex),
|
|
22
|
+
responsive: true,
|
|
23
|
+
),
|
|
24
|
+
|
|
25
|
+
// flex-direction
|
|
26
|
+
"flex-direction": (
|
|
27
|
+
property: flex-direction,
|
|
28
|
+
prefix: "flex",
|
|
29
|
+
values: (
|
|
30
|
+
"row": row, "row-reverse": row-reverse,
|
|
31
|
+
"col": column, "col-reverse": column-reverse,
|
|
32
|
+
),
|
|
33
|
+
responsive: true,
|
|
34
|
+
),
|
|
35
|
+
|
|
36
|
+
// flex-wrap
|
|
37
|
+
"flex-wrap": (
|
|
38
|
+
property: flex-wrap,
|
|
39
|
+
prefix: "flex",
|
|
40
|
+
values: ("wrap": wrap, "wrap-reverse": wrap-reverse, "nowrap": nowrap),
|
|
41
|
+
responsive: true,
|
|
42
|
+
),
|
|
43
|
+
|
|
44
|
+
// flex-flow
|
|
45
|
+
"flex-flow": (
|
|
46
|
+
property: flex-flow,
|
|
47
|
+
prefix: "flex-flow",
|
|
48
|
+
values: (
|
|
49
|
+
"row-wrap": row wrap,
|
|
50
|
+
"row-nowrap": row nowrap,
|
|
51
|
+
"row-wrap-reverse": row wrap-reverse,
|
|
52
|
+
"col-wrap": column wrap,
|
|
53
|
+
"col-nowrap": column nowrap,
|
|
54
|
+
"col-wrap-reverse": column wrap-reverse,
|
|
55
|
+
),
|
|
56
|
+
responsive: true,
|
|
57
|
+
),
|
|
58
|
+
|
|
59
|
+
// justify-content
|
|
60
|
+
"justify-content": (
|
|
61
|
+
property: justify-content,
|
|
62
|
+
prefix: "justify",
|
|
63
|
+
values: (
|
|
64
|
+
"start": flex-start, "end": flex-end, "center": center,
|
|
65
|
+
"between": space-between, "around": space-around,
|
|
66
|
+
"evenly": space-evenly, "stretch": stretch, "normal": normal,
|
|
67
|
+
),
|
|
68
|
+
responsive: true,
|
|
69
|
+
),
|
|
70
|
+
|
|
71
|
+
// justify-items
|
|
72
|
+
"justify-items": (
|
|
73
|
+
property: justify-items,
|
|
74
|
+
prefix: "justify-items",
|
|
75
|
+
values: ("start": start, "end": end, "center": center, "stretch": stretch),
|
|
76
|
+
responsive: true,
|
|
77
|
+
),
|
|
78
|
+
|
|
79
|
+
// justify-self
|
|
80
|
+
"justify-self": (
|
|
81
|
+
property: justify-self,
|
|
82
|
+
prefix: "justify-self",
|
|
83
|
+
values: ("auto": auto, "start": start, "end": end, "center": center, "stretch": stretch),
|
|
84
|
+
responsive: true,
|
|
85
|
+
),
|
|
86
|
+
|
|
87
|
+
// align-content
|
|
88
|
+
"align-content": (
|
|
89
|
+
property: align-content,
|
|
90
|
+
prefix: "content",
|
|
91
|
+
values: (
|
|
92
|
+
"normal": normal, "center": center, "start": flex-start, "end": flex-end,
|
|
93
|
+
"between": space-between, "around": space-around,
|
|
94
|
+
"evenly": space-evenly, "stretch": stretch, "baseline": baseline,
|
|
95
|
+
),
|
|
96
|
+
responsive: true,
|
|
97
|
+
),
|
|
98
|
+
|
|
99
|
+
// align-items
|
|
100
|
+
"align-items": (
|
|
101
|
+
property: align-items,
|
|
102
|
+
prefix: "items",
|
|
103
|
+
values: (
|
|
104
|
+
"start": flex-start, "end": flex-end, "center": center,
|
|
105
|
+
"stretch": stretch, "baseline": baseline,
|
|
106
|
+
),
|
|
107
|
+
responsive: true,
|
|
108
|
+
),
|
|
109
|
+
|
|
110
|
+
// align-self
|
|
111
|
+
"align-self": (
|
|
112
|
+
property: align-self,
|
|
113
|
+
prefix: "self",
|
|
114
|
+
values: (
|
|
115
|
+
"auto": auto, "start": flex-start, "end": flex-end,
|
|
116
|
+
"center": center, "stretch": stretch, "baseline": baseline,
|
|
117
|
+
),
|
|
118
|
+
responsive: true,
|
|
119
|
+
),
|
|
120
|
+
|
|
121
|
+
// place-content
|
|
122
|
+
"place-content": (
|
|
123
|
+
property: place-content,
|
|
124
|
+
prefix: "place-content",
|
|
125
|
+
values: (
|
|
126
|
+
"center": center, "start": start, "end": end,
|
|
127
|
+
"between": space-between, "around": space-around,
|
|
128
|
+
"evenly": space-evenly, "stretch": stretch, "baseline": baseline,
|
|
129
|
+
),
|
|
130
|
+
responsive: true,
|
|
131
|
+
),
|
|
132
|
+
|
|
133
|
+
// place-items
|
|
134
|
+
"place-items": (
|
|
135
|
+
property: place-items,
|
|
136
|
+
prefix: "place-items",
|
|
137
|
+
values: (
|
|
138
|
+
"start": start, "end": end, "center": center,
|
|
139
|
+
"stretch": stretch, "baseline": baseline,
|
|
140
|
+
),
|
|
141
|
+
responsive: true,
|
|
142
|
+
),
|
|
143
|
+
|
|
144
|
+
// place-self
|
|
145
|
+
"place-self": (
|
|
146
|
+
property: place-self,
|
|
147
|
+
prefix: "place-self",
|
|
148
|
+
values: ("auto": auto, "start": start, "end": end, "center": center, "stretch": stretch),
|
|
149
|
+
responsive: true,
|
|
150
|
+
),
|
|
151
|
+
|
|
152
|
+
);
|
|
153
|
+
|
|
154
|
+
// ─── Emit breakpoint-prefixed variants ───────────────────────────────────────
|
|
155
|
+
@include engine.run($-responsive-utilities);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_align-content.scss
|
|
2
|
+
// align-content utility classes (cross-axis alignment for wrapped flex lines).
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"align-content": (
|
|
9
|
+
property: align-content,
|
|
10
|
+
prefix: "content",
|
|
11
|
+
values: (
|
|
12
|
+
"normal": normal,
|
|
13
|
+
"center": center,
|
|
14
|
+
"start": flex-start,
|
|
15
|
+
"end": flex-end,
|
|
16
|
+
"between": space-between,
|
|
17
|
+
"around": space-around,
|
|
18
|
+
"evenly": space-evenly,
|
|
19
|
+
"stretch": stretch,
|
|
20
|
+
"baseline":baseline,
|
|
21
|
+
),
|
|
22
|
+
responsive: true,
|
|
23
|
+
),
|
|
24
|
+
));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_align-items.scss
|
|
2
|
+
// align-items utility classes (cross-axis alignment for all flex items).
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"align-items": (
|
|
9
|
+
property: align-items,
|
|
10
|
+
prefix: "items",
|
|
11
|
+
values: (
|
|
12
|
+
"start": flex-start,
|
|
13
|
+
"end": flex-end,
|
|
14
|
+
"center": center,
|
|
15
|
+
"stretch": stretch,
|
|
16
|
+
"baseline": baseline,
|
|
17
|
+
),
|
|
18
|
+
responsive: true,
|
|
19
|
+
),
|
|
20
|
+
));
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_align-self.scss
|
|
2
|
+
// align-self utility classes (cross-axis alignment for a single flex item).
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"align-self": (
|
|
9
|
+
property: align-self,
|
|
10
|
+
prefix: "self",
|
|
11
|
+
values: (
|
|
12
|
+
"auto": auto,
|
|
13
|
+
"start": flex-start,
|
|
14
|
+
"end": flex-end,
|
|
15
|
+
"center": center,
|
|
16
|
+
"stretch": stretch,
|
|
17
|
+
"baseline": baseline,
|
|
18
|
+
),
|
|
19
|
+
responsive: true,
|
|
20
|
+
),
|
|
21
|
+
));
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_flex-basis.scss
|
|
2
|
+
// flex-basis utility classes.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
// Named basis values
|
|
6
|
+
.basis-auto { flex-basis: auto; }
|
|
7
|
+
.basis-full { flex-basis: 100%; }
|
|
8
|
+
.basis-0 { flex-basis: 0px; }
|
|
9
|
+
|
|
10
|
+
// Fractional basis values
|
|
11
|
+
.basis-1\/2 { flex-basis: 50%; }
|
|
12
|
+
.basis-1\/3 { flex-basis: 33.333333%; }
|
|
13
|
+
.basis-2\/3 { flex-basis: 66.666667%; }
|
|
14
|
+
.basis-1\/4 { flex-basis: 25%; }
|
|
15
|
+
.basis-2\/4 { flex-basis: 50%; }
|
|
16
|
+
.basis-3\/4 { flex-basis: 75%; }
|
|
17
|
+
.basis-1\/5 { flex-basis: 20%; }
|
|
18
|
+
.basis-2\/5 { flex-basis: 40%; }
|
|
19
|
+
.basis-3\/5 { flex-basis: 60%; }
|
|
20
|
+
.basis-4\/5 { flex-basis: 80%; }
|
|
21
|
+
.basis-1\/6 { flex-basis: 16.666667%; }
|
|
22
|
+
.basis-5\/6 { flex-basis: 83.333333%; }
|
|
23
|
+
.basis-1\/12 { flex-basis: 8.333333%; }
|
|
24
|
+
|
|
25
|
+
// Fixed sizes — common breakpoint-friendly values
|
|
26
|
+
.basis-16 { flex-basis: 4rem; }
|
|
27
|
+
.basis-20 { flex-basis: 5rem; }
|
|
28
|
+
.basis-24 { flex-basis: 6rem; }
|
|
29
|
+
.basis-28 { flex-basis: 7rem; }
|
|
30
|
+
.basis-32 { flex-basis: 8rem; }
|
|
31
|
+
.basis-36 { flex-basis: 9rem; }
|
|
32
|
+
.basis-40 { flex-basis: 10rem; }
|
|
33
|
+
.basis-48 { flex-basis: 12rem; }
|
|
34
|
+
.basis-56 { flex-basis: 14rem; }
|
|
35
|
+
.basis-64 { flex-basis: 16rem; }
|
|
36
|
+
.basis-72 { flex-basis: 18rem; }
|
|
37
|
+
.basis-80 { flex-basis: 20rem; }
|
|
38
|
+
.basis-96 { flex-basis: 24rem; }
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_flex-direction.scss
|
|
2
|
+
// flex-direction utility classes.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"flex-direction": (
|
|
9
|
+
property: flex-direction,
|
|
10
|
+
prefix: "flex",
|
|
11
|
+
values: (
|
|
12
|
+
"row": row,
|
|
13
|
+
"row-reverse": row-reverse,
|
|
14
|
+
"col": column,
|
|
15
|
+
"col-reverse": column-reverse,
|
|
16
|
+
),
|
|
17
|
+
responsive: true,
|
|
18
|
+
),
|
|
19
|
+
));
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_flex-display.scss
|
|
2
|
+
// Flex container display utilities.
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"flex-display": (
|
|
9
|
+
property: display,
|
|
10
|
+
values: (
|
|
11
|
+
"flex": flex,
|
|
12
|
+
"inline-flex": inline-flex,
|
|
13
|
+
),
|
|
14
|
+
responsive: true,
|
|
15
|
+
),
|
|
16
|
+
));
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// @mastors/flexer — utilities/_flex-flow.scss
|
|
2
|
+
// flex-flow shorthand utilities (direction + wrap in one property).
|
|
3
|
+
// ─────────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
@use "@mastors/core/scss/generators/class-generator" as gen;
|
|
6
|
+
|
|
7
|
+
@include gen.generate-utilities((
|
|
8
|
+
"flex-flow": (
|
|
9
|
+
property: flex-flow,
|
|
10
|
+
prefix: "flex-flow",
|
|
11
|
+
values: (
|
|
12
|
+
"row-wrap": row wrap,
|
|
13
|
+
"row-nowrap": row nowrap,
|
|
14
|
+
"row-wrap-reverse": row wrap-reverse,
|
|
15
|
+
"col-wrap": column wrap,
|
|
16
|
+
"col-nowrap": column nowrap,
|
|
17
|
+
"col-wrap-reverse": column wrap-reverse,
|
|
18
|
+
),
|
|
19
|
+
responsive: true,
|
|
20
|
+
),
|
|
21
|
+
));
|