summaryrefslogtreecommitdiff
path: root/www/lib/ionic/scss/_select.scss
diff options
context:
space:
mode:
authorPliable Pixels <pliablepixels@gmail.com>2017-09-20 16:15:18 -0400
committerPliable Pixels <pliablepixels@gmail.com>2017-09-20 16:15:18 -0400
commit676270d21beed31d767a06c89522198c77d5d865 (patch)
tree902772af01bfbcf80955f0351a5aae9eb029b9b0 /www/lib/ionic/scss/_select.scss
Initial commit
Diffstat (limited to 'www/lib/ionic/scss/_select.scss')
-rw-r--r--www/lib/ionic/scss/_select.scss142
1 files changed, 142 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_select.scss b/www/lib/ionic/scss/_select.scss
new file mode 100644
index 00000000..02efaff6
--- /dev/null
+++ b/www/lib/ionic/scss/_select.scss
@@ -0,0 +1,142 @@
+
+/**
+ * Select
+ * --------------------------------------------------
+ */
+
+.item-select {
+ position: relative;
+
+ select {
+ @include appearance(none);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ padding: 0 ($item-padding * 3) 0 $item-padding;
+ max-width: 65%;
+
+ border: none;
+ background: $item-default-bg;
+ color: #333;
+
+ // hack to hide default dropdown arrow in FF
+ text-indent: .01px;
+ text-overflow: '';
+
+ white-space: nowrap;
+ font-size: $font-size-base;
+
+ cursor: pointer;
+ direction: rtl; // right align the select text
+ }
+
+ select::-ms-expand {
+ // hide default dropdown arrow in IE
+ display: none;
+ }
+
+ option {
+ direction: ltr;
+ }
+
+ &:after {
+ position: absolute;
+ top: 50%;
+ right: $item-padding;
+ margin-top: -3px;
+ width: 0;
+ height: 0;
+ border-top: 5px solid;
+ border-right: 5px solid rgba(0, 0, 0, 0);
+ border-left: 5px solid rgba(0, 0, 0, 0);
+ color: #999;
+ content: "";
+ pointer-events: none;
+ }
+ &.item-light {
+ select{
+ background:$item-light-bg;
+ color:$item-light-text;
+ }
+ }
+ &.item-stable {
+ select{
+ background:$item-stable-bg;
+ color:$item-stable-text;
+ }
+ &:after, .input-label{
+ color:darken($item-stable-border,30%);
+ }
+ }
+ &.item-positive {
+ select{
+ background:$item-positive-bg;
+ color:$item-positive-text;
+ }
+ &:after, .input-label{
+ color:$item-positive-text;
+ }
+ }
+ &.item-calm {
+ select{
+ background:$item-calm-bg;
+ color:$item-calm-text;
+ }
+ &:after, .input-label{
+ color:$item-calm-text;
+ }
+ }
+ &.item-assertive {
+ select{
+ background:$item-assertive-bg;
+ color:$item-assertive-text;
+ }
+ &:after, .input-label{
+ color:$item-assertive-text;
+ }
+ }
+ &.item-balanced {
+ select{
+ background:$item-balanced-bg;
+ color:$item-balanced-text;
+ }
+ &:after, .input-label{
+ color:$item-balanced-text;
+ }
+ }
+ &.item-energized {
+ select{
+ background:$item-energized-bg;
+ color:$item-energized-text;
+ }
+ &:after, .input-label{
+ color:$item-energized-text;
+ }
+ }
+ &.item-royal {
+ select{
+ background:$item-royal-bg;
+ color:$item-royal-text;
+ }
+ &:after, .input-label{
+ color:$item-royal-text;
+ }
+ }
+ &.item-dark {
+ select{
+ background:$item-dark-bg;
+ color:$item-dark-text;
+ }
+ &:after, .input-label{
+ color:$item-dark-text;
+ }
+ }
+}
+
+select {
+ &[multiple],
+ &[size] {
+ height: auto;
+ }
+}