205 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
			
		
		
	
	
			205 lines
		
	
	
		
			4.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
| /* Example tokeninput style #2: Mac Style */
 | |
| fieldset.token-input-mac {
 | |
|   position: relative;
 | |
|   padding: 0;
 | |
|   margin: 5px 0;
 | |
|   background: #fff;
 | |
|   width: 400px;
 | |
|   border: 1px solid #A4BDEC;
 | |
|   border-radius: 10px;
 | |
|   -moz-border-radius: 10px;
 | |
|   -webkit-border-radius: 10px;
 | |
| }
 | |
| 
 | |
| fieldset.token-input-mac.token-input-dropdown-mac {
 | |
|   border-radius: 10px 10px 0 0;
 | |
|   -moz-border-radius: 10px 10px 0 0;
 | |
|   -webkit-border-radius: 10px 10px 0 0;
 | |
|   box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
|   -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
|   -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
| }
 | |
| 
 | |
| ul.token-input-list-mac {
 | |
|     overflow: hidden; 
 | |
|     height: auto !important; 
 | |
|     height: 1%;
 | |
|     cursor: text;
 | |
|     font-size: 12px;
 | |
|     font-family: Verdana, sans-serif;
 | |
|     min-height: 1px;
 | |
|     z-index: 999;
 | |
|     margin: 0;
 | |
|     padding: 3px;
 | |
|     background: transparent;
 | |
| }
 | |
| 
 | |
| ul.token-input-list-mac.error {
 | |
|   border: 1px solid #C52020;
 | |
| }
 | |
| 
 | |
| ul.token-input-list-mac li {
 | |
|     list-style-type: none;
 | |
| }
 | |
| 
 | |
| li.token-input-token-mac p {
 | |
|     display: inline;
 | |
|     padding: 0;
 | |
|     margin: 0;
 | |
| }
 | |
| 
 | |
| li.token-input-token-mac span {
 | |
|     color: #a6b3cf;
 | |
|     margin-left: 5px;
 | |
|     font-weight: bold;
 | |
|     cursor: pointer;
 | |
| }
 | |
| 
 | |
| /* TOKENS */
 | |
| 
 | |
| li.token-input-token-mac {
 | |
|     font-family: "Lucida Grande", Arial, sans-serif;
 | |
|     font-size: 9pt;
 | |
|     line-height: 12pt;
 | |
|     overflow: hidden; 
 | |
|     height: 16px; 
 | |
|     margin: 3px;
 | |
|     padding: 0 10px;   
 | |
|     background: none; 
 | |
|     background-color: #dee7f8;
 | |
|     color: #000;
 | |
|     cursor: default;
 | |
|     border: 1px solid #a4bdec;
 | |
|     border-radius: 15px;
 | |
|     -moz-border-radius: 15px;
 | |
|     -webkit-border-radius: 15px;
 | |
|     float: left;
 | |
| }
 | |
| 
 | |
| li.token-input-highlighted-token-mac {
 | |
|     background-color: #bbcef1;
 | |
|     border: 1px solid #598bec;
 | |
|     color: #000;
 | |
| }
 | |
| 
 | |
| li.token-input-selected-token-mac {
 | |
|     background-color: #598bec;
 | |
|     border: 1px solid transparent;
 | |
|     color: #fff;
 | |
| }
 | |
| 
 | |
| li.token-input-highlighted-token-mac span.token-input-delete-token-mac {
 | |
|     color: #000;
 | |
| }
 | |
| 
 | |
| li.token-input-selected-token-mac span.token-input-delete-token-mac {
 | |
|     color: #fff;
 | |
| }
 | |
| 
 | |
| li.token-input-input-token-mac {
 | |
|     border: none;
 | |
|     background: transparent;
 | |
|     float: left;
 | |
|     padding: 0;
 | |
|     margin: 0;
 | |
| }
 | |
| 
 | |
| li.token-input-input-token-mac input {
 | |
|   border: 0;
 | |
|   width: 100px;
 | |
|   padding: 3px;
 | |
|   background-color: transparent;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac {
 | |
|     position: absolute;
 | |
|     border: 1px solid #A4BDEC;
 | |
|     border-top: none;
 | |
|     left: -1px;
 | |
|     right: -1px;
 | |
|     background-color: #fff;
 | |
|     overflow: hidden;
 | |
|     cursor: default;
 | |
|     font-size: 10pt;
 | |
|     font-family: "Lucida Grande", Arial, sans-serif;
 | |
|     padding: 5px;
 | |
|     border-radius: 0 0 10px 10px;
 | |
|     -moz-border-radius: 0 0 10px 10px;
 | |
|     -webkit-border-radius: 0 0 10px 10px;
 | |
|     box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
|     -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
|     -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25);
 | |
|     clip:rect(0px, 1000px, 1000px, -10px);
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac p {
 | |
|     font-size: 8pt;
 | |
|     margin: 0;
 | |
|     padding: 0 5px;
 | |
|     font-style: italic;
 | |
|     color: #aaa;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac h3.token-input-dropdown-category-mac {
 | |
|   font-family: "Lucida Grande", Arial, sans-serif;
 | |
|   font-size: 10pt;
 | |
|   font-weight: bold;
 | |
|   border: none;
 | |
|   padding: 0 5px;
 | |
|   margin: 0;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul {
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li {
 | |
|     list-style-type: none;
 | |
|     cursor: pointer;
 | |
|     background: none;
 | |
|     background-color: #fff;
 | |
|     margin: 0;
 | |
|     padding: 0 0 0 25px;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac {
 | |
|     background-color: #fff;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac.odd {
 | |
|     background-color: #ECF4F9;
 | |
|     border-radius: 15px;
 | |
|     -moz-border-radius: 15px;
 | |
|     -webkit-border-radius: 15px;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li.token-input-dropdown-item-mac span.token-input-dropdown-item-description-mac {
 | |
|     float: right;
 | |
|     font-size: 8pt;
 | |
|     font-style: italic;
 | |
|     padding: 0 10px 0 0;
 | |
|     color: #999;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li strong {
 | |
|     font-weight: bold;
 | |
|     text-decoration: underline;
 | |
|     font-style: none;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac,
 | |
| div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd {
 | |
|     background-color: #598bec;
 | |
|     color: #fff;
 | |
|     border-radius: 15px;
 | |
|     -moz-border-radius: 15px;
 | |
|     -webkit-border-radius: 15px;
 | |
| }
 | |
| 
 | |
| div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.token-input-dropdown-item-description-mac,
 | |
| div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac {
 | |
|     color: #fff;
 | |
| }
 |