Index: static/src/scss/components/_select.scss |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/static/src/scss/components/_select.scss |
@@ -0,0 +1,171 @@ |
+// This file is part of help.eyeo.com. |
+// Copyright (C) 2017 Eyeo GmbH |
+// |
+// help.eyeo.com is free software: you can redistribute it and/or modify |
+// it under the terms of the GNU General Public License as published by |
+// the Free Software Foundation, either version 3 of the License, or |
+// (at your option) any later version. |
+// |
+// help.eyeo.com is distributed in the hope that it will be useful, |
+// but WITHOUT ANY WARRANTY; without even the implied warranty of |
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
+// GNU General Public License for more details. |
+// |
+// You should have received a copy of the GNU General Public License |
+// along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>. |
+ |
+/******************************************************************************* |
+ * Select |
+ ******************************************************************************/ |
+ |
+/* Custom Select |
+ ******************************************************************************/ |
+ |
+.custom-select |
+{ |
+ position: relative; |
+} |
+ |
+.custom-select-selected |
+{ |
+ display: none; |
+ padding: 0.2em 0.7em; |
+ border: 2px solid $gray-medium; |
+ border-radius: 4px; |
+ color: $white; |
+ background: transparent; |
+ font-family: inherit; |
+ font-size: inherit; |
+ cursor: pointer; |
+} |
+ |
+.js .custom-select-selected |
+{ |
+ display: inline-block; |
+} |
+ |
+.custom-select-options |
+{ |
+ position: absolute; |
+ bottom: 100%; |
+ left: 0px; |
+ margin-bottom: 0.5em; |
+ border: 1px solid $gray-medium; |
+ border-radius: 4px; |
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); |
+ color: $black; |
+ background: $white; |
+ list-style: none; |
+ z-index: 2; |
+ |
+ a |
+ { |
+ color: $black; |
+ } |
+} |
+ |
+.custom-select-options[aria-hidden="true"] |
+{ |
+ display: none; |
+} |
+ |
+[dir="rtl"] .custom-select-options |
+{ |
+ right: 0px; |
+ left: auto; |
+ padding: 0.7em; |
+} |
+ |
+.no-js .custom-select-options |
+{ |
+ position: relative; |
+ display: inline-block; |
+ top: 0px; |
+ padding: 0px; |
+ border: 0px; |
+ color: inherit; |
+ opacity: 1; |
+ background: none; |
+ |
+ li |
+ { |
+ display: inline; |
+ } |
+ |
+ li:after |
+ { |
+ content: ","; |
+ } |
+ |
+ li:last-child:after |
+ { |
+ content: none; |
+ } |
+ |
+ a |
+ { |
+ color: inherit; |
+ } |
+} |
+ |
+.custom-select-option |
+{ |
+ padding: 0.7em; |
+} |
+ |
+/* Custom Dropdown (extends the custom select element) |
+ ******************************************************************************/ |
+ |
+.custom-select-dropdown .custom-select-selected, |
+.custom-select-dropdown .custom-select-options |
+{ |
+ width: 100%; |
+} |
+ |
+.custom-select-dropdown .custom-select-selected |
+{ |
+ position: relative; |
+ height: 2.5em; |
+ padding-right: 3.5em; |
+ padding-left: 0.7em; |
+ color: $primary; |
+ text-align: left; |
+} |
+ |
+[dir="rtl"] .custom-select-dropdown .custom-select-selected |
+{ |
+ padding-right: 0.7em; |
+ padding-left: 3.5em; |
+ text-align: right; |
+} |
+ |
+.custom-select-dropdown .custom-select-selected:after |
+{ |
+ position: absolute; |
+ top: 0; |
+ right: 0; |
+ width: 3em; |
+ height: 100%; |
+ border-left: 2px solid $gray-medium; |
+ background-image: url(/dist/img/png/arrow-icon-down-secondary.png); |
+ background-image: linear-gradient(transparent, transparent), |
+ url(/dist/img/svg/arrow-icon-down-secondary.svg); |
+ background-repeat: no-repeat; |
+ background-position: center; |
+ background-size: 0.7em; |
+ content: ""; |
+} |
+ |
+[dir="rtl"] .custom-select-dropdown .custom-select-selected:after |
+{ |
+ right: auto; |
+ left: 0; |
+ border-right: 2px solid $gray-medium; |
+ border-left: 0; |
+} |
+ |
+.custom-select-dropdown .custom-select-options |
+{ |
+ top: 100%; |
+ bottom: auto; |
+} |