diff options
| author | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
|---|---|---|
| committer | Mitch Riedstra <Mitch@riedstra.us> | 2017-10-24 16:59:48 -0400 |
| commit | 3e8b34be2fdeccf16c8b46f1ee518f970853768d (patch) | |
| tree | abcb7d0cb260790a2b4a746e3959f2e7ee3a33f7 /app/dispatch/static/materialize/sass/components/_chips.scss | |
| parent | 4ee5893fd9c82228c62306fc7f5babdfc602e4c4 (diff) | |
| download | dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.gz dispatch-tracker-3e8b34be2fdeccf16c8b46f1ee518f970853768d.tar.xz | |
Adding in materialize source and templates
Diffstat (limited to 'app/dispatch/static/materialize/sass/components/_chips.scss')
| -rw-r--r-- | app/dispatch/static/materialize/sass/components/_chips.scss | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/sass/components/_chips.scss b/app/dispatch/static/materialize/sass/components/_chips.scss new file mode 100644 index 0000000..c291578 --- /dev/null +++ b/app/dispatch/static/materialize/sass/components/_chips.scss @@ -0,0 +1,89 @@ +.chip {
+ 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;
+ }
+
+ .chip.selected {
+ background-color: $chip-selected-color;
+ color: #fff;
+ }
+
+ .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%);
+}
|