X7ROOT File Manager
Current Path:
/var/www/vhosts/hwtw.com.tw/httpdocs/js/country-select-js/src/scss
var
/
www
/
vhosts
/
hwtw.com.tw
/
httpdocs
/
js
/
country-select-js
/
src
/
scss
/
📁
..
📄
_selector.scss
(5.46 KB)
📄
_sprites.scss
(20.07 KB)
📄
_utils.scss
(186 B)
📄
_variables.scss
(1.05 KB)
📄
countrySelect.scss
(77 B)
Editing: _selector.scss
.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}"); } } }
Upload File
Create Folder