@graupl/core 1.0.0-beta.48 → 1.0.0-beta.49
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/dist/css/base/form.css.map +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/input-group.css +1 -1
- package/dist/css/component/input-group.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/base/form/_defaults.scss +70 -0
- package/src/scss/base/form/_index.scss +30 -29
- package/src/scss/component/input-group/_defaults.scss +10 -18
- package/src/scss/component/input-group/_index.scss +109 -47
- package/src/scss/component/input-group/_variables.scss +71 -50
package/package.json
CHANGED
|
@@ -31,6 +31,76 @@ $fieldset-selector-base: $selector-base !default;
|
|
|
31
31
|
$fieldset-selector: "fieldset" !default;
|
|
32
32
|
$fieldset-theme-prefix-selector-base: $input-theme-prefix-selector-base !default;
|
|
33
33
|
$fieldset-theme-prefix-selector: $input-theme-prefix-selector !default;
|
|
34
|
+
$-input-type-selectors: (
|
|
35
|
+
"button": (
|
|
36
|
+
"[type=button]",
|
|
37
|
+
),
|
|
38
|
+
"checkbox": (
|
|
39
|
+
"[type=checkbox]",
|
|
40
|
+
),
|
|
41
|
+
"color": (
|
|
42
|
+
"[type=color]",
|
|
43
|
+
),
|
|
44
|
+
"date": (
|
|
45
|
+
"[type=date]",
|
|
46
|
+
),
|
|
47
|
+
"datetime-local": (
|
|
48
|
+
"[type=datetime-local]",
|
|
49
|
+
),
|
|
50
|
+
"email": (
|
|
51
|
+
"[type=email]",
|
|
52
|
+
),
|
|
53
|
+
"file": (
|
|
54
|
+
"[type=file]",
|
|
55
|
+
),
|
|
56
|
+
"hidden": (
|
|
57
|
+
"[type=hidden]",
|
|
58
|
+
),
|
|
59
|
+
"image": (
|
|
60
|
+
"[type=image]",
|
|
61
|
+
),
|
|
62
|
+
"month": (
|
|
63
|
+
"[type=month]",
|
|
64
|
+
),
|
|
65
|
+
"number": (
|
|
66
|
+
"[type=number]",
|
|
67
|
+
),
|
|
68
|
+
"password": (
|
|
69
|
+
"[type=password]",
|
|
70
|
+
),
|
|
71
|
+
"radio": (
|
|
72
|
+
"[type=radio]",
|
|
73
|
+
),
|
|
74
|
+
"range": (
|
|
75
|
+
"[type=range]",
|
|
76
|
+
),
|
|
77
|
+
"reset": (
|
|
78
|
+
"[type=reset]",
|
|
79
|
+
),
|
|
80
|
+
"search": (
|
|
81
|
+
"[type=search]",
|
|
82
|
+
),
|
|
83
|
+
"submit": (
|
|
84
|
+
"[type=submit]",
|
|
85
|
+
),
|
|
86
|
+
"tel": (
|
|
87
|
+
"[type=tel]",
|
|
88
|
+
),
|
|
89
|
+
"text": (
|
|
90
|
+
"[type=text]",
|
|
91
|
+
),
|
|
92
|
+
"time": (
|
|
93
|
+
"[type=time]",
|
|
94
|
+
),
|
|
95
|
+
"url": (
|
|
96
|
+
"[type=url]",
|
|
97
|
+
),
|
|
98
|
+
"week": (
|
|
99
|
+
"[type=week]",
|
|
100
|
+
),
|
|
101
|
+
);
|
|
102
|
+
$input-type-selectors: () !default;
|
|
103
|
+
$input-type-selectors: map.merge($-input-type-selectors, $input-type-selectors);
|
|
34
104
|
|
|
35
105
|
// Fieldset properties.
|
|
36
106
|
$fieldset-direction: column !default;
|
|
@@ -70,35 +70,36 @@
|
|
|
70
70
|
// | `--graupl-input-accent-color` | The accent color for input components. | `var(--graupl-input-color)` |
|
|
71
71
|
//
|
|
72
72
|
// The following sass variables can be used to customize the generation of the form components:
|
|
73
|
-
// | Variable | Description | Default Value
|
|
74
|
-
// | -------------------------------------- | ----------------------------------------------------------------------- |
|
|
75
|
-
// | `$selector-base` | The selector base for the component. | `""`
|
|
76
|
-
// | `$modifier-selector-base` | The selector base for component modifiers. | `"."`
|
|
77
|
-
// | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true`
|
|
78
|
-
// | `$themeable` | Flag to generate theme modifiers. | `true`
|
|
79
|
-
// | `$input-selector-base` | The base selector for the input component. | `""`
|
|
80
|
-
// | `$input-selector` | The input component selector. | `"input"`
|
|
81
|
-
// | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `"."`
|
|
82
|
-
// | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `""`
|
|
83
|
-
// | `$textarea-selector-base` | The base selector for the textarea component. | `""`
|
|
84
|
-
// | `$textarea-selector` | The textarea component selector. | `"textarea"`
|
|
85
|
-
// | `$select-selector-base` | The base selector for the select component. | `""`
|
|
86
|
-
// | `$select-selector` | The select component selector. | `"select"`
|
|
87
|
-
// | `$label-selector-base` | The base selector for the label component. | `""`
|
|
88
|
-
// | `$label-selector` | The label component selector. | `"label"`
|
|
89
|
-
// | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `"."`
|
|
90
|
-
// | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `""`
|
|
91
|
-
// | `$fieldset-selector-base` | The base selector for the fieldset component. | `""`
|
|
92
|
-
// | `$fieldset-selector` | The fieldset component selector. | `"fieldset"`
|
|
93
|
-
// | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `"."`
|
|
94
|
-
// | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `""`
|
|
95
|
-
// | `$fieldset-direction` | The direction of fieldset component items. | `column`
|
|
96
|
-
// | `$input-
|
|
97
|
-
// | `$input-theme-
|
|
98
|
-
// | `$
|
|
99
|
-
// | `$label-theme-
|
|
100
|
-
// | `$
|
|
101
|
-
// | `$fieldset-theme-
|
|
73
|
+
// | Variable | Description | Default Value |
|
|
74
|
+
// | -------------------------------------- | ----------------------------------------------------------------------- | ------------- |
|
|
75
|
+
// | `$selector-base` | The selector base for the component. | `""` |
|
|
76
|
+
// | `$modifier-selector-base` | The selector base for component modifiers. | `"."` |
|
|
77
|
+
// | `$generate-base-theme-map` | Flag to generate the base theme maps for form elements. | `true` |
|
|
78
|
+
// | `$themeable` | Flag to generate theme modifiers. | `true` |
|
|
79
|
+
// | `$input-selector-base` | The base selector for the input component. | `""` |
|
|
80
|
+
// | `$input-selector` | The input component selector. | `"input"` |
|
|
81
|
+
// | `$input-theme-prefix-selector-base` | Selector base used for input theme modifiers. | `"."` |
|
|
82
|
+
// | `$input-theme-prefix-selector` | Selector prefix used for input theme modifiers. | `""` |
|
|
83
|
+
// | `$textarea-selector-base` | The base selector for the textarea component. | `""` |
|
|
84
|
+
// | `$textarea-selector` | The textarea component selector. | `"textarea"` |
|
|
85
|
+
// | `$select-selector-base` | The base selector for the select component. | `""` |
|
|
86
|
+
// | `$select-selector` | The select component selector. | `"select"` |
|
|
87
|
+
// | `$label-selector-base` | The base selector for the label component. | `""` |
|
|
88
|
+
// | `$label-selector` | The label component selector. | `"label"` |
|
|
89
|
+
// | `$label-theme-prefix-selector-base` | Selector base used for label theme modifiers. | `"."` |
|
|
90
|
+
// | `$label-theme-prefix-selector` | Selector prefix used for label theme modifiers. | `""` |
|
|
91
|
+
// | `$fieldset-selector-base` | The base selector for the fieldset component. | `""` |
|
|
92
|
+
// | `$fieldset-selector` | The fieldset component selector. | `"fieldset"` |
|
|
93
|
+
// | `$fieldset-theme-prefix-selector-base` | Selector base used for fieldset theme modifiers. | `"."` |
|
|
94
|
+
// | `$fieldset-theme-prefix-selector` | Selector prefix used for fieldset theme modifiers. | `""` |
|
|
95
|
+
// | `$fieldset-direction` | The direction of fieldset component items. | `column` |
|
|
96
|
+
// | `$input-type-selectors` | Various tyles of inputs and their associated selectors. | `()` |
|
|
97
|
+
// | `$input-theme-mappings` | Map of properties and shade values applied to themed input variants. | `()` |
|
|
98
|
+
// | `$input-theme-map` | Fully expanded property map used to generate themed input variants. | `()` |
|
|
99
|
+
// | `$label-theme-mappings` | Map of properties and shade values applied to themed label variants. | `()` |
|
|
100
|
+
// | `$label-theme-map` | Fully expanded property map used to generate themed label variants. | `()` |
|
|
101
|
+
// | `$fieldset-theme-mappings` | Map of properties and shade values applied to themed fieldset variants. | `()` |
|
|
102
|
+
// | `$fieldset-theme-map` | Fully expanded property map used to generate themed fieldset variants. | `()` |
|
|
102
103
|
//
|
|
103
104
|
// ## Using `$input-theme-mappings`, `$label-theme-mappings`, and `$fieldset-theme-mappings`
|
|
104
105
|
//
|
|
@@ -17,21 +17,13 @@ $input-group-inline-selector-base: $modifier-selector-base !default;
|
|
|
17
17
|
$input-group-inline-selector: "inline" !default;
|
|
18
18
|
$input-group-help-text-selector-base: $selector-base !default;
|
|
19
19
|
$input-group-help-text-selector: "help-text" !default;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
$input-group-
|
|
23
|
-
$input-group-
|
|
24
|
-
$input-group-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
$input-group-
|
|
28
|
-
$input-group-
|
|
29
|
-
|
|
30
|
-
// Inline input group properties.
|
|
31
|
-
$input-group-inline-grid-template-columns: auto 1fr !default;
|
|
32
|
-
$input-group-inline-grid-template-rows: auto auto !default;
|
|
33
|
-
|
|
34
|
-
// Inner element properties.
|
|
35
|
-
$input-group-label-grid-area: $input-group-grid-label-name !default;
|
|
36
|
-
$input-group-input-grid-area: $input-group-grid-input-name !default;
|
|
37
|
-
$input-group-help-grid-area: $input-group-grid-help-name !default;
|
|
20
|
+
$input-group-top-selector-base: $modifier-selector-base !default;
|
|
21
|
+
$input-group-top-selector: "top" !default;
|
|
22
|
+
$input-group-bottom-selector-base: $modifier-selector-base !default;
|
|
23
|
+
$input-group-bottom-selector: "bottom" !default;
|
|
24
|
+
$input-group-left-selector-base: $modifier-selector-base !default;
|
|
25
|
+
$input-group-left-selector: "left" !default;
|
|
26
|
+
$input-group-right-selector-base: $modifier-selector-base !default;
|
|
27
|
+
$input-group-right-selector: "right" !default;
|
|
28
|
+
$input-group-inverse-selector-base: $modifier-selector-base !default;
|
|
29
|
+
$input-group-inverse-selector: "inverse" !default;
|
|
@@ -5,45 +5,53 @@
|
|
|
5
5
|
// The following selectors are generated by default:
|
|
6
6
|
// - `.input-group`: The input group container.
|
|
7
7
|
// - `.help-text`: Inline help text element.
|
|
8
|
-
// - `.inline`: Modifier to lay out label/input
|
|
8
|
+
// - `.inline`: Modifier to lay out label/input in a single row with help below (when allowed).
|
|
9
|
+
// - `.top`: Modifier to lay out input/label/help in a single column, respectively.
|
|
10
|
+
// - `.bottom`: Modifier to lay out label/input/help in a single column, respectively.
|
|
11
|
+
// - `.left`: Modifier to lay out input/label in a single row, respectively.
|
|
12
|
+
// - `.right`: Modifier to layout label/input in a single row, respectively.
|
|
13
|
+
// - `.inverse`: Modifier to combine both the top and left modifiers (when allowed).
|
|
9
14
|
//
|
|
10
15
|
// The following custom properties can be used to customize the input group component:
|
|
11
|
-
// | Property | Description
|
|
12
|
-
// | --------------------------------------------------- |
|
|
13
|
-
// | `--graupl-input-group-grid-template-
|
|
14
|
-
// | `--graupl-input-group-grid-template-
|
|
15
|
-
// | `--graupl-input-group-grid-template-
|
|
16
|
-
// | `--graupl-input-group-
|
|
17
|
-
// | `--graupl-input-group-
|
|
18
|
-
// | `--graupl-input-group-
|
|
19
|
-
// | `--graupl-input-group-
|
|
20
|
-
// | `--graupl-input-group-
|
|
21
|
-
// | `--graupl-input-group-
|
|
22
|
-
// | `--graupl-input-group-
|
|
23
|
-
// | `--graupl-input-group-
|
|
24
|
-
// | `--graupl-input-group-
|
|
16
|
+
// | Property | Description | Default Value |
|
|
17
|
+
// | --------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
18
|
+
// | `--graupl-input-group-top-grid-template-columns` | Grid template columns for the top layout. | `[label-start input-start help-start] 100% [help-end input-end label-end]` |
|
|
19
|
+
// | `--graupl-input-group-top-grid-template-rows` | Grid template rows for the top layout. | `[input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end]` |
|
|
20
|
+
// | `--graupl-input-group-bottom-grid-template-columns` | Grid template columns for the bottom layout. | `[label-start input-start help-start] 100% [help-end input-end label-end]` |
|
|
21
|
+
// | `--graupl-input-group-bottom-grid-template-rows` | Grid template rows for the bottom layout. | `[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]` |
|
|
22
|
+
// | `--graupl-input-group-left-grid-template-columns` | Grid template columns for the left layout. | `[input-start] auto [input-end label-start help-start] 1fr [help-end label-end]` |
|
|
23
|
+
// | `--graupl-input-group-left-grid-template-rows` | Grid template rows for the left layout. | `[label-start input-start] auto [input-end label-end help-start] auto [help-end]` |
|
|
24
|
+
// | `--graupl-input-group-right-grid-template-columns` | Grid template columns for the right layout. | `[label-start] auto [label-end input-start help-start] 1fr [help-end input-end]` |
|
|
25
|
+
// | `--graupl-input-group-right-grid-template-rows` | Grid template rows for the right layout. | `[label-start input-start] auto [input-end label-end help-start] auto [help-end]` |
|
|
26
|
+
// | `--graupl-input-group-grid-template-columns` | Grid template columns for the default layout | `var(--graupl-input-group-bottom-grid-template-columns)` |
|
|
27
|
+
// | `--graupl-input-group-grid-template-rows` | Grid template rows for the default layout. | `var(--graupl-input-group-bottom-grid-template-rows)` |
|
|
28
|
+
// | `--graupl-input-group-row-gap` | Row gap between label/input/help. | `var(--graupl-spacer-2)` |
|
|
29
|
+
// | `--graupl-input-group-column-gap` | Column gap between label/input/help. | `var(--graupl-spacer-3)` |
|
|
30
|
+
// | `--graupl-input-group-gap` | Shorthand gap (row/column) for the group. | `var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap)` |
|
|
31
|
+
// | `--graupl-input-group-inline-grid-template-columns` | Grid template columns for the inline layout. | `var(--graupl-input-group-right-grid-template-columns)` |
|
|
32
|
+
// | `--graupl-input-group-inline-grid-template-rows` | Grid template rows for the inline layout. | `var(--graupl-input-group-right-grid-template-rows)` |
|
|
25
33
|
//
|
|
26
34
|
// The following sass variables can be used to customize the generation of the input group component:
|
|
27
|
-
// | Variable
|
|
28
|
-
// |
|
|
29
|
-
// | `$selector-base`
|
|
30
|
-
// | `$modifier-selector-base`
|
|
31
|
-
// | `$input-group-selector-base`
|
|
32
|
-
// | `$input-group-selector`
|
|
33
|
-
// | `$input-group-inline-selector-base`
|
|
34
|
-
// | `$input-group-inline-selector`
|
|
35
|
-
// | `$input-group-help-text-selector-base`
|
|
36
|
-
// | `$input-group-help-text-selector`
|
|
37
|
-
// | `$input-group-
|
|
38
|
-
// | `$input-group-
|
|
39
|
-
// | `$input-group-
|
|
40
|
-
// | `$input-group-
|
|
41
|
-
// | `$input-group-
|
|
42
|
-
// | `$input-group-
|
|
43
|
-
// | `$input-group-
|
|
44
|
-
// | `$input-group-
|
|
45
|
-
// | `$input-group-
|
|
46
|
-
// | `$input-group-
|
|
35
|
+
// | Variable | Description | Default Value |
|
|
36
|
+
// | -------------------------------------- | -------------------------------------------- | --------------- |
|
|
37
|
+
// | `$selector-base` | Selector base for the component. | `"."` |
|
|
38
|
+
// | `$modifier-selector-base` | Selector base for component modifiers. | `"."` |
|
|
39
|
+
// | `$input-group-selector-base` | Selector base for the input group container. | `"."` |
|
|
40
|
+
// | `$input-group-selector` | Selector for the input group container. | `"input-group"` |
|
|
41
|
+
// | `$input-group-inline-selector-base` | Selector base for the inline modifier. | `"."` |
|
|
42
|
+
// | `$input-group-inline-selector` | Selector for the inline modifier. | `"inline"` |
|
|
43
|
+
// | `$input-group-help-text-selector-base` | Selector base for the help text. | `"."` |
|
|
44
|
+
// | `$input-group-help-text-selector` | Selector for the help text. | `"help-text"` |
|
|
45
|
+
// | `$input-group-top-selector-base` | Selector base for the top modifier. | `"."` |
|
|
46
|
+
// | `$input-group-top-selector` | Selector for the top modifier. | `"top"` |
|
|
47
|
+
// | `$input-group-bottom-selector-base` | Selector base for the bottom modifier. | `"."` |
|
|
48
|
+
// | `$input-group-bottom-selector` | Selector for the bottom modifier. | `"bottom"` |
|
|
49
|
+
// | `$input-group-left-selector-base` | Selector base for the left modifier. | `"."` |
|
|
50
|
+
// | `$input-group-left-selector` | Selector for the left modifier. | `"left"` |
|
|
51
|
+
// | `$input-group-right-selector-base` | Selector base for the right modifier. | `"."` |
|
|
52
|
+
// | `$input-group-right-selector` | Selector for the right modifier. | `"right"` |
|
|
53
|
+
// | `$input-group-inverse-selector-base` | Selector base for the inverse modifier. | `"."` |
|
|
54
|
+
// | `$input-group-inverse-selector` | Selector for the inverse modifier. | `"inverse"` |
|
|
47
55
|
//
|
|
48
56
|
// @example
|
|
49
57
|
// <div class="input-group">
|
|
@@ -62,18 +70,19 @@
|
|
|
62
70
|
// <span class="help-text">Inline help</span>
|
|
63
71
|
// </div>
|
|
64
72
|
|
|
65
|
-
@use "defaults";
|
|
66
73
|
@use "../../base/form/defaults" as form-defaults;
|
|
67
|
-
@use "variables" as *;
|
|
68
74
|
@use "../../mixins/layer" as *;
|
|
69
75
|
@use "../../mixins/screen";
|
|
76
|
+
@use "defaults";
|
|
77
|
+
@use "sass:list";
|
|
78
|
+
@use "sass:map";
|
|
79
|
+
@use "variables" as *;
|
|
70
80
|
|
|
71
81
|
// stylelint-disable declaration-block-no-redundant-longhand-properties
|
|
72
82
|
@include layer(component) {
|
|
73
83
|
// .input-group
|
|
74
84
|
#{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {
|
|
75
85
|
display: grid;
|
|
76
|
-
grid-template-areas: $input-group-grid-template-areas;
|
|
77
86
|
grid-template-columns: $input-group-grid-template-columns;
|
|
78
87
|
grid-template-rows: $input-group-grid-template-rows;
|
|
79
88
|
align-items: center;
|
|
@@ -81,35 +90,88 @@
|
|
|
81
90
|
|
|
82
91
|
// label
|
|
83
92
|
#{form-defaults.$label-selector} {
|
|
84
|
-
grid-area:
|
|
93
|
+
grid-area: label;
|
|
85
94
|
}
|
|
86
95
|
|
|
87
96
|
// input, textarea, select
|
|
88
97
|
#{form-defaults.$input-selector},
|
|
89
98
|
#{form-defaults.$textarea-selector},
|
|
90
99
|
#{form-defaults.$select-selector} {
|
|
91
|
-
grid-area:
|
|
100
|
+
grid-area: input;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@each $selector
|
|
104
|
+
in list.join(
|
|
105
|
+
map.get(form-defaults.$input-type-selectors, "checkbox"),
|
|
106
|
+
map.get(form-defaults.$input-type-selectors, "radio")
|
|
107
|
+
)
|
|
108
|
+
{
|
|
109
|
+
// e.g. [type=checkbox], [type=radio]
|
|
110
|
+
#{$selector} {
|
|
111
|
+
justify-self: start;
|
|
112
|
+
}
|
|
92
113
|
}
|
|
93
114
|
|
|
94
115
|
// .help-text
|
|
95
116
|
#{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {
|
|
96
|
-
grid-area:
|
|
117
|
+
grid-area: help;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// &.top
|
|
121
|
+
&#{defaults.$input-group-top-selector-base}#{defaults.$input-group-top-selector} {
|
|
122
|
+
grid-template-columns: $input-group-top-grid-template-columns;
|
|
123
|
+
grid-template-rows: $input-group-top-grid-template-rows;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// &.bottom
|
|
127
|
+
&#{defaults.$input-group-bottom-selector-base}#{defaults.$input-group-bottom-selector} {
|
|
128
|
+
grid-template-columns: $input-group-bottom-grid-template-columns;
|
|
129
|
+
grid-template-rows: $input-group-bottom-grid-template-rows;
|
|
97
130
|
}
|
|
98
131
|
|
|
99
132
|
// &.inline
|
|
100
133
|
&#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {
|
|
101
|
-
grid-template-areas: $input-group-inline-grid-template-areas;
|
|
102
134
|
grid-template-columns: $input-group-inline-grid-template-columns;
|
|
103
135
|
grid-template-rows: $input-group-inline-grid-template-rows;
|
|
136
|
+
|
|
137
|
+
// &.left
|
|
138
|
+
&#{defaults.$input-group-left-selector-base}#{defaults.$input-group-left-selector} {
|
|
139
|
+
grid-template-columns: $input-group-left-grid-template-columns;
|
|
140
|
+
grid-template-rows: $input-group-left-grid-template-rows;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// &.right
|
|
144
|
+
&#{defaults.$input-group-right-selector-base}#{defaults.$input-group-right-selector} {
|
|
145
|
+
grid-template-columns: $input-group-right-grid-template-columns;
|
|
146
|
+
grid-template-rows: $input-group-right-grid-template-rows;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// &.inverse
|
|
151
|
+
&#{defaults.$input-group-inverse-selector-base}#{defaults.$input-group-inverse-selector} {
|
|
152
|
+
grid-template-columns: $input-group-right-grid-template-columns;
|
|
153
|
+
grid-template-rows: $input-group-right-grid-template-rows;
|
|
104
154
|
}
|
|
105
155
|
}
|
|
106
156
|
|
|
107
157
|
@include screen.down(xs) {
|
|
108
|
-
// .input-group
|
|
109
|
-
#{defaults.$input-group-selector-base}#{defaults.$input-group-selector}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
158
|
+
// .input-group
|
|
159
|
+
#{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {
|
|
160
|
+
// &.inline, &.left, &.right
|
|
161
|
+
&#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {
|
|
162
|
+
&,
|
|
163
|
+
&#{defaults.$input-group-left-selector-base}#{defaults.$input-group-left-selector},
|
|
164
|
+
&#{defaults.$input-group-right-selector-base}#{defaults.$input-group-right-selector} {
|
|
165
|
+
grid-template-columns: $input-group-grid-template-columns;
|
|
166
|
+
grid-template-rows: $input-group-grid-template-rows;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// &.inverse
|
|
171
|
+
&#{defaults.$input-group-inverse-selector-base}#{defaults.$input-group-inverse-selector} {
|
|
172
|
+
grid-template-columns: $input-group-bottom-grid-template-columns;
|
|
173
|
+
grid-template-rows: $input-group-bottom-grid-template-rows;
|
|
174
|
+
}
|
|
113
175
|
}
|
|
114
176
|
}
|
|
115
177
|
}
|
|
@@ -4,20 +4,23 @@
|
|
|
4
4
|
// cleaner way to reference custom properties.
|
|
5
5
|
|
|
6
6
|
// Custom property defaults:
|
|
7
|
-
// | Custom property | Default
|
|
8
|
-
// | ------------------------------------------------- |
|
|
9
|
-
// | --graupl-input-group-grid-template-
|
|
10
|
-
// | --graupl-input-group-grid-template-
|
|
11
|
-
// | --graupl-input-group-grid-template-
|
|
12
|
-
// | --graupl-input-group-
|
|
13
|
-
// | --graupl-input-group-
|
|
14
|
-
// | --graupl-input-group-
|
|
15
|
-
// | --graupl-input-group-
|
|
16
|
-
// | --graupl-input-group-
|
|
17
|
-
// | --graupl-input-group-
|
|
18
|
-
// | --graupl-input-group-
|
|
19
|
-
// | --graupl-input-group-
|
|
20
|
-
// | --graupl-input-group-
|
|
7
|
+
// | Custom property | Default |
|
|
8
|
+
// | ------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
|
9
|
+
// | --graupl-input-group-top-grid-template-columns | [label-start input-start help-start] 100% [help-end input-end label-end] |
|
|
10
|
+
// | --graupl-input-group-top-grid-template-rows | [input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end] |
|
|
11
|
+
// | --graupl-input-group-bottom-grid-template-columns | [label-start input-start help-start] 100% [help-end input-end label-end] |
|
|
12
|
+
// | --graupl-input-group-bottom-grid-template-rows | [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end] |
|
|
13
|
+
// | --graupl-input-group-left-grid-template-columns | [input-start] auto [input-end label-start help-start] 1fr [help-end label-end] |
|
|
14
|
+
// | --graupl-input-group-left-grid-template-rows | [label-start input-start] auto [input-end label-end help-start] auto [help-end] |
|
|
15
|
+
// | --graupl-input-group-right-grid-template-columns | [label-start] auto [label-end input-start help-start] 1fr [help-end input-end] |
|
|
16
|
+
// | --graupl-input-group-right-grid-template-rows | [label-start input-start] auto [input-end label-end help-start] auto [help-end] |
|
|
17
|
+
// | --graupl-input-group-grid-template-columns | var(--graupl-input-group-bottom-grid-template-columns) |
|
|
18
|
+
// | --graupl-input-group-grid-template-rows | var(--graupl-input-group-bottom-grid-template-rows) |
|
|
19
|
+
// | --graupl-input-group-row-gap | var(--graupl-spacer-2) |
|
|
20
|
+
// | --graupl-input-group-column-gap | var(--graupl-spacer-3) |
|
|
21
|
+
// | --graupl-input-group-gap | var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap) |
|
|
22
|
+
// | --graupl-input-group-inline-grid-template-columns | var(--graupl-input-group-right-grid-template-columns) |
|
|
23
|
+
// | --graupl-input-group-inline-grid-template-rows | var(--graupl-input-group-right-grid-template-rows) |
|
|
21
24
|
|
|
22
25
|
@use "defaults";
|
|
23
26
|
@use "../../defaults" as root-defaults;
|
|
@@ -25,24 +28,68 @@
|
|
|
25
28
|
@use "sass:map";
|
|
26
29
|
|
|
27
30
|
// Input group properties.
|
|
28
|
-
// --graupl-input-group-grid-template-
|
|
29
|
-
$input-group-grid-template-
|
|
30
|
-
--#{root-defaults.$prefix}input-group-grid-template-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
// --graupl-input-group-top-grid-template-columns
|
|
32
|
+
$input-group-top-grid-template-columns: var(
|
|
33
|
+
--#{root-defaults.$prefix}input-group-top-grid-template-columns,
|
|
34
|
+
[label-start input-start help-start] 100% [help-end input-end label-end]
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
// --graupl-input-group-top-grid-template-rows
|
|
38
|
+
$input-group-top-grid-template-rows: var(
|
|
39
|
+
--#{root-defaults.$prefix}input-group-top-grid-template-rows,
|
|
40
|
+
[input-start] auto [input-end label-start] auto [label-end help-start] auto
|
|
41
|
+
[help-end]
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
// --graupl-input-group-bottom-grid-template-columns
|
|
45
|
+
$input-group-bottom-grid-template-columns: var(
|
|
46
|
+
--#{root-defaults.$prefix}input-group-bottom-grid-template-columns,
|
|
47
|
+
[label-start input-start help-start] 100% [help-end input-end label-end]
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
// --graupl-input-group-bottom-grid-template-rows
|
|
51
|
+
$input-group-bottom-grid-template-rows: var(
|
|
52
|
+
--#{root-defaults.$prefix}input-group-bottom-grid-template-rows,
|
|
53
|
+
[label-start] auto [label-end input-start] auto [input-end help-start] auto
|
|
54
|
+
[help-end]
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
// --graupl-input-group-left-grid-template-columns
|
|
58
|
+
$input-group-left-grid-template-columns: var(
|
|
59
|
+
--#{root-defaults.$prefix}input-group-left-grid-template-columns,
|
|
60
|
+
[input-start] auto [input-end label-start help-start] 1fr [help-end label-end]
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
// --graupl-input-group-left-grid-template-rows
|
|
64
|
+
$input-group-left-grid-template-rows: var(
|
|
65
|
+
--#{root-defaults.$prefix}input-group-left-grid-template-rows,
|
|
66
|
+
[label-start input-start] auto [input-end label-end help-start] auto
|
|
67
|
+
[help-end]
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
// --graupl-input-group-right-grid-template-columns
|
|
71
|
+
$input-group-right-grid-template-columns: var(
|
|
72
|
+
--#{root-defaults.$prefix}input-group-right-grid-template-columns,
|
|
73
|
+
[label-start] auto [label-end input-start help-start] 1fr [help-end input-end]
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
// --graupl-input-group-right-grid-template-rows
|
|
77
|
+
$input-group-right-grid-template-rows: var(
|
|
78
|
+
--#{root-defaults.$prefix}input-group-right-grid-template-rows,
|
|
79
|
+
[label-start input-start] auto [input-end label-end help-start] auto
|
|
80
|
+
[help-end]
|
|
34
81
|
);
|
|
35
82
|
|
|
36
83
|
// --graupl-input-group-grid-template-columns
|
|
37
84
|
$input-group-grid-template-columns: var(
|
|
38
85
|
--#{root-defaults.$prefix}input-group-grid-template-columns,
|
|
39
|
-
#{
|
|
86
|
+
#{$input-group-bottom-grid-template-columns}
|
|
40
87
|
);
|
|
41
88
|
|
|
42
89
|
// --graupl-input-group-grid-template-rows
|
|
43
90
|
$input-group-grid-template-rows: var(
|
|
44
91
|
--#{root-defaults.$prefix}input-group-grid-template-rows,
|
|
45
|
-
#{
|
|
92
|
+
#{$input-group-bottom-grid-template-rows}
|
|
46
93
|
);
|
|
47
94
|
|
|
48
95
|
// --graupl-input-group-row-gap
|
|
@@ -64,40 +111,14 @@ $input-group-gap: var(
|
|
|
64
111
|
);
|
|
65
112
|
|
|
66
113
|
// Inline input group properties.
|
|
67
|
-
// --graupl-input-group-inline-grid-template-areas
|
|
68
|
-
$input-group-inline-grid-template-areas: var(
|
|
69
|
-
--#{root-defaults.$prefix}input-group-inline-grid-template-areas,
|
|
70
|
-
"#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}"
|
|
71
|
-
"- #{defaults.$input-group-grid-help-name}"
|
|
72
|
-
);
|
|
73
|
-
|
|
74
114
|
// --graupl-input-group-inline-grid-template-columns
|
|
75
115
|
$input-group-inline-grid-template-columns: var(
|
|
76
116
|
--#{root-defaults.$prefix}input-group-inline-grid-template-columns,
|
|
77
|
-
#{
|
|
117
|
+
#{$input-group-right-grid-template-columns}
|
|
78
118
|
);
|
|
79
119
|
|
|
80
120
|
// --graupl-input-group-inline-grid-template-rows
|
|
81
121
|
$input-group-inline-grid-template-rows: var(
|
|
82
122
|
--#{root-defaults.$prefix}input-group-inline-grid-template-rows,
|
|
83
|
-
#{
|
|
84
|
-
);
|
|
85
|
-
|
|
86
|
-
// Inner element properties.
|
|
87
|
-
// --graupl-input-group-label-grid-area
|
|
88
|
-
$input-group-label-grid-area: var(
|
|
89
|
-
--#{root-defaults.$prefix}input-group-label-grid-area,
|
|
90
|
-
#{defaults.$input-group-label-grid-area}
|
|
91
|
-
);
|
|
92
|
-
|
|
93
|
-
// --graupl-input-group-input-grid-area
|
|
94
|
-
$input-group-input-grid-area: var(
|
|
95
|
-
--#{root-defaults.$prefix}input-group-input-grid-area,
|
|
96
|
-
#{defaults.$input-group-input-grid-area}
|
|
97
|
-
);
|
|
98
|
-
|
|
99
|
-
// --graupl-input-group-help-grid-area
|
|
100
|
-
$input-group-help-grid-area: var(
|
|
101
|
-
--#{root-defaults.$prefix}input-group-help-grid-area,
|
|
102
|
-
#{defaults.$input-group-help-grid-area}
|
|
123
|
+
#{$input-group-right-grid-template-rows}
|
|
103
124
|
);
|