eSales Media Git repositories
Browse code

Update

Benjamin Roth authored on24/03/2023 16:12:06
Showing1 changed files
files/base/layout/css/scaffolding/forms.scss
History View file @1936931
... ... 
@@ -128,6 +128,13 @@ form {
128 128 
         padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
129 129 
       }
130 130
131 
+      option[value=""][disabled] {
132 
+        display: none;
133 
+      }
134 
+      select:invalid {
135 
+        color: rgba(var(--bs-placeholder-color)) !important;
136 
+      }
137 
+
131 138 
       label + .select-wrapper {
132 139 
         &:after {
133 140 
           margin-top: 11px; //@INFO Label-height / 2
... ... 
@@ -143,6 +150,7 @@ form {
143 150 
           &:after {
144 151 
             display: inline-block;
145 152 
             position: absolute;
153 
+            pointer-events: none;
146 154
147 155 
             @extend %fa-icon;
148 156 
             @extend .fas;
Browse code

Update

Benjamin Roth authored on17/03/2023 09:52:56
Showing1 changed files
files/base/layout/css/scaffolding/forms.scss
History View file @7812883
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,256 @@
1 
+::placeholder {
2 
+  color: rgba(var(--bs-placeholder-color)) !important;
3 
+  opacity: 1; /* Firefox */
4 
+}
5 
+
6 
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
7 
+  color: rgba(var(--bs-placeholder-color)) !important;
8 
+}
9 
+
10 
+::-ms-input-placeholder { /* Microsoft Edge */
11 
+  color: rgba(var(--bs-placeholder-color)) !important;
12 
+}
13 
+
14 
+
15 
+form {
16 
+  min-width: 100%;
17 
+  //opacity: 0;
18 
+
19 
+  fieldset {
20 
+
21 
+    legend {
22 
+      margin-top: 1.5rem;
23 
+      @extend .h2;
24 
+      margin-bottom: 0px !important;
25 
+    }
26 
+
27 
+    &:not(.row):not([class*="col-"]) + fieldset:not(.row):not([class*="col-"]) {
28 
+      margin-top: 1.5rem !important;
29 
+    }
30 
+  }
31 
+
32 
+  > *:not(form):first-child:not(.formbody) {
33 
+    margin-bottom: 2rem;
34 
+  }
35 
+
36 
+  .form-check-input:checked {
37 
+    background-color: var(--bs-primary);
38 
+    border-color: var(--bs-primary);
39 
+  }
40 
+
41 
+
42 
+  .widget {
43 
+    transition: opacity .15s ease-in-out;
44 
+
45 
+    > label:first-child {
46 
+      padding: 2px 0.75rem 2px 0.75rem;
47 
+      border-radius: var(--bs-input-border-radius) var(--bs-input-border-radius) 0px 0px;
48 
+      background-color: var(--bs-primary);
49 
+      color: var(--bs-body-color-inverse);
50 
+      @include font-size(14px);
51 
+
52 
+      & + * {
53 
+        border-radius: 0px var(--bs-input-border-radius) var(--bs-input-border-radius) var(--bs-input-border-radius);
54 
+      }
55 
+    }
56 
+
57 
+
58 
+    .form-label {
59 
+      margin-bottom: 0px;
60 
+    }
61 
+
62 
+    .form-control {
63 
+      padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
64 
+      border-radius: var(--bs-input-border-radius);
65 
+      border: var(--bs-input-border);
66 
+      box-shadow: var(--bs-input-shadow);
67 
+      color: var(--bs-input-color);
68 
+    }
69 
+
70 
+    label + input:not(.form-control) {
71 
+      border-top-left-radius: 0px !important;
72 
+    }
73 
+
74 
+    input:not(.form-control) {
75 
+      &[type="text"],
76 
+      &[type="search"],
77 
+      &[type="email"],
78 
+      &[type="tel"],
79 
+      &[type="password"] {
80 
+        @extend .form-control;
81 
+      }
82 
+    }
83 
+
84 
+    select:not(.form-control) {
85 
+      @extend .form-control;
86 
+    }
87 
+
88 
+    .form-control[type=file] {
89 
+      padding-top: 0px;
90 
+      padding-bottom: 0px;
91 
+      line-height: rfs-value(50px);
92 
+    }
93 
+
94 
+    &.error {
95 
+      color: $danger;
96 
+
97 
+      > input,
98 
+      > textarea {
99 
+        border-bottom-right-radius: 0px;
100 
+        border-bottom-left-radius: 0px;
101 
+      }
102 
+
103 
+      label {
104 
+        color: $danger;
105 
+      }
106 
+    }
107 
+
108 
+    &.widget-textarea {
109 
+      textarea {
110 
+        min-height: 100px;
111 
+      }
112 
+    }
113 
+
114 
+    &.widget-checkbox,
115 
+    &.widget-radio {
116 
+      p.error {
117 
+        padding-left: rfs-value(30px);
118 
+        background-color: transparent;
119 
+        color: $danger;
120 
+        font-weight: $font-weight-bold;
121 
+      }
122 
+    }
123 
+
124 
+    &.widget-select {
125 
+      position: relative;
126 
+
127 
+      select {
128 
+        padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
129 
+      }
130 
+
131 
+      label + .select-wrapper {
132 
+        &:after {
133 
+          margin-top: 11px; //@INFO Label-height / 2
134 
+        }
135 
+
136 
+        > select {
137 
+          border-radius: 0px var(--bs-input-border-radius) var(--bs-input-border-radius) var(--bs-input-border-radius);
138 
+        }
139 
+      }
140 
+
141 
+      &:not(.multiselect) {
142 
+        .select-wrapper {
143 
+          &:after {
144 
+            display: inline-block;
145 
+            position: absolute;
146 
+
147 
+            @extend %fa-icon;
148 
+            @extend .fas;
149 
+            content: fa-content($fa-var-chevron-down);
150 
+            color: rgba(var(--bs-placeholder-color));
151 
+            padding-right: var(--bs-gutter-x);
152 
+            padding-top: var(--bs-gutter-y);
153 
+            font-size: 1.25rem;
154 
+            top: 50%;
155 
+            right: 15px;
156 
+            transform: translate(0%, -50%);
157 
+          }
158 
+        }
159 
+      }
160 
+
161 
+    }
162 
+
163 
+    &.widget-submit {
164 
+      text-align: right;
165 
+
166 
+      button {
167 
+        //@extend .btn, .btn-primary;
168 
+      }
169 
+    }
170 
+
171 
+    .captcha_text {
172 
+      margin-bottom: 5px;
173 
+    }
174 
+
175 
+    p.error {
176 
+      border-radius: 0px 0px var(--bs-input-border-radius) var(--bs-input-border-radius);
177 
+      margin-bottom: 0px;
178 
+      @include padding(5px 0.75rem);
179 
+      @include font-size(14px);
180 
+      color: var(--bs-body-color-inverse);
181 
+      background-color: $danger;
182 
+    }
183 
+  }
184 
+
185 
+
186 
+  // Floating Labels
187 
+  .form-floating {
188 
+
189 
+    ::placeholder {
190 
+      color: transparent !important;
191 
+      opacity: 1; /* Firefox */
192 
+    }
193 
+
194 
+    :-ms-input-placeholder { /* Internet Explorer 10-11 */
195 
+      color: transparent !important;
196 
+    }
197 
+
198 
+    ::-ms-input-placeholder { /* Microsoft Edge */
199 
+      color: transparent !important;
200 
+    }
201 
+
202 
+
203 
+    label {
204 
+      z-index: 5;
205 
+      color: rgba(var(--bs-placeholder-color));
206 
+      padding-left: 1.25rem;
207 
+      line-height: 1;
208 
+      padding-top: 2.2rem;
209 
+      padding-bottom: 0px;
210 
+      //line-height: 1.2;
211 
+      //margin-left: calc(var(--bs-gutter-x) / 2);
212 
+    }
213 
+
214 
+    input[type="text"],
215 
+    input[type="search"],
216 
+    input[type="email"],
217 
+    input[type="tel"],
218 
+    input[type="password"],
219 
+    select,
220 
+    &.widget-captcha > input {
221 
+      min-height: rfs-value(58px);
222 
+    }
223 
+
224 
+    .form-select {
225 
+      line-height: rfs-value(44px);
226 
+    }
227 
+  }
228 
+
229 
+
230 
+  .input-group {
231 
+    &.form-floating {
232 
+      label {
233 
+        padding: 0 0.75rem;
234 
+        line-height: 52px;
235 
+      }
236 
+    }
237 
+
238 
+    .input-group-append {
239 
+      > .btn {
240 
+        height: 100%;
241 
+        min-width: rfs-value(50px);
242 
+        border-top-left-radius: 0px;
243 
+        border-bottom-left-radius: 0px;
244 
+      }
245 
+    }
246 
+
247 
+    .input-group-prepend {
248 
+      > .btn {
249 
+        height: 100%;
250 
+        min-width: rfs-value(50px);
251 
+        border-top-right-radius: 0px;
252 
+        border-bottom-right-radius: 0px;
253 
+      }
254 
+    }
255 
+  }
256 
+}