amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-09 21:45:26 +00:00
Code Issues Projects Releases Wiki Activity

Replace ngTagsInput by md-chips + md-autocomplete

Browse Source
This commit is contained in:
Francis Lachapelle
2015-04-18 01:19:35 -04:00
parent 14597f8f16
commit 0924b5154e
7 changed files with 46 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
-134
View File
@@ -1,134 +0,0 @@
/// ng-tags-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
tags-input {
display: block;
}
tags-input *, tags-input *:before, tags-input *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
tags-input .host {
position: relative;
}
tags-input .host:active {
outline: none;
}
tags-input .tags {
@extend .pseudo-input-field;
padding: 0;
line-height: 2 * $mg;
word-wrap: break-word;
cursor: text;
border-bottom: 1px solid $colorGrayLighter;
transition: $swift-ease-out;
}
tags-input .tags.focused {
border-bottom: 2px solid sg-color($sogoBlue, 500);
}
tags-input/deep/#inner-editor {
color: $colorGrayLight;
line-height: inherit;
}
:root/deep/#placeholder,
:root/deep/::-webkit-input-placeholder {
color: $colorGrayLight;
height: $mg;
font: inherit;
line-height: inherit;
padding: 0;
}
tags-input .tags .tag-list {
margin: 0;
padding: 0;
list-style-type: none;
}
// Trying to make it chip-like
tags-input .tags .tag-item {
margin: 2px;
padding: $line $mg;
display: inline-block;
float: left;
height: (4 * $line);
font-size: sg-size(body);
line-height: (2 * $line);
border: none;
border-radius: (2 * $line);
background-color: sg-color($sogoPaper, 100);
}
tags-input .tags .tag-item.selected {
}
tags-input .tags .tag-item .remove-button {
margin: 0 0 0 5px;
padding: 0;
border: none;
background: none;
cursor: pointer;
vertical-align: middle;
color: #585858;
}
tags-input .tags .tag-item .remove-button:active {
color: red;
}
tags-input .tags .input {
border: 0;
outline: none;
font: inherit;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
}
tags-input .tags .input.invalid-tag {
color: red;
}
tags-input .tags .input::-ms-clear {
display: none;
}
tags-input.ng-invalid .tags {
-webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input .autocomplete {
margin-top: 0;
position: absolute;
padding: 5px 0;
z-index: 999;
width: 100%;
background-color: white;
border: none;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
top: 100%;
}
tags-input .autocomplete .suggestion-list {
margin: 0;
padding: 0;
list-style-type: none;
}
tags-input .autocomplete .suggestion-item {
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: black;
background-color: white;
}
tags-input .autocomplete .suggestion-item.selected {
color: white;
background-color: sg-color($sogoBlue, 300);
}
tags-input .autocomplete .suggestion-item.selected em {
color: white;
background-color: sg-color($sogoBlue, 700);
}
tags-input .autocomplete .suggestion-item em {
color: $colorGrayDark;
background-color: white;
}