guestbell-forms 3.0.125 → 3.0.126

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 (13) hide show
  1. package/build/dist/guestbell-forms.css +505 -388
  2. package/build/dist/guestbell-forms.css.map +1 -1
  3. package/build/dist/guestbell-forms.min.css +1 -1
  4. package/build/dist/report.html +2 -2
  5. package/build/scss/components/button/base.scss +77 -0
  6. package/build/scss/components/button/buttons.scss +41 -147
  7. package/build/scss/components/button/index.scss +2 -0
  8. package/build/scss/components/button/utils.scss +78 -0
  9. package/package.json +1 -1
  10. package/src/lib/scss/components/button/base.scss +77 -0
  11. package/src/lib/scss/components/button/buttons.scss +41 -147
  12. package/src/lib/scss/components/button/index.scss +2 -0
  13. package/src/lib/scss/components/button/utils.scss +78 -0
package/build/scss/components/button/buttons.scss CHANGED
@@ -1,166 +1,60 @@
1
- @mixin create-button-type($bg, $fg) {
2
- background-color: $bg;
3
- fill: $fg;
4
- color: $fg;
5
- &:not(.guestbell-btn--disabled):not(.guestbell-btn--blank):not(
6
- .guestbell-btn--outlined
7
- ):not(.guestbell-btn--unobtrusive):hover {
8
- background-color: darken($bg, 7%);
9
- }
10
- &:not(.guestbell-btn--disabled).guestbell-btn--outlined {
11
- box-shadow: inset 0 0 0 1px $bg !important;
12
- color: $bg;
13
- fill: $bg;
14
- background-color: transparent;
15
- @media (hover: hover) and (pointer: fine) {
16
- &:hover {
17
- color: $fg;
18
- fill: $fg;
19
- background-color: $bg;
20
- }
21
- }
22
- }
23
- &:not(.guestbell-btn--disabled).guestbell-btn--blank {
24
- color: $bg;
25
- fill: $bg;
26
- background-color: transparent;
27
- &:hover {
28
- color: $fg;
29
- fill: $fg;
30
- background-color: rgba($bg, 0.5);
31
- }
32
- }
33
- &.guestbell-btn--disabled.guestbell-btn--unobtrusive {
34
- background-color: transparent;
35
- }
36
- &:not(.guestbell-btn--disabled).guestbell-btn--unobtrusive {
37
- box-shadow: none;
38
- background-color: transparent;
39
- color: inherit;
40
- fill: inherit;
41
- &:hover {
42
- color: $bg;
43
- fill: $bg;
44
- background-color: transparent;
45
- }
46
- }
47
- &.guestbell-btn--disabled.guestbell-btn--text {
48
- background-color: transparent;
49
- }
50
- &:not(.guestbell-btn--disabled).guestbell-btn--text {
51
- box-shadow: none;
52
- background-color: transparent;
53
- color: $bg;
54
- fill: $bg;
55
- &:hover {
56
- color: lighten($bg, 10);
57
- fill: lighten($bg, 10);
58
- background-color: transparent !important;
59
- }
60
- }
61
- }
1
+ @import './utils.scss';
62
2
 
63
3
  .guestbell-btn {
64
- &:focus {
65
- outline: 0;
66
- }
67
- &:focus-visible {
68
- outline: 1px dotted;
69
- outline: 5px auto -webkit-focus-ring-color;
70
- }
71
- text-transform: uppercase;
72
- background: transparent;
73
- color: inherit;
74
- border: none;
75
- font: inherit;
76
- cursor: pointer;
77
- position: relative;
78
- padding: 0.5rem;
79
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
80
- box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
81
- border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
82
- box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
83
- 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
84
- display: inline-block;
85
- text-align: center;
86
- white-space: nowrap;
87
- vertical-align: middle;
88
- user-select: none;
89
- cursor: pointer;
90
- fill: $input-text-color;
91
- > svg {
92
- pointer-events: none;
93
- }
94
- &:active {
95
- box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.15),
96
- 0px 6px 10px 1px rgba(0, 0, 0, 0.12), 0px 2px 14px 2px rgba(0, 0, 0, 0.08);
97
- }
98
- &.guestbell-btn--outlined {
99
- background-color: transparent;
100
- box-shadow: none;
101
- }
102
- &.guestbell-btn--icon {
103
- line-height: 0;
104
- }
105
- &.guestbell-btn--blank {
106
- background-color: transparent;
107
- box-shadow: none;
108
- }
109
- &.guestbell-btn--small {
110
- padding: 0;
111
- }
112
- &.guestbell-btn--hero {
113
- padding-left: 2rem;
114
- padding-right: 2rem;
115
- }
116
- &.guestbell-btn--no-shadow {
117
- box-shadow: none !important;
118
- }
119
- &.guestbell-btn--dropdown {
120
- width: 100%;
121
- box-shadow: none;
122
- &:not(.guestbell-btn--disabled):hover {
123
- color: $primary-color;
124
- fill: $primary-color;
125
- background-color: $input-divider-color;
126
- }
127
- &:active {
128
- box-shadow: none;
129
- }
130
- }
131
- &.guestbell-btn--circular {
132
- overflow: hidden;
133
- border-radius: 50%;
134
- display: inline-table;
135
- }
136
- &.guestbell-btn.guestbell-btn--disabled {
137
- box-shadow: none;
138
- cursor: not-allowed;
139
- background-color: $input-border-color;
140
- color: $input-label-color;
141
- }
142
4
  &.guestbell-btn-primary {
143
- @include create-button-type($primary-color, $input-text-color--white);
5
+ @include create-button-type(
6
+ $primary-color,
7
+ $input-text-color--white,
8
+ rgba($primary-color, 0.25)
9
+ );
144
10
  }
145
11
  &.guestbell-btn-success {
146
- @include create-button-type($success-color, $input-text-color--white);
12
+ @include create-button-type(
13
+ $success-color,
14
+ $input-text-color--white,
15
+ rgba($success-color, 0.25)
16
+ );
147
17
  }
148
18
  &.guestbell-btn-white {
149
- @include create-button-type($white-color, $input-text-color);
19
+ @include create-button-type(
20
+ $white-color,
21
+ $input-text-color,
22
+ rgba($white-color, 0.25)
23
+ );
150
24
  }
151
25
  &.guestbell-btn-black {
152
- @include create-button-type($black-color, $input-text-color--white);
26
+ @include create-button-type(
27
+ $black-color,
28
+ $input-text-color--white,
29
+ rgba($black-color, 0.25)
30
+ );
153
31
  }
154
32
  &.guestbell-btn-info {
155
- @include create-button-type($info-color, $input-text-color--white);
33
+ @include create-button-type(
34
+ $info-color,
35
+ $input-text-color--white,
36
+ rgba($info-color, 0.25)
37
+ );
156
38
  }
157
39
  &.guestbell-btn-error {
158
- @include create-button-type($error-color, $input-text-color--white);
40
+ @include create-button-type(
41
+ $error-color,
42
+ $input-text-color--white,
43
+ rgba($error-color, 0.25)
44
+ );
159
45
  }
160
46
  &.guestbell-btn-warning {
161
- @include create-button-type($warning-color, $input-text-color--white);
47
+ @include create-button-type(
48
+ $warning-color,
49
+ $input-text-color--white,
50
+ rgba($warning-color, 0.25)
51
+ );
162
52
  }
163
53
  &.guestbell-btn-gray {
164
- @include create-button-type($gray-color, $input-text-color--white);
54
+ @include create-button-type(
55
+ $gray-color,
56
+ $input-text-color--white,
57
+ rgba($gray-color, 0.25)
58
+ );
165
59
  }
166
60
  }
package/build/scss/components/button/index.scss CHANGED
@@ -1 +1,3 @@
1
1
  @import './buttons.scss';
2
+ @import './utils.scss';
3
+ @import './base.scss';
package/build/scss/components/button/utils.scss ADDED
@@ -0,0 +1,78 @@
1
+ @mixin create-button-type($bg, $fg, $disabled) {
2
+ background-color: $bg;
3
+ fill: $fg;
4
+ color: $fg;
5
+ &:not(.guestbell-btn--disabled):not(.guestbell-btn--blank):not(
6
+ .guestbell-btn--outlined
7
+ ):not(.guestbell-btn--unobtrusive):hover {
8
+ background-color: darken($bg, 7%);
9
+ }
10
+ &:not(.guestbell-btn--disabled).guestbell-btn--outlined {
11
+ box-shadow: inset 0 0 0 1px $bg !important;
12
+ color: $bg;
13
+ fill: $bg;
14
+ background-color: transparent;
15
+ @media (hover: hover) and (pointer: fine) {
16
+ &:hover {
17
+ color: $fg;
18
+ fill: $fg;
19
+ background-color: $bg;
20
+ }
21
+ }
22
+ }
23
+ &:not(.guestbell-btn--disabled).guestbell-btn--blank {
24
+ color: $bg;
25
+ fill: $bg;
26
+ background-color: transparent;
27
+ &:hover {
28
+ color: $fg;
29
+ fill: $fg;
30
+ background-color: rgba($bg, 0.5);
31
+ }
32
+ }
33
+ &.guestbell-btn--disabled {
34
+ background-color: $disabled;
35
+ }
36
+ &.guestbell-btn--disabled.guestbell-btn--outlined {
37
+ background-color: transparent;
38
+ box-shadow: inset 0 0 0 1px $disabled !important;
39
+ color: $disabled;
40
+ fill: $disabled;
41
+ }
42
+ &:not(.guestbell-btn--disabled).guestbell-btn--unobtrusive {
43
+ box-shadow: none;
44
+ background-color: transparent;
45
+ color: inherit;
46
+ fill: inherit;
47
+ &:hover {
48
+ color: $bg;
49
+ fill: $bg;
50
+ background-color: transparent;
51
+ }
52
+ }
53
+ &.guestbell-btn--disabled.guestbell-btn--unobtrusive {
54
+ color: $input-text-color;
55
+ background-color: transparent;
56
+ box-shadow: none;
57
+ }
58
+ &:not(.guestbell-btn--disabled).guestbell-btn--text {
59
+ box-shadow: none;
60
+ background-color: transparent;
61
+ color: $bg;
62
+ fill: $bg;
63
+ &:hover {
64
+ color: lighten($bg, 10);
65
+ fill: lighten($bg, 10);
66
+ background-color: transparent !important;
67
+ }
68
+ }
69
+ &.guestbell-btn--disabled.guestbell-btn--text {
70
+ color: $disabled;
71
+ background-color: transparent;
72
+ box-shadow: none;
73
+ }
74
+ &.guestbell-btn--disabled.guestbell-btn--blank {
75
+ background-color: transparent;
76
+ color: darken($bg, 20%);
77
+ }
78
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.125",
2
+ "version": "3.0.126",
3
3
  "description": "React forms with validation as used in GuestBell",
4
4
  "keywords": [
5
5
  "react",
package/src/lib/scss/components/button/base.scss ADDED
@@ -0,0 +1,77 @@
1
+ .guestbell-btn {
2
+ &:focus {
3
+ outline: 0;
4
+ }
5
+ &:focus-visible {
6
+ outline: 1px dotted;
7
+ outline: 5px auto -webkit-focus-ring-color;
8
+ }
9
+ text-transform: uppercase;
10
+ background: transparent;
11
+ color: inherit;
12
+ border: none;
13
+ font: inherit;
14
+ cursor: pointer;
15
+ position: relative;
16
+ padding: 0.5rem;
17
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
18
+ box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
19
+ border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
20
+ box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
21
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
22
+ display: inline-block;
23
+ text-align: center;
24
+ white-space: nowrap;
25
+ vertical-align: middle;
26
+ user-select: none;
27
+ cursor: pointer;
28
+ fill: $input-text-color;
29
+ > svg {
30
+ pointer-events: none;
31
+ }
32
+ &:active {
33
+ box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.15),
34
+ 0px 6px 10px 1px rgba(0, 0, 0, 0.12), 0px 2px 14px 2px rgba(0, 0, 0, 0.08);
35
+ }
36
+ &.guestbell-btn--outlined {
37
+ background-color: transparent;
38
+ box-shadow: none;
39
+ }
40
+ &.guestbell-btn--icon {
41
+ line-height: 0;
42
+ }
43
+ &.guestbell-btn--blank {
44
+ background-color: transparent;
45
+ box-shadow: none;
46
+ }
47
+ &.guestbell-btn--small {
48
+ padding: 0;
49
+ }
50
+ &.guestbell-btn--hero {
51
+ padding-left: 2rem;
52
+ padding-right: 2rem;
53
+ }
54
+ &.guestbell-btn--no-shadow {
55
+ box-shadow: none !important;
56
+ }
57
+ &.guestbell-btn--dropdown {
58
+ width: 100%;
59
+ box-shadow: none;
60
+ &:not(.guestbell-btn--disabled):hover {
61
+ color: $primary-color;
62
+ fill: $primary-color;
63
+ background-color: $input-divider-color;
64
+ }
65
+ &:active {
66
+ box-shadow: none;
67
+ }
68
+ }
69
+ &.guestbell-btn--circular {
70
+ overflow: hidden;
71
+ border-radius: 50%;
72
+ display: inline-table;
73
+ }
74
+ &.guestbell-btn.guestbell-btn--disabled {
75
+ cursor: not-allowed;
76
+ }
77
+ }
package/src/lib/scss/components/button/buttons.scss CHANGED
@@ -1,166 +1,60 @@
1
- @mixin create-button-type($bg, $fg) {
2
- background-color: $bg;
3
- fill: $fg;
4
- color: $fg;
5
- &:not(.guestbell-btn--disabled):not(.guestbell-btn--blank):not(
6
- .guestbell-btn--outlined
7
- ):not(.guestbell-btn--unobtrusive):hover {
8
- background-color: darken($bg, 7%);
9
- }
10
- &:not(.guestbell-btn--disabled).guestbell-btn--outlined {
11
- box-shadow: inset 0 0 0 1px $bg !important;
12
- color: $bg;
13
- fill: $bg;
14
- background-color: transparent;
15
- @media (hover: hover) and (pointer: fine) {
16
- &:hover {
17
- color: $fg;
18
- fill: $fg;
19
- background-color: $bg;
20
- }
21
- }
22
- }
23
- &:not(.guestbell-btn--disabled).guestbell-btn--blank {
24
- color: $bg;
25
- fill: $bg;
26
- background-color: transparent;
27
- &:hover {
28
- color: $fg;
29
- fill: $fg;
30
- background-color: rgba($bg, 0.5);
31
- }
32
- }
33
- &.guestbell-btn--disabled.guestbell-btn--unobtrusive {
34
- background-color: transparent;
35
- }
36
- &:not(.guestbell-btn--disabled).guestbell-btn--unobtrusive {
37
- box-shadow: none;
38
- background-color: transparent;
39
- color: inherit;
40
- fill: inherit;
41
- &:hover {
42
- color: $bg;
43
- fill: $bg;
44
- background-color: transparent;
45
- }
46
- }
47
- &.guestbell-btn--disabled.guestbell-btn--text {
48
- background-color: transparent;
49
- }
50
- &:not(.guestbell-btn--disabled).guestbell-btn--text {
51
- box-shadow: none;
52
- background-color: transparent;
53
- color: $bg;
54
- fill: $bg;
55
- &:hover {
56
- color: lighten($bg, 10);
57
- fill: lighten($bg, 10);
58
- background-color: transparent !important;
59
- }
60
- }
61
- }
1
+ @import './utils.scss';
62
2
 
63
3
  .guestbell-btn {
64
- &:focus {
65
- outline: 0;
66
- }
67
- &:focus-visible {
68
- outline: 1px dotted;
69
- outline: 5px auto -webkit-focus-ring-color;
70
- }
71
- text-transform: uppercase;
72
- background: transparent;
73
- color: inherit;
74
- border: none;
75
- font: inherit;
76
- cursor: pointer;
77
- position: relative;
78
- padding: 0.5rem;
79
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
80
- box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
81
- border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
82
- box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
83
- 0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
84
- display: inline-block;
85
- text-align: center;
86
- white-space: nowrap;
87
- vertical-align: middle;
88
- user-select: none;
89
- cursor: pointer;
90
- fill: $input-text-color;
91
- > svg {
92
- pointer-events: none;
93
- }
94
- &:active {
95
- box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.15),
96
- 0px 6px 10px 1px rgba(0, 0, 0, 0.12), 0px 2px 14px 2px rgba(0, 0, 0, 0.08);
97
- }
98
- &.guestbell-btn--outlined {
99
- background-color: transparent;
100
- box-shadow: none;
101
- }
102
- &.guestbell-btn--icon {
103
- line-height: 0;
104
- }
105
- &.guestbell-btn--blank {
106
- background-color: transparent;
107
- box-shadow: none;
108
- }
109
- &.guestbell-btn--small {
110
- padding: 0;
111
- }
112
- &.guestbell-btn--hero {
113
- padding-left: 2rem;
114
- padding-right: 2rem;
115
- }
116
- &.guestbell-btn--no-shadow {
117
- box-shadow: none !important;
118
- }
119
- &.guestbell-btn--dropdown {
120
- width: 100%;
121
- box-shadow: none;
122
- &:not(.guestbell-btn--disabled):hover {
123
- color: $primary-color;
124
- fill: $primary-color;
125
- background-color: $input-divider-color;
126
- }
127
- &:active {
128
- box-shadow: none;
129
- }
130
- }
131
- &.guestbell-btn--circular {
132
- overflow: hidden;
133
- border-radius: 50%;
134
- display: inline-table;
135
- }
136
- &.guestbell-btn.guestbell-btn--disabled {
137
- box-shadow: none;
138
- cursor: not-allowed;
139
- background-color: $input-border-color;
140
- color: $input-label-color;
141
- }
142
4
  &.guestbell-btn-primary {
143
- @include create-button-type($primary-color, $input-text-color--white);
5
+ @include create-button-type(
6
+ $primary-color,
7
+ $input-text-color--white,
8
+ rgba($primary-color, 0.25)
9
+ );
144
10
  }
145
11
  &.guestbell-btn-success {
146
- @include create-button-type($success-color, $input-text-color--white);
12
+ @include create-button-type(
13
+ $success-color,
14
+ $input-text-color--white,
15
+ rgba($success-color, 0.25)
16
+ );
147
17
  }
148
18
  &.guestbell-btn-white {
149
- @include create-button-type($white-color, $input-text-color);
19
+ @include create-button-type(
20
+ $white-color,
21
+ $input-text-color,
22
+ rgba($white-color, 0.25)
23
+ );
150
24
  }
151
25
  &.guestbell-btn-black {
152
- @include create-button-type($black-color, $input-text-color--white);
26
+ @include create-button-type(
27
+ $black-color,
28
+ $input-text-color--white,
29
+ rgba($black-color, 0.25)
30
+ );
153
31
  }
154
32
  &.guestbell-btn-info {
155
- @include create-button-type($info-color, $input-text-color--white);
33
+ @include create-button-type(
34
+ $info-color,
35
+ $input-text-color--white,
36
+ rgba($info-color, 0.25)
37
+ );
156
38
  }
157
39
  &.guestbell-btn-error {
158
- @include create-button-type($error-color, $input-text-color--white);
40
+ @include create-button-type(
41
+ $error-color,
42
+ $input-text-color--white,
43
+ rgba($error-color, 0.25)
44
+ );
159
45
  }
160
46
  &.guestbell-btn-warning {
161
- @include create-button-type($warning-color, $input-text-color--white);
47
+ @include create-button-type(
48
+ $warning-color,
49
+ $input-text-color--white,
50
+ rgba($warning-color, 0.25)
51
+ );
162
52
  }
163
53
  &.guestbell-btn-gray {
164
- @include create-button-type($gray-color, $input-text-color--white);
54
+ @include create-button-type(
55
+ $gray-color,
56
+ $input-text-color--white,
57
+ rgba($gray-color, 0.25)
58
+ );
165
59
  }
166
60
  }
package/src/lib/scss/components/button/index.scss CHANGED
@@ -1 +1,3 @@
1
1
  @import './buttons.scss';
2
+ @import './utils.scss';
3
+ @import './base.scss';
package/src/lib/scss/components/button/utils.scss ADDED
@@ -0,0 +1,78 @@
1
+ @mixin create-button-type($bg, $fg, $disabled) {
2
+ background-color: $bg;
3
+ fill: $fg;
4
+ color: $fg;
5
+ &:not(.guestbell-btn--disabled):not(.guestbell-btn--blank):not(
6
+ .guestbell-btn--outlined
7
+ ):not(.guestbell-btn--unobtrusive):hover {
8
+ background-color: darken($bg, 7%);
9
+ }
10
+ &:not(.guestbell-btn--disabled).guestbell-btn--outlined {
11
+ box-shadow: inset 0 0 0 1px $bg !important;
12
+ color: $bg;
13
+ fill: $bg;
14
+ background-color: transparent;
15
+ @media (hover: hover) and (pointer: fine) {
16
+ &:hover {
17
+ color: $fg;
18
+ fill: $fg;
19
+ background-color: $bg;
20
+ }
21
+ }
22
+ }
23
+ &:not(.guestbell-btn--disabled).guestbell-btn--blank {
24
+ color: $bg;
25
+ fill: $bg;
26
+ background-color: transparent;
27
+ &:hover {
28
+ color: $fg;
29
+ fill: $fg;
30
+ background-color: rgba($bg, 0.5);
31
+ }
32
+ }
33
+ &.guestbell-btn--disabled {
34
+ background-color: $disabled;
35
+ }
36
+ &.guestbell-btn--disabled.guestbell-btn--outlined {
37
+ background-color: transparent;
38
+ box-shadow: inset 0 0 0 1px $disabled !important;
39
+ color: $disabled;
40
+ fill: $disabled;
41
+ }
42
+ &:not(.guestbell-btn--disabled).guestbell-btn--unobtrusive {
43
+ box-shadow: none;
44
+ background-color: transparent;
45
+ color: inherit;
46
+ fill: inherit;
47
+ &:hover {
48
+ color: $bg;
49
+ fill: $bg;
50
+ background-color: transparent;
51
+ }
52
+ }
53
+ &.guestbell-btn--disabled.guestbell-btn--unobtrusive {
54
+ color: $input-text-color;
55
+ background-color: transparent;
56
+ box-shadow: none;
57
+ }
58
+ &:not(.guestbell-btn--disabled).guestbell-btn--text {
59
+ box-shadow: none;
60
+ background-color: transparent;
61
+ color: $bg;
62
+ fill: $bg;
63
+ &:hover {
64
+ color: lighten($bg, 10);
65
+ fill: lighten($bg, 10);
66
+ background-color: transparent !important;
67
+ }
68
+ }
69
+ &.guestbell-btn--disabled.guestbell-btn--text {
70
+ color: $disabled;
71
+ background-color: transparent;
72
+ box-shadow: none;
73
+ }
74
+ &.guestbell-btn--disabled.guestbell-btn--blank {
75
+ background-color: transparent;
76
+ color: darken($bg, 20%);
77
+ }
78
+ }