bourbon
1 year ago
code-mirror
1 year ago
components
4 weeks ago
jquery-confirm
8 years ago
jquery-ui
8 years ago
mixins
5 years ago
perfect-scrollbar
7 years ago
utility
5 years ago
variables
1 year ago
_animation.scss
6 years ago
_backbone.scss
6 years ago
_clearings.scss
6 years ago
_colors.scss
5 years ago
_confirm.scss
2 months ago
_containers.scss
5 years ago
_fonts.scss
5 years ago
_grid.scss
4 months ago
_sprite.scss
2 years ago
_variables.scss
1 year ago
activation-rtl.css
1 year ago
activation.css
5 months ago
activation.css.map
5 years ago
activation.scss
3 years ago
admin-rtl.css
4 weeks ago
admin.css
4 weeks ago
admin.css.map
4 years ago
admin.scss
4 weeks ago
customize-admin-rtl.css
4 weeks ago
customize-admin.css
4 weeks ago
customize-admin.scss
4 weeks ago
customize-controls-rtl.css
4 months ago
customize-controls.css
4 months ago
customize-controls.scss
4 months ago
deactivation-feedback-rtl.css
1 year ago
deactivation-feedback.css
5 months ago
deactivation-feedback.scss
3 years ago
everest-forms-default-frontend-rtl.css
2 months ago
everest-forms-default-frontend.css
2 months ago
everest-forms-default-frontend.scss
2 months ago
everest-forms-rtl.css
2 months ago
everest-forms.css
2 months ago
everest-forms.css.map
4 years ago
everest-forms.scss
2 months ago
evf-form-preview-rtl.css
2 months ago
evf-form-preview.css
2 months ago
evf-form-preview.scss
2 months ago
evf-locked-fields-rtl.css
4 weeks ago
evf-locked-fields.css
4 weeks ago
evf-locked-fields.scss
4 weeks ago
flatpickr-rtl.css
4 years ago
flatpickr.css
5 months ago
flatpickr.css.map
5 years ago
flatpickr.scss
6 years ago
intlTelInput-rtl.css
1 year ago
intlTelInput.css
5 months ago
intlTelInput.scss
2 years ago
menu-rtl.css
4 weeks ago
menu.css
4 weeks ago
menu.css.map
5 years ago
menu.scss
4 weeks ago
select2-rtl.css
4 years ago
select2.css
5 months ago
select2.css.map
5 years ago
select2.scss
2 years ago
intlTelInput.scss
393 lines
| 1 | // NOTE: by using !default on all variables, we're saying only declare the variable if it doesn't |
| 2 | // already exist, which allows devs to declare these variables themselves and assign them any value |
| 3 | // they want before importing this file |
| 4 | |
| 5 | // rgba is needed for the selected flag hover state to blend in with |
| 6 | // the border-highlighting some browsers give the input on focus |
| 7 | $hoverColor: rgba(0, 0, 0, 0.05) !default; |
| 8 | $greyText: #999 !default; |
| 9 | $greyBorder: #ccc !default; |
| 10 | |
| 11 | $flagHeight: 15px !default; |
| 12 | $flagWidth: 20px !default; |
| 13 | $flagPadding: 8px !default; |
| 14 | // this border width is used for the popup and divider, but it is also |
| 15 | // assumed to be the border width of the input, which we do not control |
| 16 | $borderWidth: 1px !default; |
| 17 | |
| 18 | $arrowHeight: 4px !default; |
| 19 | $arrowWidth: 6px !default; |
| 20 | $triangleBorder: 3px !default; |
| 21 | $arrowPadding: 6px !default; |
| 22 | $arrowColor: #555 !default; |
| 23 | |
| 24 | $inputPadding: 6px !default; |
| 25 | $selectedFlagWidth: $flagWidth + (2 * $flagPadding) !default; |
| 26 | $selectedFlagArrowWidth: $flagWidth + $flagPadding + $arrowWidth + (2 * $arrowPadding) !default; |
| 27 | |
| 28 | // image related variables |
| 29 | $flagsImagePath: '../images/' !default; |
| 30 | $flagsImageName: 'intl-tel-input-flags' !default; |
| 31 | $flagsImageExtension: 'png' !default; |
| 32 | |
| 33 | // enough space for them to click off to close |
| 34 | $mobilePopupMargin: 30px !default; |
| 35 | |
| 36 | body, |
| 37 | div.evf-container .everest-form { |
| 38 | |
| 39 | .iti { |
| 40 | // need position on the container so the selected flag can be |
| 41 | // absolutely positioned over the input |
| 42 | position: relative; |
| 43 | // keep the input's default inline properties |
| 44 | display: inline-block; |
| 45 | |
| 46 | // paul irish says this is ok |
| 47 | // http://www.paulirish.com/2012/box-sizing-border-box-ftw/ |
| 48 | * { |
| 49 | box-sizing: border-box; |
| 50 | -moz-box-sizing: border-box; |
| 51 | } |
| 52 | |
| 53 | &__hide { |
| 54 | display: none; |
| 55 | } |
| 56 | // need this during init, to get the height of the dropdown |
| 57 | &__v-hide { |
| 58 | visibility: hidden; |
| 59 | } |
| 60 | |
| 61 | // specify types to increase specificity e.g. to override bootstrap v2.3 |
| 62 | input, |
| 63 | input[type='text']='text'], |
| 64 | input[type='tel']='tel'] { |
| 65 | position: relative; |
| 66 | // input is bottom level, below selected flag and dropdown |
| 67 | z-index: 0; |
| 68 | |
| 69 | // any vertical margin the user has on their inputs would no longer work as expected |
| 70 | // because we wrap everything in a container div. i justify the use of !important |
| 71 | // here because i don't think the user should ever have vertical margin here - when |
| 72 | // the input is wrapped in a container, vertical margin messes up alignment with other |
| 73 | // inline elements (e.g. an adjacent button) in firefox, and probably other browsers. |
| 74 | margin-top: 0 !important; |
| 75 | margin-bottom: 0 !important; |
| 76 | |
| 77 | // make space for the selected flag on right of input (if disabled allowDropdown) |
| 78 | // Note: no !important here, as the user may want to tweak this so that the |
| 79 | // perceived input padding matches their existing styles |
| 80 | padding-right: $selectedFlagWidth; |
| 81 | |
| 82 | // any margin-right here will push the selected-flag away |
| 83 | margin-right: 0; |
| 84 | } |
| 85 | |
| 86 | &__flag-container { |
| 87 | // positioned over the top of the input |
| 88 | position: absolute; |
| 89 | // full height |
| 90 | top: 0; |
| 91 | bottom: 0; |
| 92 | right: 0; |
| 93 | // prevent the highlighted child from overlapping the input border |
| 94 | padding: $borderWidth; |
| 95 | } |
| 96 | |
| 97 | &__selected-flag { |
| 98 | // render above the input |
| 99 | z-index: 1; |
| 100 | outline: none; |
| 101 | position: relative; |
| 102 | display: flex; |
| 103 | align-items: center; |
| 104 | // this must be full-height both for the hover highlight, and to push down the |
| 105 | // dropdown so it appears below the input |
| 106 | height: 100%; |
| 107 | padding: 0 $arrowPadding 0 $flagPadding; |
| 108 | } |
| 109 | |
| 110 | &__arrow { |
| 111 | margin-left: $arrowPadding; |
| 112 | |
| 113 | // css triangle |
| 114 | width: 0; |
| 115 | height: 0; |
| 116 | border-left: $triangleBorder solid transparent; |
| 117 | border-right: $triangleBorder solid transparent; |
| 118 | border-top: $arrowHeight solid $arrowColor; |
| 119 | |
| 120 | &--up { |
| 121 | border-top: none; |
| 122 | border-bottom: $arrowHeight solid $arrowColor; |
| 123 | } |
| 124 | } |
| 125 | |
| 126 | // the dropdown |
| 127 | &__country-list { |
| 128 | position: absolute; |
| 129 | // popup so render above everything else |
| 130 | z-index: 20; |
| 131 | |
| 132 | // override default list styles |
| 133 | list-style: none; |
| 134 | // in case any container has text-align:center |
| 135 | text-align: left; |
| 136 | |
| 137 | // place menu above the input element |
| 138 | &--dropup { |
| 139 | bottom: 100%; |
| 140 | margin-bottom: (-$borderWidth); |
| 141 | } |
| 142 | |
| 143 | padding: 0; |
| 144 | // margin-left to compensate for the padding on the parent |
| 145 | margin: 0 0 0 (-$borderWidth); |
| 146 | |
| 147 | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); |
| 148 | background-color: #fff !important; |
| 149 | border: $borderWidth solid $greyBorder; |
| 150 | |
| 151 | // don't let the contents wrap AKA the container will be as wide as the contents |
| 152 | white-space: nowrap; |
| 153 | |
| 154 | max-height: 200px; |
| 155 | overflow-y: scroll; |
| 156 | |
| 157 | // Fixes https://github.com/jackocnr/intl-tel-input/issues/765 |
| 158 | // Apple still hasn't fixed the issue where setting overflow: scroll on a div element does not use inertia scrolling |
| 159 | // If this is not set, then the country list scroll stops moving after rasing a finger, and users report that scroll is slow |
| 160 | // Stackoverflow question about it: https://stackoverflow.com/questions/33601165/scrolling-slow-on-mobile-ios-when-using-overflowscroll |
| 161 | -webkit-overflow-scrolling: touch; |
| 162 | |
| 163 | // Limit maximum width on mobiles (small screens) to avoid horizontal scrolling. |
| 164 | @media (max-width: 600px) { |
| 165 | max-width: 90vw; |
| 166 | } |
| 167 | } |
| 168 | |
| 169 | // dropdown flags need consistent width, so wrap in a container |
| 170 | &__flag-box { |
| 171 | display: inline-block; |
| 172 | width: $flagWidth; |
| 173 | } |
| 174 | |
| 175 | // the divider below the preferred countries |
| 176 | &__divider { |
| 177 | margin: 0 !important; |
| 178 | border-bottom: $borderWidth solid $greyBorder !important; |
| 179 | } |
| 180 | |
| 181 | // each country item in dropdown (we must have separate class to differentiate from dividers) |
| 182 | &__country { |
| 183 | // Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines |
| 184 | padding: 5px 10px; |
| 185 | outline: none; |
| 186 | } |
| 187 | |
| 188 | // the dial codes after the country names are greyed out |
| 189 | &__dial-code { |
| 190 | color: $greyText; |
| 191 | vertical-align: baseline; |
| 192 | line-height: 1; |
| 193 | } |
| 194 | &__country.iti__highlight { |
| 195 | background-color: $hoverColor !important; |
| 196 | } |
| 197 | |
| 198 | // spacing between country flag, name and dial code |
| 199 | &__flag-box, |
| 200 | &__country-name { |
| 201 | vertical-align: middle; |
| 202 | line-height: 1; |
| 203 | } |
| 204 | &__flag-box, |
| 205 | &__country-name { |
| 206 | margin-right: 10px; |
| 207 | } |
| 208 | |
| 209 | // these settings are independent of each other, but both move selected flag to left of input |
| 210 | &--allow-dropdown, |
| 211 | &--separate-dial-code { |
| 212 | input, |
| 213 | input[type='text']='text'], |
| 214 | input[type='tel']='tel'] { |
| 215 | padding-right: $inputPadding; |
| 216 | padding-left: $selectedFlagArrowWidth + $inputPadding; |
| 217 | margin-left: 0; |
| 218 | } |
| 219 | .iti__flag-container { |
| 220 | right: auto; |
| 221 | left: 0; |
| 222 | } |
| 223 | } |
| 224 | |
| 225 | &--allow-dropdown { |
| 226 | // hover state - show flag is clickable |
| 227 | .iti__flag-container:hover { |
| 228 | cursor: pointer; |
| 229 | .iti__selected-flag { |
| 230 | background-color: $hoverColor; |
| 231 | } |
| 232 | } |
| 233 | // disable hover state when input is disabled |
| 234 | input[disabled]] + .iti__flag-container:hover, |
| 235 | input[readonly]] + .iti__flag-container:hover { |
| 236 | cursor: default; |
| 237 | .iti__selected-flag { |
| 238 | background-color: transparent; |
| 239 | } |
| 240 | } |
| 241 | } |
| 242 | |
| 243 | &--separate-dial-code { |
| 244 | .iti__selected-flag { |
| 245 | // now that we have digits in this section, it needs this visual separation |
| 246 | background-color: $hoverColor; |
| 247 | } |
| 248 | .iti__selected-dial-code { |
| 249 | margin-left: $arrowPadding; |
| 250 | } |
| 251 | } |
| 252 | |
| 253 | // if dropdownContainer option is set, increase z-index to prevent display issues |
| 254 | &--container { |
| 255 | position: absolute; |
| 256 | top: -1000px; |
| 257 | left: -1000px; |
| 258 | // higher than default Bootstrap modal z-index of 1050 |
| 259 | z-index: 1060; |
| 260 | // to keep styling consistent with .flag-container |
| 261 | padding: $borderWidth; |
| 262 | &:hover { |
| 263 | cursor: pointer; |
| 264 | } |
| 265 | } |
| 266 | } |
| 267 | |
| 268 | @import 'sprite'; |
| 269 | |
| 270 | .iti__flag { |
| 271 | height: $flagHeight; |
| 272 | box-shadow: 0 0 1px 0 #888; |
| 273 | background-image: url('#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}'); |
| 274 | background-repeat: no-repeat; |
| 275 | // empty state |
| 276 | background-color: #dbdbdb; |
| 277 | background-position: $flagWidth 0; |
| 278 | |
| 279 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { |
| 280 | background-image: url('#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}'); |
| 281 | } |
| 282 | } |
| 283 | |
| 284 | // Hack for Nepal which is the only flag that is not square/rectangle, so it has transparency, so you can see the default grey behind it. |
| 285 | .iti__flag.iti__np { |
| 286 | background-color: transparent; |
| 287 | } |
| 288 | } |
| 289 | |
| 290 | /* |
| 291 | Overrides for mobile popup. |
| 292 | Note: .iti-mobile class is applied on the body only if the page loaded initially on mobile but not when the browser window was resized. |
| 293 | */ |
| 294 | .iti-mobile .iti { |
| 295 | &--container { |
| 296 | top: $mobilePopupMargin; |
| 297 | bottom: $mobilePopupMargin; |
| 298 | left: $mobilePopupMargin; |
| 299 | right: $mobilePopupMargin; |
| 300 | position: fixed; |
| 301 | } |
| 302 | &__country-list { |
| 303 | max-height: 100%; |
| 304 | width: 100%; |
| 305 | } |
| 306 | &__country { |
| 307 | padding: 10px; |
| 308 | // increase line height because dropdown copy is v likely to overflow on mobile and when it does it needs to be well spaced |
| 309 | line-height: 1.5em; |
| 310 | } |
| 311 | } |
| 312 | |
| 313 | body.rtl, |
| 314 | body.rtl div.evf-container .everest-form { |
| 315 | .intl-tel-input { |
| 316 | input, |
| 317 | input[type='text']='text'], |
| 318 | input[type='tel']='tel'] { |
| 319 | padding-right: 0; |
| 320 | padding-left: $selectedFlagWidth; |
| 321 | } |
| 322 | |
| 323 | .flag-container { |
| 324 | right: auto; |
| 325 | left: 0; |
| 326 | } |
| 327 | |
| 328 | .selected-flag { |
| 329 | padding-right: $flagPadding; |
| 330 | padding-left: $arrowPadding; |
| 331 | |
| 332 | .iti-arrow { |
| 333 | margin-right: $arrowPadding; |
| 334 | margin-left: 0; |
| 335 | } |
| 336 | } |
| 337 | |
| 338 | .country-list { |
| 339 | text-align: right; |
| 340 | |
| 341 | .flag-box, |
| 342 | .country-name { |
| 343 | margin-right: 0; |
| 344 | margin-left: 6px; |
| 345 | } |
| 346 | |
| 347 | .country-name { |
| 348 | unicode-bidi: embed; |
| 349 | direction: rtl; |
| 350 | } |
| 351 | } |
| 352 | |
| 353 | &.allow-dropdown, |
| 354 | &.separate-dial-code { |
| 355 | input, |
| 356 | input[type='text']='text'], |
| 357 | input[type='tel']='tel'] { |
| 358 | padding-right: $selectedFlagArrowWidth + $inputPadding; |
| 359 | padding-left: $inputPadding; |
| 360 | } |
| 361 | |
| 362 | .flag-container { |
| 363 | right: 0; |
| 364 | left: auto; |
| 365 | } |
| 366 | } |
| 367 | } |
| 368 | } |
| 369 | |
| 370 | body, |
| 371 | div.evf-container .everest-form { |
| 372 | .iti { |
| 373 | &--allow-dropdown { |
| 374 | width: 100%; |
| 375 | } |
| 376 | .iti__country { |
| 377 | padding: 5px 10px !important; |
| 378 | margin: 0 !important; |
| 379 | } |
| 380 | |
| 381 | // Fix Design issue in Style Customizer. |
| 382 | &--allow-dropdown, |
| 383 | &--separate-dial-code { |
| 384 | input, |
| 385 | input[type='text']='text'], |
| 386 | input[type='tel']='tel'] { |
| 387 | // To ignore flag overlapping. |
| 388 | padding-left: $selectedFlagArrowWidth + $inputPadding !important; |
| 389 | } |
| 390 | } |
| 391 | } |
| 392 | } |
| 393 |