@3t-transform/threeteeui 0.0.22 → 0.0.24

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.
Files changed (120) hide show
  1. package/dist/cjs/{index-bf777121.js → index-bc080fb4.js} +2 -148
  2. package/dist/cjs/loader.cjs.js +3 -4
  3. package/dist/cjs/tttx-button.cjs.entry.js +1 -1
  4. package/dist/cjs/tttx-icon.cjs.entry.js +1 -1
  5. package/dist/cjs/tttx-keyvalue-block.cjs.entry.js +1 -1
  6. package/dist/cjs/tttx-list.cjs.entry.js +14 -178
  7. package/dist/cjs/tttx-loading-spinner.cjs.entry.js +1 -1
  8. package/dist/cjs/tttx-standalone-input.cjs.entry.js +1 -1
  9. package/dist/cjs/tttx-table.cjs.entry.js +1 -1
  10. package/dist/cjs/tttx.cjs.js +3 -7
  11. package/dist/collection/collection-manifest.json +2 -6
  12. package/dist/collection/components/atoms/tttx-button/test/tttx-button.e2e.js +9 -0
  13. package/dist/collection/components/atoms/tttx-button/test/tttx-button.spec.js +43 -0
  14. package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.e2e.js +9 -0
  15. package/dist/collection/components/atoms/tttx-icon/test/tttx-icon.spec.js +16 -0
  16. package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js +164 -0
  17. package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js +64 -0
  18. package/dist/collection/components/molecules/tttx-list/test/tttx-list.spec.js +151 -0
  19. package/dist/collection/components/molecules/tttx-list/tttx-list.css +17 -20
  20. package/dist/collection/components/molecules/tttx-list/tttx-list.js +22 -255
  21. package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js +34 -32
  22. package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.js +9 -0
  23. package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.js +146 -0
  24. package/dist/collection/components/molecules/tttx-table/test/tttx-table.e2e.js +9 -0
  25. package/dist/components/index.d.ts +0 -13
  26. package/dist/components/index.js +1 -5
  27. package/dist/components/tttx-button.js +54 -1
  28. package/dist/components/tttx-list.js +19 -188
  29. package/dist/components/tttx-loading-spinner.js +38 -1
  30. package/dist/components/tttx-table.js +2 -8
  31. package/dist/esm/{index-a05bd606.js → index-901bfd55.js} +3 -147
  32. package/dist/esm/loader.js +3 -4
  33. package/dist/esm/polyfills/css-shim.js +1 -1
  34. package/dist/esm/tttx-button.entry.js +1 -1
  35. package/dist/esm/tttx-icon.entry.js +1 -1
  36. package/dist/esm/tttx-keyvalue-block.entry.js +1 -1
  37. package/dist/esm/tttx-list.entry.js +14 -178
  38. package/dist/esm/tttx-loading-spinner.entry.js +1 -1
  39. package/dist/esm/tttx-standalone-input.entry.js +1 -1
  40. package/dist/esm/tttx-table.entry.js +1 -1
  41. package/dist/esm/tttx.js +3 -4
  42. package/dist/tttx/{p-68ff0f39.entry.js → p-0ae51ec5.entry.js} +1 -1
  43. package/dist/tttx/{p-9536b8c4.entry.js → p-1ec23160.entry.js} +1 -1
  44. package/dist/tttx/p-300ff6a8.entry.js +1 -0
  45. package/dist/tttx/p-32ad02d3.entry.js +1 -0
  46. package/dist/tttx/{p-a96ca037.entry.js → p-80cf5236.entry.js} +1 -1
  47. package/dist/tttx/{p-a5808741.entry.js → p-9a382959.entry.js} +1 -1
  48. package/dist/tttx/{p-46b5551e.entry.js → p-a1bd16a1.entry.js} +1 -1
  49. package/dist/tttx/{p-93763d3c.entry.js → p-a4077908.entry.js} +1 -1
  50. package/dist/tttx/p-a6953900.entry.js +1 -0
  51. package/dist/tttx/p-b46e3c59.entry.js +1 -0
  52. package/dist/tttx/p-c290160b.js +2 -0
  53. package/dist/tttx/p-dc179257.entry.js +1 -0
  54. package/dist/tttx/p-e19eb07e.entry.js +1 -0
  55. package/dist/tttx/p-e4341658.entry.js +1 -0
  56. package/dist/tttx/tttx.esm.js +1 -1
  57. package/dist/types/components/atoms/tttx-button/test/tttx-button.e2e.d.ts +1 -0
  58. package/dist/types/components/atoms/tttx-button/test/tttx-button.spec.d.ts +1 -0
  59. package/dist/types/components/atoms/tttx-icon/test/tttx-icon.e2e.d.ts +1 -0
  60. package/dist/types/components/atoms/tttx-icon/test/tttx-icon.spec.d.ts +1 -0
  61. package/dist/types/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.d.ts +1 -0
  62. package/dist/types/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.d.ts +1 -0
  63. package/dist/types/components/molecules/tttx-list/interfaces.d.ts +4 -0
  64. package/dist/types/components/molecules/tttx-list/test/tttx-list.spec.d.ts +1 -0
  65. package/dist/types/components/molecules/tttx-list/tttx-list.d.ts +4 -46
  66. package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts +2 -8
  67. package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.d.ts +1 -0
  68. package/dist/types/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.d.ts +1 -0
  69. package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts +6 -6
  70. package/dist/types/components/molecules/tttx-table/test/tttx-table.e2e.d.ts +1 -0
  71. package/dist/types/components.d.ts +3 -91
  72. package/dist/types/stencil-public-runtime.d.ts +3 -59
  73. package/loader/index.d.ts +0 -9
  74. package/package.json +3 -2
  75. package/readme.md +20 -0
  76. package/dist/cjs/tttx-checkbox.cjs.entry.js +0 -28
  77. package/dist/cjs/tttx-form.cjs.entry.js +0 -374
  78. package/dist/cjs/tttx-input-calendar.cjs.entry.js +0 -125
  79. package/dist/cjs/tttx-popover-content.cjs.entry.js +0 -23
  80. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css +0 -30
  81. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +0 -97
  82. package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +0 -23
  83. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css +0 -181
  84. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +0 -102
  85. package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +0 -13
  86. package/dist/collection/components/molecules/tttx-form/tttx-form.css +0 -314
  87. package/dist/collection/components/molecules/tttx-form/tttx-form.js +0 -452
  88. package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +0 -109
  89. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.css +0 -93
  90. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.js +0 -174
  91. package/dist/collection/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.js +0 -27
  92. package/dist/components/tttx-button2.js +0 -56
  93. package/dist/components/tttx-checkbox.d.ts +0 -11
  94. package/dist/components/tttx-checkbox.js +0 -46
  95. package/dist/components/tttx-form.d.ts +0 -11
  96. package/dist/components/tttx-form.js +0 -391
  97. package/dist/components/tttx-input-calendar.d.ts +0 -11
  98. package/dist/components/tttx-input-calendar.js +0 -157
  99. package/dist/components/tttx-loading-spinner2.js +0 -40
  100. package/dist/components/tttx-popover-content.d.ts +0 -11
  101. package/dist/components/tttx-popover-content.js +0 -6
  102. package/dist/components/tttx-popover-content2.js +0 -39
  103. package/dist/esm/tttx-checkbox.entry.js +0 -24
  104. package/dist/esm/tttx-form.entry.js +0 -370
  105. package/dist/esm/tttx-input-calendar.entry.js +0 -121
  106. package/dist/esm/tttx-popover-content.entry.js +0 -19
  107. package/dist/tttx/p-037d286f.entry.js +0 -1
  108. package/dist/tttx/p-07b134af.js +0 -2
  109. package/dist/tttx/p-1b63f16a.entry.js +0 -1
  110. package/dist/tttx/p-45afb84c.entry.js +0 -1
  111. package/dist/tttx/p-a92ca87e.entry.js +0 -1
  112. package/dist/tttx/p-f579ed1e.entry.js +0 -1
  113. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +0 -7
  114. package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +0 -18
  115. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +0 -9
  116. package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +0 -6
  117. package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +0 -134
  118. package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +0 -12
  119. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.d.ts +0 -19
  120. package/dist/types/components/molecules/tttx-input-calendar/tttx-input-calendar.stories.d.ts +0 -26
@@ -1,23 +0,0 @@
1
- export default {
2
- title: 'Atoms/PopoverContent',
3
- component: 'tttx-popover-content',
4
- argTypes: {
5
- header: {
6
- control: {
7
- type: 'text',
8
- },
9
- },
10
- body: {
11
- control: {
12
- type: 'text',
13
- },
14
- },
15
- },
16
- };
17
- const Template = ({ header, body, linkcontext }) => `<tttx-popover-content header="${header}" body="${body}" linkcontext="${linkcontext}" />`;
18
- export const Basic = Template.bind({});
19
- Basic.args = {
20
- header: 'HEADER',
21
- body: 'BODY',
22
- linkcontext: 'TESTING123',
23
- };
@@ -1,181 +0,0 @@
1
- .material-symbols-rounded {
2
- font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
3
- }
4
-
5
- .material-symbols-rounded {
6
- font-family: "Material Symbols Rounded", sans-serif;
7
- font-weight: 400;
8
- font-style: normal;
9
- font-size: 24px;
10
- line-height: 1;
11
- letter-spacing: normal;
12
- text-transform: none;
13
- display: inline-block;
14
- white-space: nowrap;
15
- word-wrap: normal;
16
- direction: ltr;
17
- text-rendering: optimizeLegibility;
18
- -webkit-font-smoothing: antialiased;
19
- color: #9e9e9e;
20
- }
21
-
22
- .icon-left,
23
- .icon-right {
24
- flex-basis: 24px;
25
- }
26
-
27
- .icon-left span,
28
- .icon-right span {
29
- font-size: 24px;
30
- line-height: 24px;
31
- text-align: center;
32
- display: block;
33
- width: 24px;
34
- height: 24px;
35
- margin-top: 4px;
36
- }
37
-
38
- .icon-left span {
39
- margin-left: 4px;
40
- }
41
-
42
- .icon-right span {
43
- margin-right: 4px;
44
- }
45
-
46
- .icon-right {
47
- margin-top: 5px;
48
- margin-right: 4px;
49
- }
50
-
51
- .icon-left {
52
- margin-top: 5px;
53
- margin-left: 4px;
54
- }
55
-
56
- .iconleft .input {
57
- padding-left: 4px;
58
- }
59
-
60
- .iconright .input {
61
- padding-right: 4px;
62
- }
63
-
64
- .focused {
65
- border-color: #1479c6;
66
- }
67
-
68
- .errormsg {
69
- display: flex;
70
- justify-content: center;
71
- align-items: center;
72
- float: left;
73
- margin-bottom: 16px;
74
- box-sizing: border-box;
75
- background-color: transparent;
76
- height: 26px;
77
- font-size: 14px;
78
- border-radius: none;
79
- z-index: 2;
80
- color: #dc0000;
81
- }
82
-
83
- .errormsg .validationicon {
84
- width: 16px;
85
- height: 16px;
86
- font-size: 16px;
87
- margin-right: 4px;
88
- vertical-align: middle;
89
- color: #dc0000;
90
- }
91
-
92
- .danger {
93
- color: #dc0000;
94
- }
95
-
96
- .optional {
97
- color: #757575;
98
- font-weight: normal;
99
- }
100
-
101
- label.inputBlock {
102
- display: block;
103
- position: relative;
104
- line-height: 21px;
105
- }
106
-
107
- label {
108
- font-weight: 500;
109
- font-size: 16px;
110
- }
111
-
112
- input:not([type=submit]) {
113
- font-family: "Roboto", serif;
114
- box-sizing: border-box;
115
- width: 100%;
116
- height: 36px;
117
- padding: 0 16px;
118
- font-size: 16px;
119
- border: 1px solid #d5d5d5;
120
- border-radius: 4px;
121
- margin-top: 4px;
122
- }
123
-
124
- /* iPhone OS fix */
125
- input[type=date] {
126
- background: white;
127
- display: block;
128
- min-width: calc(100% - 18px);
129
- line-height: 37px;
130
- }
131
-
132
- input.invalid:invalid, input.standalone.invalid {
133
- border: 1px solid #dc0000;
134
- }
135
-
136
- input ~ .errorBubble {
137
- min-height: 27px;
138
- position: relative;
139
- font-size: 14px;
140
- font-weight: normal;
141
- width: 100%;
142
- font-family: "Roboto", sans-serif;
143
- color: #dc0000;
144
- display: flex;
145
- align-content: center;
146
- align-items: center;
147
- justify-items: center;
148
- }
149
-
150
- input ~ .errorBubble:not(.visible) {
151
- visibility: hidden;
152
- }
153
-
154
- input ~ .errorBubble span {
155
- color: #dc0000;
156
- font-size: 16px;
157
- margin-right: 4px;
158
- height: 16px;
159
- }
160
-
161
- input.invalid:invalid ~ .errorBubble {
162
- position: relative;
163
- font-size: 14px;
164
- font-weight: normal;
165
- width: 100%;
166
- font-family: "Roboto", sans-serif;
167
- color: #dc0000;
168
- visibility: visible;
169
- }
170
-
171
- input:focus {
172
- border-color: #1479c6;
173
- }
174
-
175
- :host {
176
- display: block;
177
- }
178
-
179
- .spacing {
180
- margin-bottom: 16px;
181
- }
@@ -1,102 +0,0 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import { Host, h } from '@stencil/core';
3
- export class TttxCheckbox {
4
- constructor() {
5
- this.value = undefined;
6
- this.label = undefined;
7
- this.required = undefined;
8
- }
9
- handleClick(event) {
10
- const target = event.target;
11
- this.value = target.checked;
12
- this.valueChanged.emit(target.checked);
13
- }
14
- render() {
15
- return (h(Host, null, h("div", { class: "field spacing" }, this.label && (h("label", { class: "label" }, this.label, !this.required ? h("span", { class: "optional" }, " (optional)") : '')), h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
16
- }
17
- static get is() { return "tttx-checkbox"; }
18
- static get encapsulation() { return "shadow"; }
19
- static get originalStyleUrls() {
20
- return {
21
- "$": ["tttx-checkbox.scss"]
22
- };
23
- }
24
- static get styleUrls() {
25
- return {
26
- "$": ["tttx-checkbox.css"]
27
- };
28
- }
29
- static get properties() {
30
- return {
31
- "value": {
32
- "type": "boolean",
33
- "mutable": false,
34
- "complexType": {
35
- "original": "boolean",
36
- "resolved": "boolean",
37
- "references": {}
38
- },
39
- "required": false,
40
- "optional": false,
41
- "docs": {
42
- "tags": [],
43
- "text": ""
44
- },
45
- "attribute": "value",
46
- "reflect": false
47
- },
48
- "label": {
49
- "type": "string",
50
- "mutable": false,
51
- "complexType": {
52
- "original": "string",
53
- "resolved": "string",
54
- "references": {}
55
- },
56
- "required": false,
57
- "optional": false,
58
- "docs": {
59
- "tags": [],
60
- "text": ""
61
- },
62
- "attribute": "label",
63
- "reflect": false
64
- },
65
- "required": {
66
- "type": "boolean",
67
- "mutable": false,
68
- "complexType": {
69
- "original": "boolean",
70
- "resolved": "boolean",
71
- "references": {}
72
- },
73
- "required": false,
74
- "optional": false,
75
- "docs": {
76
- "tags": [],
77
- "text": ""
78
- },
79
- "attribute": "required",
80
- "reflect": false
81
- }
82
- };
83
- }
84
- static get events() {
85
- return [{
86
- "method": "valueChanged",
87
- "name": "valueChanged",
88
- "bubbles": true,
89
- "cancelable": true,
90
- "composed": true,
91
- "docs": {
92
- "tags": [],
93
- "text": ""
94
- },
95
- "complexType": {
96
- "original": "boolean",
97
- "resolved": "boolean",
98
- "references": {}
99
- }
100
- }];
101
- }
102
- }
@@ -1,13 +0,0 @@
1
- export default {
2
- title: 'Atoms/Checkbox',
3
- component: 'tttx-checkbox',
4
- };
5
- const Template = ({ value }) => `
6
- <tttx-checkbox
7
- ${value ? 'value="true"' : ''}
8
- ></tttx-checkbox>
9
- `;
10
- export const Default = Template.bind({});
11
- Default.args = {
12
- value: false,
13
- };
@@ -1,314 +0,0 @@
1
- .material-symbols-rounded {
2
- font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
3
- }
4
-
5
- .material-symbols-rounded {
6
- font-family: "Material Symbols Rounded", sans-serif;
7
- font-weight: 400;
8
- font-style: normal;
9
- font-size: 24px;
10
- line-height: 1;
11
- letter-spacing: normal;
12
- text-transform: none;
13
- display: inline-block;
14
- white-space: nowrap;
15
- word-wrap: normal;
16
- direction: ltr;
17
- text-rendering: optimizeLegibility;
18
- -webkit-font-smoothing: antialiased;
19
- color: #9e9e9e;
20
- }
21
-
22
- .icon-left,
23
- .icon-right {
24
- flex-basis: 24px;
25
- }
26
-
27
- .icon-left span,
28
- .icon-right span {
29
- font-size: 24px;
30
- line-height: 24px;
31
- text-align: center;
32
- display: block;
33
- width: 24px;
34
- height: 24px;
35
- margin-top: 4px;
36
- }
37
-
38
- .icon-left span {
39
- margin-left: 4px;
40
- }
41
-
42
- .icon-right span {
43
- margin-right: 4px;
44
- }
45
-
46
- .icon-right {
47
- margin-top: 5px;
48
- margin-right: 4px;
49
- }
50
-
51
- .icon-left {
52
- margin-top: 5px;
53
- margin-left: 4px;
54
- }
55
-
56
- .iconleft .input {
57
- padding-left: 4px;
58
- }
59
-
60
- .iconright .input {
61
- padding-right: 4px;
62
- }
63
-
64
- .focused {
65
- border-color: #1479c6;
66
- }
67
-
68
- .errormsg {
69
- display: flex;
70
- justify-content: center;
71
- align-items: center;
72
- float: left;
73
- margin-bottom: 16px;
74
- box-sizing: border-box;
75
- background-color: transparent;
76
- height: 26px;
77
- font-size: 14px;
78
- border-radius: none;
79
- z-index: 2;
80
- color: #dc0000;
81
- }
82
-
83
- .errormsg .validationicon {
84
- width: 16px;
85
- height: 16px;
86
- font-size: 16px;
87
- margin-right: 4px;
88
- vertical-align: middle;
89
- color: #dc0000;
90
- }
91
-
92
- .danger {
93
- color: #dc0000;
94
- }
95
-
96
- .optional {
97
- color: #757575;
98
- font-weight: normal;
99
- }
100
-
101
- label.inputBlock {
102
- display: block;
103
- position: relative;
104
- line-height: 21px;
105
- }
106
-
107
- label {
108
- font-weight: 500;
109
- font-size: 16px;
110
- }
111
-
112
- input:not([type=submit]) {
113
- font-family: "Roboto", serif;
114
- box-sizing: border-box;
115
- width: 100%;
116
- height: 36px;
117
- padding: 0 16px;
118
- font-size: 16px;
119
- border: 1px solid #d5d5d5;
120
- border-radius: 4px;
121
- margin-top: 4px;
122
- }
123
-
124
- /* iPhone OS fix */
125
- input[type=date] {
126
- background: white;
127
- display: block;
128
- min-width: calc(100% - 18px);
129
- line-height: 37px;
130
- }
131
-
132
- input.invalid:invalid, input.standalone.invalid {
133
- border: 1px solid #dc0000;
134
- }
135
-
136
- input ~ .errorBubble {
137
- min-height: 27px;
138
- position: relative;
139
- font-size: 14px;
140
- font-weight: normal;
141
- width: 100%;
142
- font-family: "Roboto", sans-serif;
143
- color: #dc0000;
144
- display: flex;
145
- align-content: center;
146
- align-items: center;
147
- justify-items: center;
148
- }
149
-
150
- input ~ .errorBubble:not(.visible) {
151
- visibility: hidden;
152
- }
153
-
154
- input ~ .errorBubble span {
155
- color: #dc0000;
156
- font-size: 16px;
157
- margin-right: 4px;
158
- height: 16px;
159
- }
160
-
161
- input.invalid:invalid ~ .errorBubble {
162
- position: relative;
163
- font-size: 14px;
164
- font-weight: normal;
165
- width: 100%;
166
- font-family: "Roboto", sans-serif;
167
- color: #dc0000;
168
- visibility: visible;
169
- }
170
-
171
- input:focus {
172
- border-color: #1479c6;
173
- }
174
-
175
- .button {
176
- font-family: Roboto, serif;
177
- box-sizing: border-box;
178
- height: 36px;
179
- min-width: 36px;
180
- padding: 0;
181
- margin: 0;
182
- background: transparent;
183
- color: #212121;
184
- border: 1px solid #c8c8c8;
185
- border-radius: 4px;
186
- text-transform: uppercase;
187
- display: flex;
188
- justify-content: left;
189
- align-items: center;
190
- font-size: 14px;
191
- font-weight: 400;
192
- }
193
-
194
- .button-content {
195
- display: block;
196
- padding: 0 16px;
197
- }
198
-
199
- .icon-left, .icon-right {
200
- margin-top: 4px;
201
- }
202
-
203
- .iconleft {
204
- padding-left: 8px;
205
- }
206
-
207
- .iconleft .button-content {
208
- padding-left: 4px;
209
- }
210
-
211
- .iconright {
212
- padding-right: 8px;
213
- }
214
-
215
- .iconright .button-content {
216
- padding-right: 4px;
217
- }
218
-
219
- .notext {
220
- padding: 0 6px;
221
- }
222
-
223
- .button:hover {
224
- background: rgba(17, 17, 17, 0.1);
225
- border: 1px solid #D5D5D5;
226
- }
227
-
228
- .button:active {
229
- background: rgba(17, 17, 17, 0.2);
230
- border: 1px solid #D5D5D5;
231
- }
232
-
233
- .primary {
234
- background: #1479c6;
235
- border: 1px solid #1479c6;
236
- color: white;
237
- }
238
-
239
- .primary:hover {
240
- background: #146EB3;
241
- border: 1px solid #146EB3;
242
- }
243
-
244
- .primary:active {
245
- background: #1464A2;
246
- border: 1px solid #1464A2;
247
- }
248
-
249
- .borderless {
250
- background: transparent;
251
- border: none;
252
- color: #212121;
253
- }
254
-
255
- .borderless:hover {
256
- background: rgba(17, 17, 17, 0.1);
257
- border: none;
258
- }
259
-
260
- .borderless:active {
261
- background: rgba(17, 17, 17, 0.2);
262
- border: none;
263
- }
264
-
265
- .danger {
266
- background: #DC0000;
267
- border: 1px solid #DC0000;
268
- color: white;
269
- }
270
-
271
- .danger:hover {
272
- background: #C60000;
273
- border: 1px solid #C60000;
274
- }
275
-
276
- .danger:active {
277
- background: #B00000;
278
- border: 1px solid #B00000;
279
- }
280
-
281
- .disabled {
282
- background: #aeaeae;
283
- border: none;
284
- color: #4c4c4c;
285
- cursor: not-allowed;
286
- }
287
-
288
- .disabled:hover {
289
- background: #aeaeae;
290
- border: none;
291
- color: #4c4c4c;
292
- cursor: not-allowed;
293
- }
294
-
295
- .disabled:active {
296
- background: #aeaeae;
297
- border: none;
298
- color: #4c4c4c;
299
- cursor: not-allowed;
300
- }
301
-
302
- :host {
303
- display: block;
304
- }
305
-
306
- fieldset {
307
- margin: 0;
308
- padding: 0;
309
- border: none;
310
- }
311
-
312
- input[type=submit] {
313
- margin-left: auto;
314
- }