summaryrefslogtreecommitdiff
path: root/sass/components/_chips.scss
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
committerDaniel Friesel <derf@finalrewind.org>2020-11-21 14:13:41 +0100
commite3fba3dcd493f609e107435867c4a67cb7ee420f (patch)
treecd228574b1d4f4e446fac87e9d6fe3eeffe27b63 /sass/components/_chips.scss
parent88d3e67474c518a5c422b5f0e47c58147f31fe6e (diff)
import materialize sass sources instead of relying on npm
Diffstat (limited to 'sass/components/_chips.scss')
-rw-r--r--sass/components/_chips.scss90
1 files changed, 90 insertions, 0 deletions
diff --git a/sass/components/_chips.scss b/sass/components/_chips.scss
new file mode 100644
index 0000000..27744a8
--- /dev/null
+++ b/sass/components/_chips.scss
@@ -0,0 +1,90 @@
+.chip {
+ &:focus {
+ outline: none;
+ background-color: $chip-selected-color;
+ color: #fff;
+ }
+
+ display: inline-block;
+ height: 32px;
+ font-size: 13px;
+ font-weight: 500;
+ color: rgba(0,0,0,.6);
+ line-height: 32px;
+ padding: 0 12px;
+ border-radius: 16px;
+ background-color: $chip-bg-color;
+ margin-bottom: $chip-margin;
+ margin-right: $chip-margin;
+
+ > img {
+ float: left;
+ margin: 0 8px 0 -12px;
+ height: 32px;
+ width: 32px;
+ border-radius: 50%;
+ }
+
+ .close {
+ cursor: pointer;
+ float: right;
+ font-size: 16px;
+ line-height: 32px;
+ padding-left: 8px;
+ }
+}
+
+.chips {
+ border: none;
+ border-bottom: 1px solid $chip-border-color;
+ box-shadow: none;
+ margin: $input-margin;
+ min-height: 45px;
+ outline: none;
+ transition: all .3s;
+
+ &.focus {
+ border-bottom: 1px solid $chip-selected-color;
+ box-shadow: 0 1px 0 0 $chip-selected-color;
+ }
+
+ &:hover {
+ cursor: text;
+ }
+
+ .input {
+ background: none;
+ border: 0;
+ color: rgba(0,0,0,.6);
+ display: inline-block;
+ font-size: $input-font-size;
+ height: $input-height;
+ line-height: 32px;
+ outline: 0;
+ margin: 0;
+ padding: 0 !important;
+ width: 120px !important;
+ }
+
+ .input:focus {
+ border: 0 !important;
+ box-shadow: none !important;
+ }
+
+ // Autocomplete
+ .autocomplete-content {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+// Form prefix
+.prefix ~ .chips {
+ margin-left: 3rem;
+ width: 92%;
+ width: calc(100% - 3rem);
+}
+.chips:empty ~ label {
+ font-size: 0.8rem;
+ transform: translateY(-140%);
+}