@graupl/core 1.0.0-beta.51 → 1.0.0-beta.52

package/src/scss/utilities/grid/row-span/_index.scss

@@ -0,0 +1,124 @@
+// @graupl/core row-span utilities styles.
+//
+// This file generates the grid utility classes provided by Graupl.
+//
+// The following classes are generated by default:
+// - `.row-span-auto`: Sets the `grid-row` property to `span auto`.
+// - `.row-span-full`: Sets the `grid-row` property to `1 / -1`.
+// - `.row-span-1`: Sets the `grid-row` property to `span 1`.
+// - `.row-span-2`: Sets the `grid-row` property to `span 2`.
+// - `.row-span-3`: Sets the `grid-row` property to `span 3`.
+// - `.row-span-4`: Sets the `grid-row` property to `span 4`.
+// - `.row-span-5`: Sets the `grid-row` property to `span 5`.
+// - `.row-span-6`: Sets the `grid-row` property to `span 6`.
+// - `.row-span-7`: Sets the `grid-row` property to `span 7`.
+// - `.row-span-8`: Sets the `grid-row` property to `span 8`.
+// - `.row-span-9`: Sets the `grid-row` property to `span 9`.
+// - `.row-span-10`: Sets the `grid-row` property to `span 10`.
+// - `.row-span-11`: Sets the `grid-row` property to `span 11`.
+// - `.row-span-12`: Sets the `grid-row` property to `span 12`.
+//
+// The following custom properties control the generated classes:
+// | Property | Description | Default Value |
+// | -------- | ----------- | ------------- |
+// | N/A      | N/A         | N/A           |
+//
+// This utility does not define any custom properties.
+//
+// The following variables control the generated classes:
+// | Variable                             | Description                                                 | Default Value |
+// | ------------------------------------ | ----------------------------------------------------------- | ------------- |
+// | `$selector-base`                     | Base selector for utility classes.                          | `"."`         |
+// | `$selector-prefix`                   | The selector prefix for all utility classes.                | `""`          |
+// | `$selector-suffix`                   | The selctor suffix for all utility classes.                 | `""`          |
+// | `$selector-separator`                | The selector separator for all utility classes.             | `""`          |
+// | `$use-important`                     | Appends `!important` to generated utility declarations.     | `true`        |
+// | `$generate-base-utilities`           | Generates the base utility classes.                         | `true`        |
+// | `$screen-aware`                      | Enables screen-aware utility variants.                      | `false`       |
+// | `$theme-aware`                       | Enables theme-aware utility variants.                       | `false`       |
+// | `$scheme-aware`                      | Enables scheme-aware utility variants.                      | `false`       |
+// | `$state-aware`                       | Enables state-aware utility variants.                       | `false`       |
+// | `$container-aware`                   | Enables container-aware utility variants.                   | `false`       |
+// | `$screen-aware-selector-prefix`      | Prefix to the screen-aware portion of utility selectors.    | `""`          |
+// | `$screen-aware-selector-suffix`      | Suffix to the screen-aware portion of utility selectors.    | `""`          |
+// | `$screen-aware-selector-separator`   | Separator inserted for screen-aware utility selectors.      | `"\\:"`       |
+// | `$theme-aware-selector-prefix`       | Prefix to the theme-aware portion of utility selectors.     | `""`          |
+// | `$theme-aware-selector-suffix`       | Suffix to the theme-aware portion of utility selectors.     | `"-theme"`    |
+// | `$theme-aware-selector-separator`    | Separator inserted for theme-aware utility selectors.       | `"\\:"`       |
+// | `$scheme-aware-selector-prefix`      | Prefix to the scheme-aware portion of utility selectors.    | `""`          |
+// | `$scheme-aware-selector-suffix`      | Suffix to the scheme-aware portion of utility selectors.    | `"-mode"`     |
+// | `$scheme-aware-selector-separator`   | Separator inserted for scheme-aware utility selectors.      | `"\\:"`       |
+// | `$state-aware-selector-prefix`       | Prefix to the state-aware portion of utility selectors.     | `""`          |
+// | `$state-aware-selector-suffix`       | Suffix to the state-aware portion of utility selectors.     | `""`          |
+// | `$state-aware-selector-separator`    | Separator inserted for state-aware utility selectors.       | `"\\:"`       |
+// | `$container-aware-selector-prefix`   | Prefix to the container-aware portion of utility selectors. | `"cq\\:"`     |
+// | `$container-aware-selector-suffix`   | Suffix to the container-aware portion of utility selectors. | `""`          |
+// | `$container-aware-selector-separator`| Separator inserted for container-aware utility selectors.   | `"\\:"`       |
+// | `$utility-properties`                | Map of utility properties.                                  | `()`          |
+// | `$utility-values`                    | Map of utility values.                                      | `()`          |
+// | `$utility-map`                       | Map of utility property/value pairs.                        | `()`          |
+// | `$grid-row-min-count`                | The minimum row count for generated utilities.              | `1`           |
+// | `$grid-row-max-count`                | The maximum row count for generated utilities.              | `12`          |
+//
+// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, `$scheme-aware`, `$state-aware`, or `$container-aware` to `true`.
+// By default, no responsive utility classes are generated for row-span.
+//
+// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern: `.{screen-modifier}:{utility-selector}`
+//
+// e.g. `sm:row-span-full` will apply the `row-span-full` class on small-sized screens and up.
+//
+// When set to true, theme-aware utility classes will be generated for each theme in the following pattern: `.{theme-modifier}:{utility-selector}`
+//
+// e.g. `default-theme:row-span-full` will apply the `row-span-full` class when using the default theme.
+//
+// When set to true, scheme-aware utility classes will be generated for each theme in the following pattern: `.{scheme-modifier}:{utility-selector}`
+//
+// e.g. `dark-mode:row-span-full` will apply the `row-span-full` class when dark-mode is active.
+//
+// When set to true, state-aware utility classes will be generated for each state in the following pattern: `.{state-modifier}:{utility-selector}`
+//
+// e.g. `hover:row-span-full` will apply the `row-span-full` class when hovered.
+//
+// When set to true, container-aware utility classes will be generated for each container in the following pattern: `.{container-modifier}:{utility-selector}`
+//
+// e.g. `cq:md:row-span-full` will apply the `row-span-full` class on medium-sized containers and up.
+//
+// @example
+//   <div class="row-span-full">This content spanall rows.</div>
+
+@use "../../../mixins/layer" as *;
+@use "../../../mixins/utility";
+@use "defaults";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // Create a utitlity for each entry in the utility map.
+  @include utility.generate(
+    $map: defaults.$utility-map,
+    $selector-base: defaults.$selector-base,
+    $selector-prefix: defaults.$selector-prefix,
+    $selector-suffix: defaults.$selector-suffix,
+    $screen-aware: defaults.$screen-aware,
+    $screen-aware-selector-prefix: defaults.$screen-aware-selector-prefix,
+    $screen-aware-selector-suffix: defaults.$screen-aware-selector-suffix,
+    $screen-aware-selector-separator: defaults.$screen-aware-selector-separator,
+    $theme-aware: defaults.$theme-aware,
+    $theme-aware-selector-prefix: defaults.$theme-aware-selector-prefix,
+    $theme-aware-selector-suffix: defaults.$theme-aware-selector-suffix,
+    $theme-aware-selector-separator: defaults.$theme-aware-selector-separator,
+    $scheme-aware: defaults.$scheme-aware,
+    $scheme-aware-selector-prefix: defaults.$scheme-aware-selector-prefix,
+    $scheme-aware-selector-suffix: defaults.$scheme-aware-selector-suffix,
+    $scheme-aware-selector-separator: defaults.$scheme-aware-selector-separator,
+    $state-aware: defaults.$state-aware,
+    $state-aware-selector-prefix: defaults.$state-aware-selector-prefix,
+    $state-aware-selector-suffix: defaults.$state-aware-selector-suffix,
+    $state-aware-selector-separator: defaults.$state-aware-selector-separator,
+    $container-aware: defaults.$container-aware,
+    $container-aware-selector-prefix: defaults.$container-aware-selector-prefix,
+    $container-aware-selector-suffix: defaults.$container-aware-selector-suffix,
+    $container-aware-selector-separator:
+      defaults.$container-aware-selector-separator,
+    $important: defaults.$use-important
+  );
+}

package/src/scss/utilities/grid/row-span/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/core row-span utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";