File "intlTelInput.scss"
Full Path: /home/rattkxnv/byattorney.com/wp-content/plugins/everest-forms/assets/css/intlTelInput.scss
File size: 10.05 KB
MIME-type: text/plain
Charset: utf-8
// NOTE: by using !default on all variables, we're saying only declare the variable if it doesn't
// already exist, which allows devs to declare these variables themselves and assign them any value
// they want before importing this file
// rgba is needed for the selected flag hover state to blend in with
// the border-highlighting some browsers give the input on focus
$hoverColor: rgba(0, 0, 0, 0.05) !default;
$greyText: #999 !default;
$greyBorder: #ccc !default;
$flagHeight: 15px !default;
$flagWidth: 20px !default;
$flagPadding: 8px !default;
// this border width is used for the popup and divider, but it is also
// assumed to be the border width of the input, which we do not control
$borderWidth: 1px !default;
$arrowHeight: 4px !default;
$arrowWidth: 6px !default;
$triangleBorder: 3px !default;
$arrowPadding: 6px !default;
$arrowColor: #555 !default;
$inputPadding: 6px !default;
$selectedFlagWidth: $flagWidth + (2 * $flagPadding) !default;
$selectedFlagArrowWidth: $flagWidth + $flagPadding + $arrowWidth + (2 * $arrowPadding) !default;
// image related variables
$flagsImagePath: '../images/' !default;
$flagsImageName: 'intl-tel-input-flags' !default;
$flagsImageExtension: 'png' !default;
// enough space for them to click off to close
$mobilePopupMargin: 30px !default;
body,
div.evf-container .everest-form {
.iti {
// need position on the container so the selected flag can be
// absolutely positioned over the input
position: relative;
// keep the input's default inline properties
display: inline-block;
// paul irish says this is ok
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
&__hide {
display: none;
}
// need this during init, to get the height of the dropdown
&__v-hide {
visibility: hidden;
}
// specify types to increase specificity e.g. to override bootstrap v2.3
input,
input[type='text'],
input[type='tel'] {
position: relative;
// input is bottom level, below selected flag and dropdown
z-index: 0;
// any vertical margin the user has on their inputs would no longer work as expected
// because we wrap everything in a container div. i justify the use of !important
// here because i don't think the user should ever have vertical margin here - when
// the input is wrapped in a container, vertical margin messes up alignment with other
// inline elements (e.g. an adjacent button) in firefox, and probably other browsers.
margin-top: 0 !important;
margin-bottom: 0 !important;
// make space for the selected flag on right of input (if disabled allowDropdown)
// Note: no !important here, as the user may want to tweak this so that the
// perceived input padding matches their existing styles
padding-right: $selectedFlagWidth;
// any margin-right here will push the selected-flag away
margin-right: 0;
}
&__flag-container {
// positioned over the top of the input
position: absolute;
// full height
top: 0;
bottom: 0;
right: 0;
// prevent the highlighted child from overlapping the input border
padding: $borderWidth;
}
&__selected-flag {
// render above the input
z-index: 1;
outline: none;
position: relative;
display: flex;
align-items: center;
// this must be full-height both for the hover highlight, and to push down the
// dropdown so it appears below the input
height: 100%;
padding: 0 $arrowPadding 0 $flagPadding;
}
&__arrow {
margin-left: $arrowPadding;
// css triangle
width: 0;
height: 0;
border-left: $triangleBorder solid transparent;
border-right: $triangleBorder solid transparent;
border-top: $arrowHeight solid $arrowColor;
&--up {
border-top: none;
border-bottom: $arrowHeight solid $arrowColor;
}
}
// the dropdown
&__country-list {
position: absolute;
// popup so render above everything else
z-index: 20;
// override default list styles
list-style: none;
// in case any container has text-align:center
text-align: left;
// place menu above the input element
&--dropup {
bottom: 100%;
margin-bottom: (-$borderWidth);
}
padding: 0;
// margin-left to compensate for the padding on the parent
margin: 0 0 0 (-$borderWidth);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
background-color: #fff !important;
border: $borderWidth solid $greyBorder;
// don't let the contents wrap AKA the container will be as wide as the contents
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
// Fixes https://github.com/jackocnr/intl-tel-input/issues/765
// Apple still hasn't fixed the issue where setting overflow: scroll on a div element does not use inertia scrolling
// If this is not set, then the country list scroll stops moving after rasing a finger, and users report that scroll is slow
// Stackoverflow question about it: https://stackoverflow.com/questions/33601165/scrolling-slow-on-mobile-ios-when-using-overflowscroll
-webkit-overflow-scrolling: touch;
// Limit maximum width on mobiles (small screens) to avoid horizontal scrolling.
@media (max-width: 600px) {
max-width: 90vw;
}
}
// dropdown flags need consistent width, so wrap in a container
&__flag-box {
display: inline-block;
width: $flagWidth;
}
// the divider below the preferred countries
&__divider {
margin: 0 !important;
border-bottom: $borderWidth solid $greyBorder !important;
}
// each country item in dropdown (we must have separate class to differentiate from dividers)
&__country {
// 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
padding: 5px 10px;
outline: none;
}
// the dial codes after the country names are greyed out
&__dial-code {
color: $greyText;
vertical-align: baseline;
line-height: 1;
}
&__country.iti__highlight {
background-color: $hoverColor !important;
}
// spacing between country flag, name and dial code
&__flag-box,
&__country-name {
vertical-align: middle;
line-height: 1;
}
&__flag-box,
&__country-name {
margin-right: 10px;
}
// these settings are independent of each other, but both move selected flag to left of input
&--allow-dropdown,
&--separate-dial-code {
input,
input[type='text'],
input[type='tel'] {
padding-right: $inputPadding;
padding-left: $selectedFlagArrowWidth + $inputPadding;
margin-left: 0;
}
.iti__flag-container {
right: auto;
left: 0;
}
}
&--allow-dropdown {
// hover state - show flag is clickable
.iti__flag-container:hover {
cursor: pointer;
.iti__selected-flag {
background-color: $hoverColor;
}
}
// disable hover state when input is disabled
input[disabled] + .iti__flag-container:hover,
input[readonly] + .iti__flag-container:hover {
cursor: default;
.iti__selected-flag {
background-color: transparent;
}
}
}
&--separate-dial-code {
.iti__selected-flag {
// now that we have digits in this section, it needs this visual separation
background-color: $hoverColor;
}
.iti__selected-dial-code {
margin-left: $arrowPadding;
}
}
// if dropdownContainer option is set, increase z-index to prevent display issues
&--container {
position: absolute;
top: -1000px;
left: -1000px;
// higher than default Bootstrap modal z-index of 1050
z-index: 1060;
// to keep styling consistent with .flag-container
padding: $borderWidth;
&:hover {
cursor: pointer;
}
}
}
@import 'sprite';
.iti__flag {
height: $flagHeight;
box-shadow: 0 0 1px 0 #888;
background-image: url('#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}');
background-repeat: no-repeat;
// empty state
background-color: #dbdbdb;
background-position: $flagWidth 0;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url('#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}');
}
}
// 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.
.iti__flag.iti__np {
background-color: transparent;
}
}
/*
Overrides for mobile popup.
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.
*/
.iti-mobile .iti {
&--container {
top: $mobilePopupMargin;
bottom: $mobilePopupMargin;
left: $mobilePopupMargin;
right: $mobilePopupMargin;
position: fixed;
}
&__country-list {
max-height: 100%;
width: 100%;
}
&__country {
padding: 10px;
// increase line height because dropdown copy is v likely to overflow on mobile and when it does it needs to be well spaced
line-height: 1.5em;
}
}
body.rtl,
body.rtl div.evf-container .everest-form {
.intl-tel-input {
input,
input[type='text'],
input[type='tel'] {
padding-right: 0;
padding-left: $selectedFlagWidth;
}
.flag-container {
right: auto;
left: 0;
}
.selected-flag {
padding-right: $flagPadding;
padding-left: $arrowPadding;
.iti-arrow {
margin-right: $arrowPadding;
margin-left: 0;
}
}
.country-list {
text-align: right;
.flag-box,
.country-name {
margin-right: 0;
margin-left: 6px;
}
.country-name {
unicode-bidi: embed;
direction: rtl;
}
}
&.allow-dropdown,
&.separate-dial-code {
input,
input[type='text'],
input[type='tel'] {
padding-right: $selectedFlagArrowWidth + $inputPadding;
padding-left: $inputPadding;
}
.flag-container {
right: 0;
left: auto;
}
}
}
}
body,
div.evf-container .everest-form {
.iti {
&--allow-dropdown {
width: 100%;
}
.iti__country {
padding: 5px 10px !important;
margin: 0 !important;
}
// Fix Design issue in Style Customizer.
&--allow-dropdown,
&--separate-dial-code {
input,
input[type='text'],
input[type='tel'] {
// To ignore flag overlapping.
padding-left: $selectedFlagArrowWidth + $inputPadding !important;
}
}
}
}