@rolemodel/optics 1.8.0 → 1.10.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/.yarn/install-state.gz +0 -0
- package/dist/css/optics.css +330 -355
- package/dist/css/optics.css.map +1 -1
- package/dist/scss/components/{button.scss → button.css} +149 -156
- package/dist/scss/components/{button_group.scss → button_group.css} +3 -11
- package/dist/scss/components/{table.scss → table.css} +48 -52
- package/package.json +1 -1
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--_op-table-cell-height-
|
|
6
|
-
--_op-table-cell-height-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
.table {
|
|
2
|
+
/* Public API */
|
|
3
|
+
|
|
4
|
+
/* Cells (for height, the appropriate variable is used when using the density modifiers) */
|
|
5
|
+
--_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
|
|
6
|
+
--_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
|
|
7
|
+
--_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */
|
|
8
|
+
|
|
9
|
+
/* Private API */
|
|
10
|
+
|
|
11
|
+
/* These allow for overriding specific padding versions easier. */
|
|
10
12
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
11
13
|
|
|
12
14
|
width: 100%;
|
|
@@ -16,12 +18,13 @@
|
|
|
16
18
|
contain: paint;
|
|
17
19
|
table-layout: auto;
|
|
18
20
|
|
|
21
|
+
/* Elements */
|
|
22
|
+
|
|
19
23
|
thead {
|
|
20
24
|
background-color: var(--op-color-neutral-plus-eight);
|
|
21
25
|
box-shadow: inset var(--op-border-top) var(--op-color-border);
|
|
22
26
|
color: var(--op-color-neutral-on-plus-eight);
|
|
23
27
|
|
|
24
|
-
// This Currently does not work in Firefox since it does not support :has yet, but fails gracefully.
|
|
25
28
|
&:has(th input[type='checkbox']:checked) {
|
|
26
29
|
background-color: var(--op-color-primary-plus-seven);
|
|
27
30
|
color: var(--op-color-primary-on-plus-seven);
|
|
@@ -42,19 +45,42 @@
|
|
|
42
45
|
th,
|
|
43
46
|
td {
|
|
44
47
|
height: var(--__op-table-cell-height);
|
|
45
|
-
padding: var(--op-space-2x-small) var(--op-space-small);
|
|
46
48
|
font-size: var(--op-font-small);
|
|
49
|
+
padding-block: var(--op-space-2x-small);
|
|
50
|
+
padding-inline: var(--op-space-small);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
tfoot tr {
|
|
54
|
+
box-shadow: var(--op-border-top) var(--op-color-border);
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
tr:not(:last-child) {
|
|
50
58
|
box-shadow: inset var(--op-border-top) var(--op-color-border);
|
|
51
59
|
}
|
|
52
60
|
|
|
53
|
-
|
|
54
|
-
|
|
61
|
+
/* Modifiers */
|
|
62
|
+
|
|
63
|
+
/* stylelint-disable no-descending-specificity */
|
|
64
|
+
&.table--primary {
|
|
65
|
+
thead {
|
|
66
|
+
background-color: var(--op-color-primary-plus-seven);
|
|
67
|
+
color: var(--op-color-primary-on-plus-seven);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.table--danger {
|
|
72
|
+
thead {
|
|
73
|
+
background-color: var(--op-color-alerts-danger-plus-seven);
|
|
74
|
+
color: var(--op-color-alerts-danger-on-plus-seven);
|
|
75
|
+
}
|
|
55
76
|
}
|
|
77
|
+
/* stylelint-enable no-descending-specificity */
|
|
56
78
|
|
|
57
|
-
|
|
79
|
+
&.table--container {
|
|
80
|
+
overflow-y: auto;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Layout Modifiers */
|
|
58
84
|
&.table--auto-layout {
|
|
59
85
|
table-layout: auto;
|
|
60
86
|
}
|
|
@@ -63,7 +89,7 @@
|
|
|
63
89
|
table-layout: fixed;
|
|
64
90
|
}
|
|
65
91
|
|
|
66
|
-
|
|
92
|
+
/* Table Density Modifiers */
|
|
67
93
|
&.table--default-density {
|
|
68
94
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
69
95
|
}
|
|
@@ -76,7 +102,7 @@
|
|
|
76
102
|
--__op-table-cell-height: var(--_op-table-cell-height-compact);
|
|
77
103
|
}
|
|
78
104
|
|
|
79
|
-
|
|
105
|
+
/* Striped Modifiers */
|
|
80
106
|
&.table--even-striped {
|
|
81
107
|
tbody tr:nth-child(even) {
|
|
82
108
|
background-color: var(--op-color-neutral-plus-seven);
|
|
@@ -91,47 +117,17 @@
|
|
|
91
117
|
}
|
|
92
118
|
}
|
|
93
119
|
|
|
94
|
-
|
|
120
|
+
/* Sticky Header Row Modifier */
|
|
121
|
+
/* stylelint-disable no-descending-specificity */
|
|
95
122
|
&.table--sticky-header thead {
|
|
96
123
|
position: sticky;
|
|
97
|
-
|
|
124
|
+
inset-block-start: 0;
|
|
98
125
|
}
|
|
126
|
+
/* stylelint-enable no-descending-specificity */
|
|
99
127
|
|
|
100
|
-
|
|
128
|
+
/* Sticky Footer Row Modifier */
|
|
101
129
|
&.table--sticky-footer tfoot {
|
|
102
130
|
position: sticky;
|
|
103
|
-
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
// Default Table
|
|
108
|
-
.table {
|
|
109
|
-
@extend %table-global;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Primary Table
|
|
113
|
-
.table-primary {
|
|
114
|
-
@extend %table-global;
|
|
115
|
-
|
|
116
|
-
thead {
|
|
117
|
-
background-color: var(--op-color-primary-plus-seven);
|
|
118
|
-
color: var(--op-color-primary-on-plus-seven);
|
|
131
|
+
inset-block-end: 0;
|
|
119
132
|
}
|
|
120
133
|
}
|
|
121
|
-
|
|
122
|
-
// Danger Table
|
|
123
|
-
.table-danger {
|
|
124
|
-
@extend %table-global;
|
|
125
|
-
|
|
126
|
-
thead {
|
|
127
|
-
background-color: var(--op-color-alerts-danger-plus-seven);
|
|
128
|
-
color: var(--op-color-alerts-danger-on-plus-seven);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
// Sticky Header / Footer Table Container
|
|
133
|
-
.table-container {
|
|
134
|
-
@extend %table-global;
|
|
135
|
-
|
|
136
|
-
overflow-y: auto;
|
|
137
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolemodel/optics",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"packageManager": "yarn@4.2.2",
|
|
5
5
|
"description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
|
|
6
6
|
"main": "dist/scss/optics.scss",
|