first commit

This commit is contained in:
maher
2026-06-06 13:55:42 +02:00
commit a75adf3c39
2371 changed files with 511696 additions and 0 deletions
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,214 @@
.country-select {
// 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/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
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] {
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
// Note: no !important here, as the user may want to tweak this so that the
// perceived input padding matches their existing styles
padding-right: $selected-flag-width;
// any margin-right here will push the selected-flag away
margin-right: 0;
}
.flag-dropdown {
// 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: $border-width;
}
.selected-flag {
// render above the input
z-index: 1;
position: relative;
width: $selected-flag-width;
// 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 0 0 $flag-padding;
// vertically center the flag
.flag {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.arrow {
position: absolute;
// split the difference between the flag and the arrow height to verically center
top: 50%;
margin-top: -1 * ($arrow-height / 2);
right: $arrow-padding;
// css triangle
width: 0;
height: 0;
border-left: $triangle-border solid transparent;
border-right: $triangle-border solid transparent;
border-top: $arrow-height solid $arrow-color;
&.up {
border-top: none;
border-bottom: $arrow-height solid $arrow-color;
}
}
}
// the dropdown
.country-list {
position: absolute;
// popup so render above everything else
z-index: 2;
// override default list styles
list-style: none;
// in case any container has text-align:center
text-align: left;
// dropdown flags need consistent width, so wrap in a container
.flag {
display: inline-block;
width: $flag-width;
}
padding: 0;
// margin-left to compensate for the padding on the parent
margin: 0 0 0 (-$border-width);
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
background-color: white;
border: $border-width solid $grey-border;
// don't let the contents wrap AKA the container will be as wide as the contents
white-space: nowrap;
// except on small screens, where we force the dropdown width to match the input
@media (max-width: 500px) {
white-space: normal;
}
max-height: 200px;
overflow-y: scroll;
// the divider below the preferred countries
.divider {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: $border-width solid $grey-border;
}
// 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;
}
.country.highlight {
background-color: $hover-color;
}
.flag, .country-name {
vertical-align: middle;
}
// spacing between country flag and name
.flag {
margin-right: 6px;
}
}
&.inside {
input, input[type=text] {
padding-right: $input-padding;
padding-left: $selected-flag-arrow-width + $input-padding;
margin-left: 0;
}
.flag-dropdown {
right: auto;
left: 0;
}
.selected-flag {
width: $selected-flag-arrow-width;
}
}
&.inside {
// hover state - show flag is clickable
.flag-dropdown:hover {
cursor: pointer;
.selected-flag {
background-color: $hover-color;
}
}
// disable hover state when input is disabled
input[disabled] + .flag-dropdown:hover, input[readonly] + .flag-dropdown:hover {
cursor: default;
.selected-flag {
background-color: transparent;
}
}
}
.flag {
width: $flag-width;
height: $flag-height;
box-shadow: 0px 0px 1px 0px #888;
background-image: url("#{$flags-image-path}#{$flags-image-name}.#{$flags-image-extension}");
background-repeat: no-repeat;
// empty state
background-color: #dbdbdb;
background-position: $flag-width 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
background-image: url("#{$flags-image-path}#{$flags-image-name}@2x.#{$flags-image-extension}");
}
}
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,7 @@
@function retina-size($value) {
@return floor($value / 2);
}
@mixin retina-bg-size($spriteWidth, $spriteHeight) {
background-size: floor($spriteWidth / 2) floor($spriteHeight / 2);
}
@@ -0,0 +1,30 @@
// rgba is needed for the selected flag hover state to blend in with
// the border-highlighting some browsers give the input on focus
$hover-color: rgba(0, 0, 0, 0.05) !default;
$grey-text: #999 !default;
$grey-border: #ccc !default;
$flag-height: 15px !default;
$flag-width: 20px !default;
$flag-padding: 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
$border-width: 1px !default;
$arrow-height: 4px !default;
$arrow-width: 6px !default;
$triangle-border: 3px !default;
$arrow-padding: 6px !default;
$arrow-color: #555 !default;
$input-padding: 6px !default;
$selected-flag-width: $flag-width + (2 * $flag-padding) !default;
$selected-flag-arrow-width: $flag-width + $flag-padding + $arrow-width + (2 * $arrow-padding) !default;
// image related variables
$flags-image-path: "../../build/img/" !default;
$flags-image-name: "flags" !default;
$flags-image-extension: "png" !default;
// enough space for them to click off to close
$mobile-popup-margin: 30px;
@@ -0,0 +1,4 @@
@import 'variables';
@import 'utils';
@import 'selector';
@import 'sprites';