@agorapulse/ui-theme 16.1.2 → 16.1.3

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.
Binary file
@@ -273,6 +273,7 @@ $color-linkedin: #2c67bc;
273
273
  $color-twitter: #55acee;
274
274
  $color-youtube: #ff0000;
275
275
  $color-instagramlink: #00376b;
276
+ $color-web: #178DFE;
276
277
 
277
278
  // Others
278
279
  //$state-tag: #5EA9FF;
@@ -1,5 +1,3 @@
1
- @import '../variables';
2
-
3
1
  textarea,
4
2
  select,
5
3
  input,
@@ -23,34 +21,34 @@ form.full-width {
23
21
 
24
22
  input,
25
23
  textarea {
26
- border: 1px solid $form-input-default-border-color;
27
- border-radius: $border-radius;
28
- color: $form-control-selected-font-color;
29
- font-family: $font-family;
30
- font-size: $font-size;
31
- font-weight: $font-weight;
32
- padding: $padding-s $padding-m;
24
+ border: 1px solid var(--comp-input-border-default-color);
25
+ border-radius: var(--comp-input-border-radius);
26
+ color: var(--comp-input-text-default-color);
27
+ font-family: var(--comp-input-text-font-family);
28
+ font-size: var(--comp-input-text-size);
29
+ font-weight: var(--comp-input-text-font-weight);
30
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
31
+
33
32
  &::placeholder {
34
- color: $form-input-placeholder-font-color;
33
+ color: var(--comp-input-text-placeholder-color);
35
34
  }
36
35
  // Disabled
37
36
  &:disabled {
38
- background: $form-input-disabled-background-color;
39
- border-color: $form-control-disabled-border-color;
40
- color: $form-input-placeholder-font-color;
37
+ background-color: var(--comp-input-fill-disabled-color);
38
+ color: var(--comp-input-border-disabled-color);
41
39
  }
42
40
  // Focus
43
41
  &:focus:not(.transparent) {
44
- border-color: $form-control-selected-border-color;
42
+ border-color: var(--comp-input-border-focused-color);
45
43
  }
46
44
  // Invalid
47
45
  &.invalid:not([disabled]):not(.transparent),
48
46
  &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) {
49
- border: 1px solid $color-error;
47
+ border: 1px solid var(--comp-input-border-error-color);
50
48
  }
51
49
  // Valid
52
50
  &.valid:not([disabled]):not(.transparent) {
53
- border: 1px solid $color-success;
51
+ border: 1px solid var(--comp-input-border-success-color);
54
52
  }
55
53
 
56
54
  // Transparent
@@ -65,7 +63,7 @@ textarea {
65
63
 
66
64
  // Hover
67
65
  &:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover {
68
- border-color: $form-input-hover-border-color;
66
+ border-color: var(--comp-input-border-hover-color);
69
67
  }
70
68
  }
71
69
 
@@ -73,12 +71,12 @@ textarea {
73
71
  display: flex;
74
72
  flex-direction: row;
75
73
  width: 180px;
76
- color: map_get($colors-grey, 100);
77
- border-radius: $border-radius;
74
+ color: var(--comp-input-text-default-color);
75
+ border-radius: var(--comp-input-border-radius);
78
76
 
79
77
  input {
80
78
  box-sizing: border-box;
81
- padding: $padding-s $padding-xl $padding-s $padding-m;
79
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-lg) var(--ref-spacing-xxs) var(--ref-spacing-sm);
82
80
  width: 100%;
83
81
  }
84
82
 
@@ -88,21 +86,16 @@ textarea {
88
86
  right: 26px;
89
87
  height: 15px;
90
88
  width: 0;
91
- color: map_get($colors-grey, 60);
89
+ color: var(--comp-input-icon-color);
92
90
  }
93
91
 
94
92
  input:focus + .input-group-append {
95
- color: map_get($colors-electric-blue, 100);
93
+ color: var(--comp-input-border-focused-color);
96
94
  }
97
95
 
98
96
  &.disabled {
99
- color: map_get($colors-grey, 20);
100
- background: map_get($colors-grey, 5);
101
-
102
- .input-group-append {
103
- background: map_get($colors-grey, 5);
104
- color: map_get($colors-grey, 20);
105
- }
97
+ background-color: var(--comp-input-fill-disabled-color);
98
+ color: var(--comp-input-border-disabled-color);
106
99
  }
107
100
 
108
101
  &.full-width {
@@ -116,7 +109,7 @@ form.submitted {
116
109
  textarea {
117
110
  // Invalid
118
111
  &.ng-invalid:not([disabled]):not(.transparent) {
119
- border: 1px solid $color-error;
112
+ border: 1px solid var(--comp-input-border-error-color);
120
113
  }
121
114
  }
122
115
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "16.1.2",
3
+ "version": "16.1.3",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
Binary file