$selectric-main-color: $ace-blue !default; // Color used in border $selectric-secondary-color: $ace-navy !default; // Color used in button $selectric-text-color: $white !default; // Color used in label $selectric-bg-color: $ace-blue !default; // Background color $selectric-height: 40px !default; // Outer height $selectric-spacing: 0px !default; // Label left padding $selectric-border-width: 1px !default; // Outer border width $selectric-inner-height: $selectric-height - ($selectric-border-width * 2) !default; // Inner height
.selectric-wrapper {
position: relative; cursor: pointer;
}
.selectric-responsive {
width: 100%;
}
.selectric {
border: $selectric-border-width solid $selectric-main-color; background: $selectric-bg-color; position: relative; .label { display: block; white-space: nowrap; background: none; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0.5rem 3rem 0.5rem 1rem; font-size: 20px; font-weight: bold; color: $selectric-text-color; cursor: pointer; user-select: none; position: relative; &:after { content: ''; display: inline-block; position: absolute; right: 0.5em; top: 0; bottom: 0; margin: auto 0.5em auto 0; width: 0.6em; height: 0.6em; transform: rotate(-45deg); border: none; border-bottom: solid 0.2em $white; border-left: solid 0.2em $white; } }
}
.selectric-focus .selectric {
border-color: darken($selectric-main-color, 20%);
}
.selectric-hover .selectric {
border-color: darken($selectric-main-color, 10%); .button { color: darken($selectric-secondary-color, 10%); &:after { border-top-color: darken($selectric-secondary-color, 10%); } }
}
.selectric-open {
z-index: 9999; .selectric { border-color: darken($selectric-main-color, 10%); } .selectric-items { display: block; }
}
.selectric-disabled {
filter: alpha(opacity=50); opacity: 0.5; cursor: default; user-select: none;
}
.selectric-hide-select {
position: relative; overflow: hidden; width: 0; height: 0; select { position: absolute; left: -100%; display: none; }
}
.selectric-input {
position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important;
}
.selectric-temp-show {
position: absolute !important; visibility: hidden !important; display: block !important;
}
/* Items box */ .selectric-items {
display: none; position: absolute; top: 100%; left: 0; background: $selectric-bg-color; border-bottom: 1px solid $selectric-main-color; z-index: -1; box-shadow: 0 0 10px -6px; .selectric-scroll { height: 100%; overflow: auto; } .selectric-above & { top: auto; bottom: 100%; } ul, li { list-style: none; padding: 0; margin: 0; font-size: 18px; } li { display: block; padding: 0.5rem 1rem; background: $selectric-secondary-color; margin: 0 1px 1px; color: $white; cursor: pointer; &[data-index="0"] { display: none; } &:last-of-type { margin-bottom: 0; } &.selected, &:hover, &:focus { background: $ace-navy-h; color: $white; } } .disabled { display: none; } .selectric-group { .selectric-group-label { font-weight: bold; padding-left: 10px; cursor: default; user-select: none; background: none; color: #444; } &.disabled li { filter: alpha(opacity=100); opacity: 1; } li { padding-left: 25px; } }
}