├── README.md ├── _gravityforms.scss └── partials ├── _chosen.scss ├── _datepicker.scss ├── _fields-advanced.scss └── _labels-descriptions.scss /README.md: -------------------------------------------------------------------------------- 1 | # Gravity Forms Bootstrap 5 styling 2 | 3 | Gravity Forms SASS styles for use in your Bootstrap enabled WordPress theme. Use together with [Gravity Forms Bootstrap Hooks](https://github.com/basmiddelham/gravityforms-bootstrap-hooks). 4 | 5 | **Contributors:** [Bas Middelham](https://github.com/basmiddelham) 6 | **Requires:** [Gravity Forms Bootstrap 5 Hooks](https://github.com/basmiddelham/gravityforms-bootstrap-hooks), Gravity Forms, Bootstrap 5.3.0-alpha3 7 | **Tested up to:** WordPress 6.2, Gravity Forms 2.7.4 8 | 9 | ## Usage 10 | 11 | Import these styles into your build process. Please use these styles together with [Gravity Forms Bootstrap Hooks](https://github.com/basmiddelham/gravityforms-bootstrap-hooks) for full functionality. 12 | 13 | Test your styling using this Gravity Forms [kitchensink form](https://github.com/basmiddelham/gravityforms-kitchensink). 14 | 15 | Check out the [demo](https://demo.middelham.nl/gravity-forms-bootstrap-5). 16 | 17 | ## License 18 | 19 | MIT License 20 | 21 | Copyright (c) 2023 Bas Middelham 22 | 23 | Permission is hereby granted, free of charge, to any person obtaining a copy 24 | of this software and associated documentation files (the "Software"), to deal 25 | in the Software without restriction, including without limitation the rights 26 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 27 | copies of the Software, and to permit persons to whom the Software is 28 | furnished to do so, subject to the following conditions: 29 | 30 | The above copyright notice and this permission notice shall be included in all 31 | copies or substantial portions of the Software. 32 | 33 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 34 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 35 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 36 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 37 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 38 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 39 | SOFTWARE. 40 | -------------------------------------------------------------------------------- /_gravityforms.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Gravity Forms Bootstrap 5 styling 3 | https://github.com/basmiddelham/gravityforms-bootstrap-styling 4 | 5 | Gravity Forms SASS styles for use in your Bootstrap 5 enabled WordPress theme. 6 | Please use these styles together with gravityforms-bootstrap-hooks for full functionality: 7 | https://github.com/basmiddelham/gravityforms-bootstrap-hooks 8 | */ 9 | 10 | @import "partials/labels-descriptions"; 11 | @import "partials/fields-advanced"; 12 | 13 | // @import "partials/chosen"; 14 | @import "partials/datepicker"; 15 | 16 | .gform_wrapper { 17 | margin-bottom: $spacer; 18 | 19 | p.gform_description, 20 | p.gform_required_legend { 21 | margin-bottom: 0 !important; 22 | } 23 | 24 | /* Hidden. 25 | -------------------------------------------------------------- */ 26 | .gform_validation_container, // anti-spam honeypot 27 | .gform_hidden { 28 | @extend .visually-hidden; 29 | } 30 | 31 | /* Pages. 32 | -------------------------------------------------------------- */ 33 | .gf_page_steps { 34 | width: 100%; 35 | margin-bottom: 0.5rem; 36 | padding-bottom: 0.25rem; 37 | border-bottom: 1px dotted $border-color; 38 | font-size: $font-size-sm; 39 | 40 | .gf_step { 41 | width: auto; 42 | display: inline-block; 43 | margin: 0.5rem 2rem 0.5rem 0; 44 | opacity: 0.6; 45 | 46 | span { 47 | margin: 0 0.125rem; 48 | } 49 | 50 | &.gf_step_active { 51 | opacity: 1; 52 | font-weight: $font-weight-bold; 53 | } 54 | } 55 | } 56 | 57 | /* Validation. 58 | -------------------------------------------------------------- */ 59 | .gfield_required { 60 | color: $danger; 61 | } 62 | 63 | .gform_validation_errors { 64 | @extend .alert; 65 | @extend .alert-warning; 66 | 67 | font-size: $font-size-sm; 68 | 69 | &:focus { 70 | outline: none; 71 | box-shadow: $box-shadow; 72 | } 73 | } 74 | } 75 | 76 | /* Confirmation. 77 | -------------------------------------------------------------- */ 78 | .gform_confirmation_wrapper { 79 | @extend .alert; 80 | @extend .alert-success; 81 | } 82 | -------------------------------------------------------------------------------- /partials/_chosen.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Chosen 3 | https://harvesthq.github.io/chosen/ 4 | https://github.com/harvesthq/chosen/blob/master/sass/chosen.scss 5 | */ 6 | 7 | /* stylelint-disable */ 8 | $chosen-sprite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='37'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23888' d='M48.5 4.5L52 1l-1-1-3.5 3.5L44 0l-1 1 3.5 3.5L43 8l1 1 3.5-3.5L51 9l1-1z'/%3E%3Cpath fill='%23464646' d='M48.5 15.5L52 12l-1-1-3.5 3.5L44 11l-1 1 3.5 3.5L43 19l1 1 3.5-3.5L51 20l1-1z'/%3E%3Cpath fill='%23888' fill-rule='nonzero' d='M41.1 33.7l2.7 2.7c.4.4 1.2.4 1.6 0 .4-.5.4-1.2 0-1.6l-2.7-2.7c1.1-1.8.9-4.2-.7-5.7a4.7 4.7 0 1 0-.9 7.3zm-4.3-6c1-1 2.8-1 3.9 0 1 1 1 2.8 0 4a3 3 0 0 1-4 0 3 3 0 0 1 0-4z'/%3E%3Cpath fill='%23888' d='M2 7h7l-3.5 5zm25 5h-7l3.5-5z'/%3E%3C/g%3E%3C/svg%3E"); 9 | .chosen-container { 10 | position: relative; 11 | display: inline-block; 12 | vertical-align: middle; 13 | // font-size: $font-size-sm; 14 | user-select: none; 15 | width: 100% !important; 16 | z-index: 1010; 17 | * { 18 | box-sizing: border-box; 19 | } 20 | .chosen-drop { 21 | position: absolute; 22 | top: 100%; 23 | width: 100%; 24 | border: var(--bs-border-width) solid var(--bs-border-color); 25 | border-top: 0; 26 | background: #fff; 27 | clip: rect(0, 0, 0, 0); 28 | clip-path: inset(100% 100%); 29 | box-shadow: var(--bs-box-shadow-sm); 30 | } 31 | &.chosen-with-drop .chosen-single { 32 | border-bottom: 0; 33 | } 34 | &.chosen-with-drop .chosen-drop { 35 | clip: auto; 36 | clip-path: none; 37 | } 38 | a { 39 | cursor: pointer; 40 | } 41 | .search-choice, 42 | .chosen-single { 43 | .group-name { 44 | margin-right: 4px; 45 | overflow: hidden; 46 | white-space: nowrap; 47 | text-overflow: ellipsis; 48 | font-weight: normal; 49 | color: #999999; 50 | &:after { 51 | content: ":"; 52 | padding-left: 2px; 53 | vertical-align: top; 54 | } 55 | } 56 | } 57 | } 58 | /* Single Chosen */ 59 | .chosen-container-single { 60 | .chosen-single { 61 | position: relative; 62 | display: block; 63 | overflow: hidden; 64 | padding: 0 0 0 8px; 65 | height: $input-height; 66 | border: var(--bs-border-width) solid var(--bs-border-color); 67 | border-radius: $input-border-radius; 68 | background-color: $input-bg; 69 | background: linear-gradient( 70 | #fff 20%, 71 | #f6f6f6 45%, 72 | #f0f0f0 55%, 73 | #f4f4f4 100% 74 | ); 75 | background-clip: padding-box; 76 | color: $form-select-color; 77 | text-decoration: none; 78 | white-space: nowrap; 79 | line-height: $input-height; 80 | z-index: 1; 81 | } 82 | .chosen-default { 83 | color: #999; 84 | } 85 | .chosen-single span { 86 | display: block; 87 | overflow: hidden; 88 | margin-right: 26px; 89 | text-overflow: ellipsis; 90 | white-space: nowrap; 91 | } 92 | .chosen-single-with-deselect span { 93 | margin-right: 38px; 94 | } 95 | .chosen-single abbr { 96 | position: absolute; 97 | top: 6px; 98 | right: 26px; 99 | display: block; 100 | width: 12px; 101 | height: 12px; 102 | background: $chosen-sprite -42px 1px no-repeat; 103 | font-size: 1px; 104 | &:hover { 105 | background-position: -42px -10px; 106 | } 107 | } 108 | &.chosen-disabled .chosen-single abbr:hover { 109 | background-position: -42px -10px; 110 | } 111 | .chosen-single div { 112 | position: absolute; 113 | top: 0; 114 | right: 0; 115 | display: block; 116 | width: 26px; 117 | height: 100%; 118 | b { 119 | display: block; 120 | width: 100%; 121 | height: 100%; 122 | background-image: $chosen-sprite; 123 | background-position: 4px 6px; 124 | background-repeat: no-repeat; 125 | background-size: 66px; 126 | } 127 | } 128 | .chosen-search { 129 | padding: 6px; 130 | 131 | input[type="text"] { 132 | @extend .form-control; 133 | @extend .form-control-sm; 134 | 135 | background-image: $chosen-sprite; 136 | background-position: 100% -26px; 137 | background-repeat: no-repeat; 138 | background-size: 66px; 139 | } 140 | } 141 | .chosen-drop { 142 | margin-top: -1px; 143 | border-radius: 0 0 4px 4px; 144 | background-clip: padding-box; 145 | } 146 | &.chosen-container-single-nosearch .chosen-search { 147 | position: absolute; 148 | clip: rect(0, 0, 0, 0); 149 | clip-path: inset(100% 100%); 150 | } 151 | } 152 | 153 | /* Results */ 154 | .chosen-container .chosen-results { 155 | color: #444; 156 | position: relative; 157 | overflow-x: hidden; 158 | overflow-y: auto; 159 | margin: 0 4px 4px 0; 160 | padding: 0 0 0 4px; 161 | max-height: 240px; 162 | -webkit-overflow-scrolling: touch; 163 | li { 164 | display: none; 165 | margin: 0; 166 | padding: 5px 6px; 167 | list-style: none; 168 | line-height: 15px; 169 | word-wrap: break-word; 170 | -webkit-touch-callout: none; 171 | &.active-result { 172 | display: list-item; 173 | cursor: pointer; 174 | } 175 | &.disabled-result { 176 | display: list-item; 177 | color: #ccc; 178 | cursor: default; 179 | } 180 | &.highlighted { 181 | background-color: $primary; 182 | background-image: $gradient; 183 | color: #fff; 184 | } 185 | &.no-results { 186 | color: #777; 187 | display: list-item; 188 | background: #f4f4f4; 189 | } 190 | &.group-result { 191 | display: list-item; 192 | font-weight: bold; 193 | cursor: default; 194 | } 195 | &.group-option { 196 | padding-left: 15px; 197 | } 198 | em { 199 | font-style: normal; 200 | text-decoration: underline; 201 | } 202 | } 203 | } 204 | 205 | /* Multi Chosen */ 206 | .chosen-container-multi { 207 | .chosen-choices { 208 | box-shadow: $input-box-shadow; 209 | position: relative; 210 | overflow: hidden; 211 | margin: 0; 212 | padding: 0 5px; 213 | width: 100%; 214 | height: auto; 215 | border: $input-border-width solid $input-border-color; 216 | background-color: $input-bg; 217 | cursor: text; 218 | } 219 | .chosen-choices li { 220 | float: left; 221 | list-style: none; 222 | &.search-field { 223 | margin: 0; 224 | padding: 0; 225 | white-space: nowrap; 226 | input[type="text"] { 227 | padding: 0; 228 | height: $input-height; 229 | outline: 0; 230 | border: 0 !important; 231 | background: transparent !important; 232 | color: #999; 233 | // font-size: $font-size-sm; 234 | width: 25px; 235 | } 236 | } 237 | &.search-choice { 238 | position: relative; 239 | margin: 4px 5px 0 0; 240 | padding: 3px 20px 3px 5px; 241 | border: 1px solid $gray-500; 242 | max-width: 100%; 243 | border-radius: 3px; 244 | background-color: $gray-200; 245 | background-image: $gradient; 246 | box-shadow: $box-shadow-sm; 247 | color: $gray-700; 248 | line-height: $line-height-sm; 249 | cursor: default; 250 | span { 251 | word-wrap: break-word; 252 | } 253 | .search-choice-close { 254 | position: absolute; 255 | top: 6px; 256 | right: 3px; 257 | display: block; 258 | width: 12px; 259 | height: 12px; 260 | background: $chosen-sprite -42px 1px no-repeat; 261 | font-size: 1px; 262 | &:hover { 263 | background-position: -42px -10px; 264 | } 265 | } 266 | } 267 | &.search-choice-disabled { 268 | padding-right: 5px; 269 | border: 1px solid #ccc; 270 | background-color: #e4e4e4; 271 | background-image: linear-gradient( 272 | #f4f4f4 20%, 273 | #f0f0f0 50%, 274 | #e8e8e8 52%, 275 | #eee 100% 276 | ); 277 | color: #666; 278 | } 279 | &.search-choice-focus { 280 | background: #d4d4d4; 281 | .search-choice-close { 282 | background-position: -42px -10px; 283 | } 284 | } 285 | } 286 | .chosen-results { 287 | margin: 0; 288 | padding: 0; 289 | } 290 | .chosen-drop .result-selected { 291 | display: list-item; 292 | color: #ccc; 293 | cursor: default; 294 | } 295 | } 296 | /* Active */ 297 | .chosen-container-active { 298 | .chosen-single { 299 | border: $input-border-width solid $input-border-color; 300 | } 301 | &.chosen-with-drop { 302 | .chosen-single { 303 | background-image: linear-gradient(#eee 20%, #fff 80%); 304 | } 305 | .chosen-single div { 306 | b { 307 | background-position: -18px 6px; 308 | } 309 | } 310 | } 311 | .chosen-choices { 312 | border: $input-border-width solid $input-focus-border-color; 313 | box-shadow: $input-focus-box-shadow; 314 | li.search-field input[type="text"] { 315 | color: #222 !important; 316 | } 317 | } 318 | } 319 | /* Disabled Support */ 320 | .chosen-disabled { 321 | opacity: 0.5 !important; 322 | cursor: default; 323 | .chosen-single { 324 | cursor: default; 325 | } 326 | .chosen-choices .search-choice .search-choice-close { 327 | cursor: default; 328 | } 329 | } 330 | /* Right to Left */ 331 | .chosen-rtl { 332 | text-align: right; 333 | .chosen-single { 334 | overflow: visible; 335 | padding: 0 8px 0 0; 336 | } 337 | .chosen-single span { 338 | margin-right: 0; 339 | margin-left: 26px; 340 | direction: rtl; 341 | } 342 | .chosen-single-with-deselect span { 343 | margin-left: 38px; 344 | } 345 | .chosen-single div { 346 | right: auto; 347 | left: 3px; 348 | } 349 | .chosen-single abbr { 350 | right: auto; 351 | left: 26px; 352 | } 353 | .chosen-choices li { 354 | float: right; 355 | &.search-field input[type="text"] { 356 | direction: rtl; 357 | } 358 | &.search-choice { 359 | margin: 3px 5px 3px 0; 360 | padding: 3px 5px 3px 19px; 361 | .search-choice-close { 362 | right: auto; 363 | left: 4px; 364 | } 365 | } 366 | } 367 | &.chosen-container-single .chosen-results { 368 | margin: 0 0 4px 4px; 369 | padding: 0 4px 0 0; 370 | } 371 | .chosen-results li.group-option { 372 | padding-right: 15px; 373 | padding-left: 0; 374 | } 375 | &.chosen-container-active.chosen-with-drop .chosen-single div { 376 | border-right: none; 377 | } 378 | .chosen-search input[type="text"] { 379 | background: $chosen-sprite no-repeat -30px -20px; 380 | direction: rtl; 381 | } 382 | &.chosen-container-single { 383 | .chosen-single div b { 384 | background-position: 6px 2px; 385 | } 386 | &.chosen-with-drop { 387 | .chosen-single div b { 388 | background-position: -12px 2px; 389 | } 390 | } 391 | } 392 | } 393 | -------------------------------------------------------------------------------- /partials/_datepicker.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Datepicker 3 | */ 4 | 5 | /* stylelint-disable */ 6 | .ui-datepicker-prev { 7 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='square' d='M10 0L1 9l9 9'/%3E%3C/svg%3E"); 8 | } 9 | 10 | .ui-datepicker-next { 11 | order: 1; 12 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='square' d='M1 0l9 9-9 9'/%3E%3C/svg%3E"); 13 | } 14 | 15 | .gform-theme-datepicker:not(.gform-legacy-datepicker) { 16 | background: #fff; 17 | border: 1px solid #d0d1d3; 18 | border-radius: 3px; 19 | box-shadow: 0 1px 4px #0000001c, 0 0 4px #1219610a; 20 | color: #607382; 21 | font-size: 13px; 22 | font-weight: 500; 23 | margin-top: 5px; 24 | padding: 18px 15px; 25 | width: auto; 26 | } 27 | 28 | .gform-theme-datepicker:not(.gform-legacy-datepicker) table, 29 | .gform-theme-datepicker:not(.gform-legacy-datepicker) thead, 30 | .gform-theme-datepicker:not(.gform-legacy-datepicker) tr, 31 | .gform-theme-datepicker:not(.gform-legacy-datepicker) td, 32 | .gform-theme-datepicker:not(.gform-legacy-datepicker) th { 33 | background: none; 34 | border: 0; 35 | margin: 0; 36 | } 37 | 38 | .gform-theme-datepicker:not(.gform-legacy-datepicker) td, 39 | .gform-theme-datepicker:not(.gform-legacy-datepicker) th { 40 | padding: 5px; 41 | text-shadow: none; 42 | text-transform: none; 43 | } 44 | 45 | .gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-header { 46 | border: 0; 47 | display: flex; 48 | flex-direction: row; 49 | justify-content: space-around; 50 | align-items: center; 51 | margin: 0 0 5px; 52 | padding: 0; 53 | position: relative; 54 | width: 100%; 55 | } 56 | 57 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 58 | .ui-datepicker-header 59 | .ui-datepicker-prev, 60 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 61 | .ui-datepicker-header 62 | .ui-datepicker-next { 63 | background-size: contain; 64 | width: 11px; 65 | height: 18px; 66 | cursor: pointer; 67 | } 68 | 69 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 70 | .ui-datepicker-header 71 | .ui-datepicker-month, 72 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 73 | .ui-datepicker-header 74 | .ui-datepicker-year { 75 | @extend .form-select; 76 | @extend .form-select-sm; 77 | 78 | text-align: left; 79 | margin: 0 0.25rem; 80 | } 81 | 82 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 83 | .ui-datepicker-header 84 | .ui-datepicker-prev:focus, 85 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 86 | .ui-datepicker-header 87 | .ui-datepicker-prev:hover, 88 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 89 | .ui-datepicker-header 90 | .ui-datepicker-next:focus, 91 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 92 | .ui-datepicker-header 93 | .ui-datepicker-next:hover { 94 | color: #2f4054; 95 | } 96 | 97 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 98 | .ui-datepicker-header 99 | .ui-datepicker-prev 100 | .ui-icon, 101 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 102 | .ui-datepicker-header 103 | .ui-datepicker-next 104 | .ui-icon { 105 | display: none; 106 | } 107 | 108 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 109 | .ui-datepicker-header 110 | .ui-datepicker-prev::before, 111 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 112 | .ui-datepicker-header 113 | .ui-datepicker-next::before { 114 | border: 0; 115 | height: auto; 116 | position: static; 117 | transform: none; 118 | width: auto; 119 | } 120 | 121 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 122 | .ui-datepicker-header 123 | .ui-datepicker-title { 124 | display: flex; 125 | } 126 | 127 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 128 | .ui-datepicker-header 129 | .ui-datepicker-prev { 130 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='square' d='M10 0L1 9l9 9'/%3E%3C/svg%3E"); 131 | left: 0; 132 | } 133 | 134 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 135 | .ui-datepicker-header 136 | .ui-datepicker-next { 137 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='square' d='M1 0l9 9-9 9'/%3E%3C/svg%3E"); 138 | right: 0; 139 | } 140 | 141 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 142 | .ui-datepicker-calendar 143 | span, 144 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 145 | .ui-datepicker-calendar 146 | a { 147 | font-weight: 400; 148 | } 149 | 150 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 151 | .ui-datepicker-calendar 152 | th 153 | span { 154 | align-items: center; 155 | color: #2f4054; 156 | display: flex; 157 | font-size: 13px; 158 | font-weight: 500; 159 | height: 40px; 160 | justify-content: center; 161 | width: 40px; 162 | } 163 | 164 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 165 | .ui-datepicker-calendar 166 | td { 167 | font-size: 13px; 168 | height: 50px; 169 | width: 50px; 170 | } 171 | 172 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 173 | .ui-datepicker-calendar 174 | .ui-state-default { 175 | align-items: center; 176 | background: none; 177 | border: 1px solid transparent; 178 | border-radius: 100%; 179 | box-shadow: none; 180 | color: #2f4054; 181 | display: flex; 182 | height: 40px; 183 | justify-content: center; 184 | transition: color 300ms ease-in-out, background-color 300ms ease-in-out, 185 | border-color 300ms ease-in-out; 186 | text-decoration: none; 187 | width: 40px; 188 | } 189 | 190 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 191 | .ui-datepicker-calendar 192 | .ui-state-default:hover, 193 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 194 | .ui-datepicker-calendar 195 | .ui-state-default:focus { 196 | background: none; 197 | border-color: #607382; 198 | outline: none; 199 | } 200 | 201 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 202 | .ui-datepicker-calendar 203 | .ui-state-default:active { 204 | background: #f2f3f5; 205 | border-color: #607382; 206 | } 207 | 208 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 209 | .ui-datepicker-calendar 210 | .ui-datepicker-current-day 211 | .ui-state-default { 212 | background: #607382; 213 | border-color: #607382; 214 | box-shadow: 0 2px 2px rgba(58, 58, 87, 0.0596411); 215 | color: #ffffff; 216 | } 217 | 218 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 219 | .ui-datepicker-calendar 220 | .ui-datepicker-current-day 221 | .ui-state-default:hover, 222 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 223 | .ui-datepicker-calendar 224 | .ui-datepicker-current-day 225 | .ui-state-default:focus { 226 | border-color: #607382; 227 | } 228 | 229 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 230 | .ui-datepicker-calendar 231 | .ui-state-disabled { 232 | background: none; 233 | } 234 | 235 | .gform-theme-datepicker:not(.gform-legacy-datepicker) 236 | .ui-datepicker-calendar 237 | .ui-state-disabled 238 | .ui-state-default { 239 | align-items: center; 240 | background: #f2f3f5; 241 | border: 1px solid rgba(32, 32, 46, 0.079); 242 | border-radius: 100%; 243 | box-shadow: 0 2px 2px rgba(58, 58, 87, 0.0596411); 244 | color: #686e77; 245 | cursor: text; 246 | display: flex; 247 | height: 40px; 248 | justify-content: center; 249 | text-decoration: none; 250 | width: 40px; 251 | } 252 | 253 | html[dir="rtl"] #ui-datepicker-div.gform-theme-datepicker[style] { 254 | right: auto !important; 255 | } 256 | -------------------------------------------------------------------------------- /partials/_fields-advanced.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Advanced Fields. 3 | */ 4 | 5 | .gform_wrapper { 6 | /* Name fields. */ 7 | .ginput_complex { 8 | &.ginput_container_name { 9 | .name_prefix, 10 | .name_suffix { 11 | flex-grow: 0.5; 12 | } 13 | } 14 | } 15 | 16 | /* Date- & Timefields. */ 17 | .ginput_container_date { 18 | img.ui-datepicker-trigger { 19 | display: none; 20 | } 21 | 22 | input.datepicker { 23 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' version='1'%3E%3Cpath fill='%23999' d='M15 6V3h-2v1a1 1 0 1 1-2 0V3H5v1a1 1 0 1 1-2 0V3H1v3h14zm0 1H1v8h14V7zm-2-5h2l1 1v12l-1 1H1l-1-1V3l1-1h2V1a1 1 0 1 1 2 0v1h6V1a1 1 0 1 1 2 0v1z'/%3E%3C/svg%3E"); 24 | background-repeat: no-repeat; 25 | background-position: calc(100% - 0.75em) center; 26 | 27 | &.datepicker_no_icon { 28 | background-image: none; 29 | } 30 | } 31 | } 32 | 33 | /* Lists. */ 34 | .ginput_list { 35 | .gfield_header_item--icons, 36 | .gfield_list_icons { 37 | width: 48px; 38 | } 39 | 40 | // Mobile. 41 | @include media-breakpoint-down(sm) { 42 | .gfield_list_header { 43 | display: none; 44 | } 45 | 46 | .gfield_list_group { 47 | border: 1px solid $border-color; 48 | padding: 8px; 49 | 50 | .gfield_list_group_item { 51 | &::before { 52 | content: attr(data-label); 53 | font-size: $font-size-sm; 54 | } 55 | } 56 | 57 | .gfield_list_icons { 58 | background-color: $gray-200; 59 | margin: 0 -8px -8px; 60 | padding: 12px 8px 8px; 61 | box-sizing: content-box; 62 | width: 100%; 63 | 64 | button { 65 | width: 20px; 66 | height: 20px; 67 | 68 | &.delete_list_item { 69 | margin-left: 0.5rem; 70 | } 71 | } 72 | } 73 | } 74 | } 75 | 76 | // Icons. 77 | .gfield_list_icons { 78 | display: flex; 79 | align-items: center; 80 | justify-content: center; 81 | 82 | button { 83 | font-size: 0; 84 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-444 448 256 256'%3E%3Cpath d='M-316 448a128 128 0 1 0 0 256 128 128 0 0 0 0-256zm0 224a96 96 0 1 1 0-192 96 96 0 0 1 0 192z'/%3E%3Cpath d='M-332 512v48h-48v32h48v48h32v-48h48v-32h-48v-48z'/%3E%3C/svg%3E"); 85 | border: none; 86 | width: 16px; 87 | height: 16px; 88 | opacity: 0.5; 89 | padding: 0; 90 | transition: opacity 0.5s ease-out; 91 | 92 | &.delete_list_item { 93 | margin-left: 5px; 94 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-139 51 512 512'%3E%3Cpath d='M117 51a256 256 0 1 0 0 512 256 256 0 0 0 0-512zm0 448a192 192 0 1 1 0-384 192 192 0 0 1 0 384zM-11 339h256v-64H-11v64z'/%3E%3C/svg%3E"); 95 | } 96 | } 97 | } 98 | } 99 | 100 | /* File Upload. */ 101 | .gfield--type-fileupload { 102 | .validation_message--hidden-on-empty:empty { 103 | display: none !important; 104 | } 105 | 106 | .gfield_validation_message, 107 | .ginput_preview { 108 | @extend .alert; 109 | @extend .p-1; 110 | @extend .mt-2; 111 | @extend .mb-0; 112 | 113 | font-size: $font-size-sm; 114 | } 115 | 116 | .gfield_validation_message { 117 | @extend .alert-warning; 118 | } 119 | 120 | .ginput_preview { 121 | @extend .alert-light; 122 | 123 | > *:not(:last-child) { 124 | margin-right: 0.5em; 125 | } 126 | 127 | .gform_delete_file { 128 | background-color: transparent; 129 | color: $primary; 130 | padding: 0; 131 | border: none; 132 | float: right; 133 | } 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /partials/_labels-descriptions.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Labels & Descriptions 3 | */ 4 | 5 | .gform_wrapper { 6 | /* Description below. */ 7 | .field_description_below .gfield_description, // Description. 8 | .field_sublabel_below label.gform-field-label--type-sub { 9 | // Sub-label. 10 | margin-top: $form-label-margin-bottom; 11 | } 12 | 13 | /* Description above. */ 14 | .field_description_above .gfield_description, // Description. 15 | .field_sublabel_above label.gform-field-label--type-sub { 16 | // Sub-label. 17 | margin-bottom: $form-label-margin-bottom; 18 | } 19 | 20 | /* Labels left/right setting. */ 21 | .right_label { 22 | .gfield_label { 23 | text-align: right; 24 | } 25 | } 26 | 27 | .gform_fields:not(.top_label) .gfield { 28 | > .gfield_label { 29 | float: left; 30 | width: 25%; 31 | } 32 | 33 | > .ginput_container, 34 | > .gfield_description { 35 | width: 73%; 36 | margin-left: 27%; 37 | clear: none; 38 | } 39 | } 40 | 41 | .gform_footer { 42 | &.right_label, 43 | &.left_label { 44 | width: 73%; 45 | margin-left: 27%; 46 | } 47 | } 48 | } 49 | --------------------------------------------------------------------------------