amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-22 11:55:24 +00:00
Code Issues Projects Releases Wiki Activity

Styled ngTags but no hasFocus state

Browse Source
This commit is contained in:
iRouge
2015-02-12 00:00:13 -05:00
committed by Francis Lachapelle
parent 1bb66bbf7d
commit df8b4e302f
4 changed files with 128 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
+119
View File
@@ -0,0 +1,119 @@
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 {
@extend .PseudoField-inputLike;
position: relative;
}
tags-input .host:active {
outline: none;
}
tags-input .tags {
word-wrap: break-word;
cursor: text;
}
tags-input .tags.focused {
}
tags-input .tags .tag-list {
margin: 0;
padding: 0;
list-style-type: none;
}
tags-input .tags .tag-item {
margin: 2px;
padding: 0 5px;
display: inline-block;
float: left;
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 26px;
line-height: 25px;
border: 1px solid #acacac;
border-radius: 3px;
background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
}
tags-input .tags .tag-item.selected {
background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
}
tags-input .tags .tag-item .remove-button {
margin: 0 0 0 5px;
padding: 0;
border: none;
background: none;
cursor: pointer;
vertical-align: middle;
font: bold 16px Arial, sans-serif;
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: 5px;
position: absolute;
padding: 5px 0;
z-index: 999;
width: 100%;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
-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);
}
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;
font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: black;
background-color: white;
}
tags-input .autocomplete .suggestion-item.selected {
color: white;
background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item.selected em {
color: white;
background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item em {
font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: black;
background-color: white;
}
UI/WebServerResources/scss/styles.scss
+4
View File
@@ -88,6 +88,10 @@
// todo : configure manual and glob imports
@import 'views/view';
// Ng-tags styles for re-skinning
// ------------------------------------------------------------------------------
@import 'components/ngTags/ng-tags-input.scss';
// core styles - need to be after components till settings are correctly implemented
// ------------------------------------------------------------------------------
@import 'core/base_styles/base_style';