richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added many new content types inside dropdowns

pull/1129/head
jlukic 10 years ago
parent
90d1215f48
commit
c5490a4a32
10 changed files with 753 additions and 362 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      server/documents/elements/input.html.eco
  2. 874
      server/documents/modules/dropdown.html.eco
  3. 4
      src/definitions/collections/menu.less
  4. 2
      src/definitions/elements/button.less
  5. 9
      src/definitions/elements/label.less
  6. 26
      src/definitions/modules/dropdown.js
  7. 121
      src/definitions/modules/dropdown.less
  8. 8
      src/themes/packages/default/elements/input.variables
  9. 3
      src/themes/packages/default/elements/label.variables
  10. 56
      src/themes/packages/default/modules/dropdown.variables

12
server/documents/elements/input.html.eco
View File

@ -129,6 +129,18 @@ themes : ['Default']
<input type="text" placeholder="Search..."> <input type="text" placeholder="Search...">
</div> </div>
</div> </div>
<div class="another example">
<div class="ui transparent icon input">
<i class="search icon"></i>
<input type="text" placeholder="Search...">
</div>
</div>
<div class="another example">
<div class="ui transparent left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Search...">
</div>
</div>
<div class="example"> <div class="example">
<h4 class="ui header">Fluid</h4> <h4 class="ui header">Fluid</h4>

874
server/documents/modules/dropdown.html.eco
View File

@ -26,6 +26,7 @@ themes : ['Default']
<div class="peek"> <div class="peek">
<div class="ui vertical pointing secondary menu"> <div class="ui vertical pointing secondary menu">
<a class="active item">Types</a> <a class="active item">Types</a>
<a class="item">Content</a>
<a class="item">Variations</a> <a class="item">Variations</a>
<a class="item">States</a> <a class="item">States</a>
</div> </div>
@ -36,21 +37,26 @@ themes : ['Default']
<div class="dropdown example"> <div class="dropdown example">
<h4 class="ui header">Dropdown</h4> <h4 class="ui header">Dropdown</h4>
<p>A basic dropdown has no special formatting of its own</p>
<p>A dropdown</p>
<div class="ui dropdown"> <div class="ui dropdown">
<div class="text">Select</div>
<div class="text">Shop</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<div class="item">Edit</div>
<div class="item">Remove</div>
<div class="item">Hide</div>
<div class="header">Categories</div>
<div class="item">Clothing</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div> </div>
</div> </div>
</div> </div>
<div class="dropdown example"> <div class="dropdown example">
<h4 class="ui header">Selection</h4> <h4 class="ui header">Selection</h4>
<p>A dropdown can be used for user selection</p>
<p>A dropdown can be used to select between choices in a form</p>
<div class="ui selection dropdown"> <div class="ui selection dropdown">
<input type="hidden" name="gender"> <input type="hidden" name="gender">
<div class="default text">Gender</div> <div class="default text">Gender</div>
@ -65,7 +71,7 @@ themes : ['Default']
<div class="ui ignored info message"> <div class="ui ignored info message">
<div class="header">Converting Select Elements</div> <div class="header">Converting Select Elements</div>
<p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p> <p>You can initialize a selection dropdown directly on a select element, any option that is given a blank value will automatically be converted into a placeholder</p>
<p>It is recommended to include the necessary html unless absolutely necessary, otherwise elements will experience a flash of unstyled
<p>Keep in mind however, if you initialize a dropdown directly on a select element, the dropdown contents will be hidden until javascript can render the element, causing a flash of unstyled content.</p>
</div> </div>
<select class="ui dropdown"> <select class="ui dropdown">
<option value="">Gender</option> <option value="">Gender</option>
@ -83,256 +89,271 @@ themes : ['Default']
<div class="dropdown example"> <div class="dropdown example">
<h4 class="ui header">Search Selection</h4> <h4 class="ui header">Search Selection</h4>
<p>A selection dropdown can allow a user to search through a large list of choices.</p> <p>A selection dropdown can allow a user to search through a large list of choices.</p>
<div class="ui search selection dropdown">
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country"> <input type="hidden" name="country">
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="default text">Select Country</div> <div class="default text">Select Country</div>
<div class="menu"> <div class="menu">
<div class="item"><i class="flag andorra"></i> Andorra</div>
<div class="item"><i class="flag united arab emirates"></i> United Arab Emirates</div>
<div class="item"><i class="flag afghanistan"></i> Afghanistan</div>
<div class="item"><i class="flag antigua"></i> Antigua</div>
<div class="item"><i class="flag anguilla"></i> Anguilla</div>
<div class="item"><i class="flag albania"></i> Albania</div>
<div class="item"><i class="flag armenia"></i> Armenia</div>
<div class="item"><i class="flag netherlands antilles"></i> Netherlands Antilles</div>
<div class="item"><i class="flag angola"></i> Angola</div>
<div class="item"><i class="flag argentina"></i> Argentina</div>
<div class="item"><i class="flag american samoa"></i> American Samoa</div>
<div class="item"><i class="flag austria"></i> Austria</div>
<div class="item"><i class="flag australia"></i> Australia</div>
<div class="item"><i class="flag aruba"></i> Aruba</div>
<div class="item"><i class="flag aland islands"></i> Aland Islands</div>
<div class="item"><i class="flag azerbaijan"></i> Azerbaijan</div>
<div class="item"><i class="flag bosnia"></i> Bosnia</div>
<div class="item"><i class="flag barbados"></i> Barbados</div>
<div class="item"><i class="flag bangladesh"></i> Bangladesh</div>
<div class="item"><i class="flag belgium"></i> Belgium</div>
<div class="item"><i class="flag burkina faso"></i> Burkina Faso</div>
<div class="item"><i class="flag bulgaria"></i> Bulgaria</div>
<div class="item"><i class="flag bahrain"></i> Bahrain</div>
<div class="item"><i class="flag burundi"></i> Burundi</div>
<div class="item"><i class="flag benin"></i> Benin</div>
<div class="item"><i class="flag bermuda"></i> Bermuda</div>
<div class="item"><i class="flag brunei"></i> Brunei</div>
<div class="item"><i class="flag bolivia"></i> Bolivia</div>
<div class="item"><i class="flag brazil"></i> Brazil</div>
<div class="item"><i class="flag bahamas"></i> Bahamas</div>
<div class="item"><i class="flag bhutan"></i> Bhutan</div>
<div class="item"><i class="flag bouvet island"></i> Bouvet Island</div>
<div class="item"><i class="flag botswana"></i> Botswana</div>
<div class="item"><i class="flag belarus"></i> Belarus</div>
<div class="item"><i class="flag belize"></i> Belize</div>
<div class="item"><i class="flag canada"></i> Canada</div>
<div class="item"><i class="flag cocos islands"></i> Cocos Islands</div>
<div class="item"><i class="flag congo"></i> Congo</div>
<div class="item"><i class="flag central african republic"></i> Central African Republic</div>
<div class="item"><i class="flag congo brazzaville"></i> Congo Brazzaville</div>
<div class="item"><i class="flag switzerland"></i> Switzerland</div>
<div class="item"><i class="flag cote divoire"></i> Cote Divoire</div>
<div class="item"><i class="flag cook islands"></i> Cook Islands</div>
<div class="item"><i class="flag chile"></i> Chile</div>
<div class="item"><i class="flag cameroon"></i> Cameroon</div>
<div class="item"><i class="flag china"></i> China</div>
<div class="item"><i class="flag colombia"></i> Colombia</div>
<div class="item"><i class="flag costa rica"></i> Costa Rica</div>
<div class="item"><i class="flag serbia"></i> Serbia</div>
<div class="item"><i class="flag cuba"></i> Cuba</div>
<div class="item"><i class="flag cape verde"></i> Cape Verde</div>
<div class="item"><i class="flag christmas island"></i> Christmas Island</div>
<div class="item"><i class="flag cyprus"></i> Cyprus</div>
<div class="item"><i class="flag czech republic"></i> Czech Republic</div>
<div class="item"><i class="flag germany"></i> Germany</div>
<div class="item"><i class="flag djibouti"></i> Djibouti</div>
<div class="item"><i class="flag denmark"></i> Denmark</div>
<div class="item"><i class="flag dominica"></i> Dominica</div>
<div class="item"><i class="flag dominican republic"></i> Dominican Republic</div>
<div class="item"><i class="flag algeria"></i> Algeria</div>
<div class="item"><i class="flag ecuador"></i> Ecuador</div>
<div class="item"><i class="flag estonia"></i> Estonia</div>
<div class="item"><i class="flag egypt"></i> Egypt</div>
<div class="item"><i class="flag western sahara"></i> Western Sahara</div>
<div class="item"><i class="flag eritrea"></i> Eritrea</div>
<div class="item"><i class="flag spain"></i> Spain</div>
<div class="item"><i class="flag ethiopia"></i> Ethiopia</div>
<div class="item"><i class="flag european union"></i> European Union</div>
<div class="item"><i class="flag finland"></i> Finland</div>
<div class="item"><i class="flag fiji"></i> Fiji</div>
<div class="item"><i class="flag falkland islands"></i> Falkland Islands</div>
<div class="item"><i class="flag micronesia"></i> Micronesia</div>
<div class="item"><i class="flag faroe islands"></i> Faroe Islands</div>
<div class="item"><i class="flag france"></i> France</div>
<div class="item"><i class="flag gabon"></i> Gabon</div>
<div class="item"><i class="flag england"></i> England</div>
<div class="item"><i class="flag grenada"></i> Grenada</div>
<div class="item"><i class="flag georgia"></i> Georgia</div>
<div class="item"><i class="flag french guiana"></i> French Guiana</div>
<div class="item"><i class="flag ghana"></i> Ghana</div>
<div class="item"><i class="flag gibraltar"></i> Gibraltar</div>
<div class="item"><i class="flag greenland"></i> Greenland</div>
<div class="item"><i class="flag gambia"></i> Gambia</div>
<div class="item"><i class="flag guinea"></i> Guinea</div>
<div class="item"><i class="flag guadeloupe"></i> Guadeloupe</div>
<div class="item"><i class="flag equatorial guinea"></i> Equatorial Guinea</div>
<div class="item"><i class="flag greece"></i> Greece</div>
<div class="item"><i class="flag sandwich islands"></i> Sandwich Islands</div>
<div class="item"><i class="flag guatemala"></i> Guatemala</div>
<div class="item"><i class="flag guam"></i> Guam</div>
<div class="item"><i class="flag guinea-bissau"></i> Guinea-Bissau</div>
<div class="item"><i class="flag guyana"></i> Guyana</div>
<div class="item"><i class="flag hong kong"></i> Hong Kong</div>
<div class="item"><i class="flag heard island"></i> Heard Island</div>
<div class="item"><i class="flag honduras"></i> Honduras</div>
<div class="item"><i class="flag croatia"></i> Croatia</div>
<div class="item"><i class="flag haiti"></i> Haiti</div>
<div class="item"><i class="flag hungary"></i> Hungary</div>
<div class="item"><i class="flag indonesia"></i> Indonesia</div>
<div class="item"><i class="flag ireland"></i> Ireland</div>
<div class="item"><i class="flag israel"></i> Israel</div>
<div class="item"><i class="flag india"></i> India</div>
<div class="item"><i class="flag indian ocean territory"></i> Indian Ocean Territory</div>
<div class="item"><i class="flag iraq"></i> Iraq</div>
<div class="item"><i class="flag iran"></i> Iran</div>
<div class="item"><i class="flag iceland"></i> Iceland</div>
<div class="item"><i class="flag italy"></i> Italy</div>
<div class="item"><i class="flag jamaica"></i> Jamaica</div>
<div class="item"><i class="flag jordan"></i> Jordan</div>
<div class="item"><i class="flag japan"></i> Japan</div>
<div class="item"><i class="flag kenya"></i> Kenya</div>
<div class="item"><i class="flag kyrgyzstan"></i> Kyrgyzstan</div>
<div class="item"><i class="flag cambodia"></i> Cambodia</div>
<div class="item"><i class="flag kiribati"></i> Kiribati</div>
<div class="item"><i class="flag comoros"></i> Comoros</div>
<div class="item"><i class="flag saint kitts and nevis"></i> Saint Kitts and Nevis</div>
<div class="item"><i class="flag north korea"></i> North Korea</div>
<div class="item"><i class="flag south korea"></i> South Korea</div>
<div class="item"><i class="flag kuwait"></i> Kuwait</div>
<div class="item"><i class="flag cayman islands"></i> Cayman Islands</div>
<div class="item"><i class="flag kazakhstan"></i> Kazakhstan</div>
<div class="item"><i class="flag laos"></i> Laos</div>
<div class="item"><i class="flag lebanon"></i> Lebanon</div>
<div class="item"><i class="flag saint lucia"></i> Saint Lucia</div>
<div class="item"><i class="flag liechtenstein"></i> Liechtenstein</div>
<div class="item"><i class="flag sri lanka"></i> Sri Lanka</div>
<div class="item"><i class="flag liberia"></i> Liberia</div>
<div class="item"><i class="flag lesotho"></i> Lesotho</div>
<div class="item"><i class="flag lithuania"></i> Lithuania</div>
<div class="item"><i class="flag luxembourg"></i> Luxembourg</div>
<div class="item"><i class="flag latvia"></i> Latvia</div>
<div class="item"><i class="flag libya"></i> Libya</div>
<div class="item"><i class="flag morocco"></i> Morocco</div>
<div class="item"><i class="flag monaco"></i> Monaco</div>
<div class="item"><i class="flag moldova"></i> Moldova</div>
<div class="item"><i class="flag montenegro"></i> Montenegro</div>
<div class="item"><i class="flag madagascar"></i> Madagascar</div>
<div class="item"><i class="flag marshall islands"></i> Marshall Islands</div>
<div class="item"><i class="flag macedonia"></i> MacEdonia</div>
<div class="item"><i class="flag mali"></i> Mali</div>
<div class="item"><i class="flag burma"></i> Burma</div>
<div class="item"><i class="flag mongolia"></i> Mongolia</div>
<div class="item"><i class="flag macau"></i> MacAu</div>
<div class="item"><i class="flag northern mariana islands"></i> Northern Mariana Islands</div>
<div class="item"><i class="flag martinique"></i> Martinique</div>
<div class="item"><i class="flag mauritania"></i> Mauritania</div>
<div class="item"><i class="flag montserrat"></i> Montserrat</div>
<div class="item"><i class="flag malta"></i> Malta</div>
<div class="item"><i class="flag mauritius"></i> Mauritius</div>
<div class="item"><i class="flag maldives"></i> Maldives</div>
<div class="item"><i class="flag malawi"></i> Malawi</div>
<div class="item"><i class="flag mexico"></i> Mexico</div>
<div class="item"><i class="flag malaysia"></i> Malaysia</div>
<div class="item"><i class="flag mozambique"></i> Mozambique</div>
<div class="item"><i class="flag namibia"></i> Namibia</div>
<div class="item"><i class="flag new caledonia"></i> New Caledonia</div>
<div class="item"><i class="flag niger"></i> Niger</div>
<div class="item"><i class="flag norfolk island"></i> Norfolk Island</div>
<div class="item"><i class="flag nigeria"></i> Nigeria</div>
<div class="item"><i class="flag nicaragua"></i> Nicaragua</div>
<div class="item"><i class="flag netherlands"></i> Netherlands</div>
<div class="item"><i class="flag norway"></i> Norway</div>
<div class="item"><i class="flag nepal"></i> Nepal</div>
<div class="item"><i class="flag nauru"></i> Nauru</div>
<div class="item"><i class="flag niue"></i> Niue</div>
<div class="item"><i class="flag new zealand"></i> New Zealand</div>
<div class="item"><i class="flag oman"></i> Oman</div>
<div class="item"><i class="flag panama"></i> Panama</div>
<div class="item"><i class="flag peru"></i> Peru</div>
<div class="item"><i class="flag french polynesia"></i> French Polynesia</div>
<div class="item"><i class="flag new guinea"></i> New Guinea</div>
<div class="item"><i class="flag philippines"></i> Philippines</div>
<div class="item"><i class="flag pakistan"></i> Pakistan</div>
<div class="item"><i class="flag poland"></i> Poland</div>
<div class="item"><i class="flag saint pierre"></i> Saint Pierre</div>
<div class="item"><i class="flag pitcairn islands"></i> Pitcairn Islands</div>
<div class="item"><i class="flag puerto rico"></i> Puerto Rico</div>
<div class="item"><i class="flag palestine"></i> Palestine</div>
<div class="item"><i class="flag portugal"></i> Portugal</div>
<div class="item"><i class="flag palau"></i> Palau</div>
<div class="item"><i class="flag paraguay"></i> Paraguay</div>
<div class="item"><i class="flag qatar"></i> Qatar</div>
<div class="item"><i class="flag reunion"></i> Reunion</div>
<div class="item"><i class="flag romania"></i> Romania</div>
<div class="item"><i class="flag serbia"></i> Serbia</div>
<div class="item"><i class="flag russia"></i> Russia</div>
<div class="item"><i class="flag rwanda"></i> Rwanda</div>
<div class="item"><i class="flag saudi arabia"></i> Saudi Arabia</div>
<div class="item"><i class="flag solomon islands"></i> Solomon Islands</div>
<div class="item"><i class="flag seychelles"></i> Seychelles</div>
<div class="item"><i class="flag sudan"></i> Sudan</div>
<div class="item"><i class="flag sweden"></i> Sweden</div>
<div class="item"><i class="flag singapore"></i> Singapore</div>
<div class="item"><i class="flag saint helena"></i> Saint Helena</div>
<div class="item"><i class="flag slovenia"></i> Slovenia</div>
<div class="item"><i class="flag svalbard"></i> Svalbard, Jan Mayen</div>
<div class="item"><i class="flag slovakia"></i> Slovakia</div>
<div class="item"><i class="flag sierra leone"></i> Sierra Leone</div>
<div class="item"><i class="flag san marino"></i> San Marino</div>
<div class="item"><i class="flag senegal"></i> Senegal</div>
<div class="item"><i class="flag somalia"></i> Somalia</div>
<div class="item"><i class="flag suriname"></i> Suriname</div>
<div class="item"><i class="flag sao tome"></i> Sao Tome</div>
<div class="item"><i class="flag el salvador"></i> El Salvador</div>
<div class="item"><i class="flag syria"></i> Syria</div>
<div class="item"><i class="flag swaziland"></i> Swaziland</div>
<div class="item"><i class="flag caicos islands"></i> Caicos Islands</div>
<div class="item"><i class="flag chad"></i> Chad</div>
<div class="item"><i class="flag french territories"></i> French Territories</div>
<div class="item"><i class="flag togo"></i> Togo</div>
<div class="item"><i class="flag thailand"></i> Thailand</div>
<div class="item"><i class="flag tajikistan"></i> Tajikistan</div>
<div class="item"><i class="flag tokelau"></i> Tokelau</div>
<div class="item"><i class="flag timorleste"></i> Timorleste</div>
<div class="item"><i class="flag turkmenistan"></i> Turkmenistan</div>
<div class="item"><i class="flag tunisia"></i> Tunisia</div>
<div class="item"><i class="flag tonga"></i> Tonga</div>
<div class="item"><i class="flag turkey"></i> Turkey</div>
<div class="item"><i class="flag trinidad"></i> Trinidad</div>
<div class="item"><i class="flag tuvalu"></i> Tuvalu</div>
<div class="item"><i class="flag taiwan"></i> Taiwan</div>
<div class="item"><i class="flag tanzania"></i> Tanzania</div>
<div class="item"><i class="flag ukraine"></i> Ukraine</div>
<div class="item"><i class="flag uganda"></i> Uganda</div>
<div class="item"><i class="flag us minor islands"></i> US Minor Islands</div>
<div class="item"><i class="flag united states"></i> United States</div>
<div class="item"><i class="flag uruguay"></i> Uruguay</div>
<div class="item"><i class="flag uzbekistan"></i> Uzbekistan</div>
<div class="item"><i class="flag vatican city"></i> Vatican City</div>
<div class="item"><i class="flag saint vincent"></i> Saint Vincent</div>
<div class="item"><i class="flag venezuela"></i> Venezuela</div>
<div class="item"><i class="flag british virgin islands"></i> British Virgin Islands</div>
<div class="item"><i class="flag us virgin islands"></i> Us Virgin Islands</div>
<div class="item"><i class="flag vietnam"></i> Vietnam</div>
<div class="item"><i class="flag vanuatu"></i> Vanuatu</div>
<div class="item"><i class="flag wallis and futuna"></i> Wallis and Futuna</div>
<div class="item"><i class="flag samoa"></i> Samoa</div>
<div class="item"><i class="flag yemen"></i> Yemen</div>
<div class="item"><i class="flag mayotte"></i> Mayotte</div>
<div class="item"><i class="flag south africa"></i> South Africa</div>
<div class="item"><i class="flag zambia"></i> Zambia</div>
<div class="item"><i class="flag zimbabwe"></i> Zimbabwe</div>
<div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
<div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
<div class="item" data-value="ai"><i class="ai flag"></i>Anguilla</div>
<div class="item" data-value="al"><i class="al flag"></i>Albania</div>
<div class="item" data-value="am"><i class="am flag"></i>Armenia</div>
<div class="item" data-value="an"><i class="an flag"></i>Netherlands Antilles</div>
<div class="item" data-value="ao"><i class="ao flag"></i>Angola</div>
<div class="item" data-value="ar"><i class="ar flag"></i>Argentina</div>
<div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
<div class="item" data-value="at"><i class="at flag"></i>Austria</div>
<div class="item" data-value="au"><i class="au flag"></i>Australia</div>
<div class="item" data-value="aw"><i class="aw flag"></i>Aruba</div>
<div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
<div class="item" data-value="az"><i class="az flag"></i>Azerbaijan</div>
<div class="item" data-value="ba"><i class="ba flag"></i>Bosnia</div>
<div class="item" data-value="bb"><i class="bb flag"></i>Barbados</div>
<div class="item" data-value="bd"><i class="bd flag"></i>Bangladesh</div>
<div class="item" data-value="be"><i class="be flag"></i>Belgium</div>
<div class="item" data-value="bf"><i class="bf flag"></i>Burkina Faso</div>
<div class="item" data-value="bg"><i class="bg flag"></i>Bulgaria</div>
<div class="item" data-value="bh"><i class="bh flag"></i>Bahrain</div>
<div class="item" data-value="bi"><i class="bi flag"></i>Burundi</div>
<div class="item" data-value="bj"><i class="bj flag"></i>Benin</div>
<div class="item" data-value="bm"><i class="bm flag"></i>Bermuda</div>
<div class="item" data-value="bn"><i class="bn flag"></i>Brunei</div>
<div class="item" data-value="bo"><i class="bo flag"></i>Bolivia</div>
<div class="item" data-value="br"><i class="br flag"></i>Brazil</div>
<div class="item" data-value="bs"><i class="bs flag"></i>Bahamas</div>
<div class="item" data-value="bt"><i class="bt flag"></i>Bhutan</div>
<div class="item" data-value="bv"><i class="bv flag"></i>Bouvet Island</div>
<div class="item" data-value="bw"><i class="bw flag"></i>Botswana</div>
<div class="item" data-value="by"><i class="by flag"></i>Belarus</div>
<div class="item" data-value="bz"><i class="bz flag"></i>Belize</div>
<div class="item" data-value="ca"><i class="ca flag"></i>Canada</div>
<div class="item" data-value="cc"><i class="cc flag"></i>Cocos Islands</div>
<div class="item" data-value="cd"><i class="cd flag"></i>Congo</div>
<div class="item" data-value="cf"><i class="cf flag"></i>Central African Republic</div>
<div class="item" data-value="cg"><i class="cg flag"></i>Congo Brazzaville</div>
<div class="item" data-value="ch"><i class="ch flag"></i>Switzerland</div>
<div class="item" data-value="ci"><i class="ci flag"></i>Cote Divoire</div>
<div class="item" data-value="ck"><i class="ck flag"></i>Cook Islands</div>
<div class="item" data-value="cl"><i class="cl flag"></i>Chile</div>
<div class="item" data-value="cm"><i class="cm flag"></i>Cameroon</div>
<div class="item" data-value="cn"><i class="cn flag"></i>China</div>
<div class="item" data-value="co"><i class="co flag"></i>Colombia</div>
<div class="item" data-value="cr"><i class="cr flag"></i>Costa Rica</div>
<div class="item" data-value="cs"><i class="cs flag"></i>Serbia</div>
<div class="item" data-value="cu"><i class="cu flag"></i>Cuba</div>
<div class="item" data-value="cv"><i class="cv flag"></i>Cape Verde</div>
<div class="item" data-value="cx"><i class="cx flag"></i>Christmas Island</div>
<div class="item" data-value="cy"><i class="cy flag"></i>Cyprus</div>
<div class="item" data-value="cz"><i class="cz flag"></i>Czech Republic</div>
<div class="item" data-value="de"><i class="de flag"></i>Germany</div>
<div class="item" data-value="dj"><i class="dj flag"></i>Djibouti</div>
<div class="item" data-value="dk"><i class="dk flag"></i>Denmark</div>
<div class="item" data-value="dm"><i class="dm flag"></i>Dominica</div>
<div class="item" data-value="do"><i class="do flag"></i>Dominican Republic</div>
<div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
<div class="item" data-value="ec"><i class="ec flag"></i>Ecuador</div>
<div class="item" data-value="ee"><i class="ee flag"></i>Estonia</div>
<div class="item" data-value="eg"><i class="eg flag"></i>Egypt</div>
<div class="item" data-value="eh"><i class="eh flag"></i>Western Sahara</div>
<div class="item" data-value="er"><i class="er flag"></i>Eritrea</div>
<div class="item" data-value="es"><i class="es flag"></i>Spain</div>
<div class="item" data-value="et"><i class="et flag"></i>Ethiopia</div>
<div class="item" data-value="eu"><i class="eu flag"></i>European Union</div>
<div class="item" data-value="fi"><i class="fi flag"></i>Finland</div>
<div class="item" data-value="fj"><i class="fj flag"></i>Fiji</div>
<div class="item" data-value="fk"><i class="fk flag"></i>Falkland Islands</div>
<div class="item" data-value="fm"><i class="fm flag"></i>Micronesia</div>
<div class="item" data-value="fo"><i class="fo flag"></i>Faroe Islands</div>
<div class="item" data-value="fr"><i class="fr flag"></i>France</div>
<div class="item" data-value="ga"><i class="ga flag"></i>Gabon</div>
<div class="item" data-value="gb"><i class="gb flag"></i>England</div>
<div class="item" data-value="gd"><i class="gd flag"></i>Grenada</div>
<div class="item" data-value="ge"><i class="ge flag"></i>Georgia</div>
<div class="item" data-value="gf"><i class="gf flag"></i>French Guiana</div>
<div class="item" data-value="gh"><i class="gh flag"></i>Ghana</div>
<div class="item" data-value="gi"><i class="gi flag"></i>Gibraltar</div>
<div class="item" data-value="gl"><i class="gl flag"></i>Greenland</div>
<div class="item" data-value="gm"><i class="gm flag"></i>Gambia</div>
<div class="item" data-value="gn"><i class="gn flag"></i>Guinea</div>
<div class="item" data-value="gp"><i class="gp flag"></i>Guadeloupe</div>
<div class="item" data-value="gq"><i class="gq flag"></i>Equatorial Guinea</div>
<div class="item" data-value="gr"><i class="gr flag"></i>Greece</div>
<div class="item" data-value="gs"><i class="gs flag"></i>Sandwich Islands</div>
<div class="item" data-value="gt"><i class="gt flag"></i>Guatemala</div>
<div class="item" data-value="gu"><i class="gu flag"></i>Guam</div>
<div class="item" data-value="gw"><i class="gw flag"></i>Guinea-Bissau</div>
<div class="item" data-value="gy"><i class="gy flag"></i>Guyana</div>
<div class="item" data-value="hk"><i class="hk flag"></i>Hong Kong</div>
<div class="item" data-value="hm"><i class="hm flag"></i>Heard Island</div>
<div class="item" data-value="hn"><i class="hn flag"></i>Honduras</div>
<div class="item" data-value="hr"><i class="hr flag"></i>Croatia</div>
<div class="item" data-value="ht"><i class="ht flag"></i>Haiti</div>
<div class="item" data-value="hu"><i class="hu flag"></i>Hungary</div>
<div class="item" data-value="id"><i class="id flag"></i>Indonesia</div>
<div class="item" data-value="ie"><i class="ie flag"></i>Ireland</div>
<div class="item" data-value="il"><i class="il flag"></i>Israel</div>
<div class="item" data-value="in"><i class="in flag"></i>India</div>
<div class="item" data-value="io"><i class="io flag"></i>Indian Ocean Territory</div>
<div class="item" data-value="iq"><i class="iq flag"></i>Iraq</div>
<div class="item" data-value="ir"><i class="ir flag"></i>Iran</div>
<div class="item" data-value="is"><i class="is flag"></i>Iceland</div>
<div class="item" data-value="it"><i class="it flag"></i>Italy</div>
<div class="item" data-value="jm"><i class="jm flag"></i>Jamaica</div>
<div class="item" data-value="jo"><i class="jo flag"></i>Jordan</div>
<div class="item" data-value="jp"><i class="jp flag"></i>Japan</div>
<div class="item" data-value="ke"><i class="ke flag"></i>Kenya</div>
<div class="item" data-value="kg"><i class="kg flag"></i>Kyrgyzstan</div>
<div class="item" data-value="kh"><i class="kh flag"></i>Cambodia</div>
<div class="item" data-value="ki"><i class="ki flag"></i>Kiribati</div>
<div class="item" data-value="km"><i class="km flag"></i>Comoros</div>
<div class="item" data-value="kn"><i class="kn flag"></i>Saint Kitts and Nevis</div>
<div class="item" data-value="kp"><i class="kp flag"></i>North Korea</div>
<div class="item" data-value="kr"><i class="kr flag"></i>South Korea</div>
<div class="item" data-value="kw"><i class="kw flag"></i>Kuwait</div>
<div class="item" data-value="ky"><i class="ky flag"></i>Cayman Islands</div>
<div class="item" data-value="kz"><i class="kz flag"></i>Kazakhstan</div>
<div class="item" data-value="la"><i class="la flag"></i>Laos</div>
<div class="item" data-value="lb"><i class="lb flag"></i>Lebanon</div>
<div class="item" data-value="lc"><i class="lc flag"></i>Saint Lucia</div>
<div class="item" data-value="li"><i class="li flag"></i>Liechtenstein</div>
<div class="item" data-value="lk"><i class="lk flag"></i>Sri Lanka</div>
<div class="item" data-value="lr"><i class="lr flag"></i>Liberia</div>
<div class="item" data-value="ls"><i class="ls flag"></i>Lesotho</div>
<div class="item" data-value="lt"><i class="lt flag"></i>Lithuania</div>
<div class="item" data-value="lu"><i class="lu flag"></i>Luxembourg</div>
<div class="item" data-value="lv"><i class="lv flag"></i>Latvia</div>
<div class="item" data-value="ly"><i class="ly flag"></i>Libya</div>
<div class="item" data-value="ma"><i class="ma flag"></i>Morocco</div>
<div class="item" data-value="mc"><i class="mc flag"></i>Monaco</div>
<div class="item" data-value="md"><i class="md flag"></i>Moldova</div>
<div class="item" data-value="me"><i class="me flag"></i>Montenegro</div>
<div class="item" data-value="mg"><i class="mg flag"></i>Madagascar</div>
<div class="item" data-value="mh"><i class="mh flag"></i>Marshall Islands</div>
<div class="item" data-value="mk"><i class="mk flag"></i>MacEdonia</div>
<div class="item" data-value="ml"><i class="ml flag"></i>Mali</div>
<div class="item" data-value="ar"><i class="ar flag"></i>Burma</div>
<div class="item" data-value="mn"><i class="mn flag"></i>Mongolia</div>
<div class="item" data-value="mo"><i class="mo flag"></i>MacAu</div>
<div class="item" data-value="mp"><i class="mp flag"></i>Northern Mariana Islands</div>
<div class="item" data-value="mq"><i class="mq flag"></i>Martinique</div>
<div class="item" data-value="mr"><i class="mr flag"></i>Mauritania</div>
<div class="item" data-value="ms"><i class="ms flag"></i>Montserrat</div>
<div class="item" data-value="mt"><i class="mt flag"></i>Malta</div>
<div class="item" data-value="mu"><i class="mu flag"></i>Mauritius</div>
<div class="item" data-value="mv"><i class="mv flag"></i>Maldives</div>
<div class="item" data-value="mw"><i class="mw flag"></i>Malawi</div>
<div class="item" data-value="mx"><i class="mx flag"></i>Mexico</div>
<div class="item" data-value="my"><i class="my flag"></i>Malaysia</div>
<div class="item" data-value="mz"><i class="mz flag"></i>Mozambique</div>
<div class="item" data-value="na"><i class="na flag"></i>Namibia</div>
<div class="item" data-value="nc"><i class="nc flag"></i>New Caledonia</div>
<div class="item" data-value="ne"><i class="ne flag"></i>Niger</div>
<div class="item" data-value="nf"><i class="nf flag"></i>Norfolk Island</div>
<div class="item" data-value="ng"><i class="ng flag"></i>Nigeria</div>
<div class="item" data-value="ni"><i class="ni flag"></i>Nicaragua</div>
<div class="item" data-value="nl"><i class="nl flag"></i>Netherlands</div>
<div class="item" data-value="no"><i class="no flag"></i>Norway</div>
<div class="item" data-value="np"><i class="np flag"></i>Nepal</div>
<div class="item" data-value="nr"><i class="nr flag"></i>Nauru</div>
<div class="item" data-value="nu"><i class="nu flag"></i>Niue</div>
<div class="item" data-value="nz"><i class="nz flag"></i>New Zealand</div>
<div class="item" data-value="om"><i class="om flag"></i>Oman</div>
<div class="item" data-value="pa"><i class="pa flag"></i>Panama</div>
<div class="item" data-value="pe"><i class="pe flag"></i>Peru</div>
<div class="item" data-value="pf"><i class="pf flag"></i>French Polynesia</div>
<div class="item" data-value="pg"><i class="pg flag"></i>New Guinea</div>
<div class="item" data-value="ph"><i class="ph flag"></i>Philippines</div>
<div class="item" data-value="pk"><i class="pk flag"></i>Pakistan</div>
<div class="item" data-value="pl"><i class="pl flag"></i>Poland</div>
<div class="item" data-value="pm"><i class="pm flag"></i>Saint Pierre</div>
<div class="item" data-value="pn"><i class="pn flag"></i>Pitcairn Islands</div>
<div class="item" data-value="pr"><i class="pr flag"></i>Puerto Rico</div>
<div class="item" data-value="ps"><i class="ps flag"></i>Palestine</div>
<div class="item" data-value="pt"><i class="pt flag"></i>Portugal</div>
<div class="item" data-value="pw"><i class="pw flag"></i>Palau</div>
<div class="item" data-value="py"><i class="py flag"></i>Paraguay</div>
<div class="item" data-value="qa"><i class="qa flag"></i>Qatar</div>
<div class="item" data-value="re"><i class="re flag"></i>Reunion</div>
<div class="item" data-value="ro"><i class="ro flag"></i>Romania</div>
<div class="item" data-value="rs"><i class="rs flag"></i>Serbia</div>
<div class="item" data-value="ru"><i class="ru flag"></i>Russia</div>
<div class="item" data-value="rw"><i class="rw flag"></i>Rwanda</div>
<div class="item" data-value="sa"><i class="sa flag"></i>Saudi Arabia</div>
<div class="item" data-value="sb"><i class="sb flag"></i>Solomon Islands</div>
<div class="item" data-value="sc"><i class="sc flag"></i>Seychelles</div>
<div class="item" data-value="sd"><i class="sd flag"></i>Sudan</div>
<div class="item" data-value="se"><i class="se flag"></i>Sweden</div>
<div class="item" data-value="sg"><i class="sg flag"></i>Singapore</div>
<div class="item" data-value="sh"><i class="sh flag"></i>Saint Helena</div>
<div class="item" data-value="si"><i class="si flag"></i>Slovenia</div>
<div class="item" data-value="sj"><i class="sj flag"></i>Svalbard, I Flag Jan Mayen</div>
<div class="item" data-value="sk"><i class="sk flag"></i>Slovakia</div>
<div class="item" data-value="sl"><i class="sl flag"></i>Sierra Leone</div>
<div class="item" data-value="sm"><i class="sm flag"></i>San Marino</div>
<div class="item" data-value="sn"><i class="sn flag"></i>Senegal</div>
<div class="item" data-value="so"><i class="so flag"></i>Somalia</div>
<div class="item" data-value="sr"><i class="sr flag"></i>Suriname</div>
<div class="item" data-value="st"><i class="st flag"></i>Sao Tome</div>
<div class="item" data-value="sv"><i class="sv flag"></i>El Salvador</div>
<div class="item" data-value="sy"><i class="sy flag"></i>Syria</div>
<div class="item" data-value="sz"><i class="sz flag"></i>Swaziland</div>
<div class="item" data-value="tc"><i class="tc flag"></i>Caicos Islands</div>
<div class="item" data-value="td"><i class="td flag"></i>Chad</div>
<div class="item" data-value="tf"><i class="tf flag"></i>French Territories</div>
<div class="item" data-value="tg"><i class="tg flag"></i>Togo</div>
<div class="item" data-value="th"><i class="th flag"></i>Thailand</div>
<div class="item" data-value="tj"><i class="tj flag"></i>Tajikistan</div>
<div class="item" data-value="tk"><i class="tk flag"></i>Tokelau</div>
<div class="item" data-value="tl"><i class="tl flag"></i>Timorleste</div>
<div class="item" data-value="tm"><i class="tm flag"></i>Turkmenistan</div>
<div class="item" data-value="tn"><i class="tn flag"></i>Tunisia</div>
<div class="item" data-value="to"><i class="to flag"></i>Tonga</div>
<div class="item" data-value="tr"><i class="tr flag"></i>Turkey</div>
<div class="item" data-value="tt"><i class="tt flag"></i>Trinidad</div>
<div class="item" data-value="tv"><i class="tv flag"></i>Tuvalu</div>
<div class="item" data-value="tw"><i class="tw flag"></i>Taiwan</div>
<div class="item" data-value="tz"><i class="tz flag"></i>Tanzania</div>
<div class="item" data-value="ua"><i class="ua flag"></i>Ukraine</div>
<div class="item" data-value="ug"><i class="ug flag"></i>Uganda</div>
<div class="item" data-value="um"><i class="um flag"></i>Us Minor Islands</div>
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<div class="item" data-value="va"><i class="va flag"></i>Vatican City</div>
<div class="item" data-value="vc"><i class="vc flag"></i>Saint Vincent</div>
<div class="item" data-value="ve"><i class="ve flag"></i>Venezuela</div>
<div class="item" data-value="vg"><i class="vg flag"></i>British Virgin Islands</div>
<div class="item" data-value="vi"><i class="vi flag"></i>Us Virgin Islands</div>
<div class="item" data-value="vn"><i class="vn flag"></i>Vietnam</div>
<div class="item" data-value="vu"><i class="vu flag"></i>Vanuatu</div>
<div class="item" data-value="wf"><i class="wf flag"></i>Wallis and Futuna</div>
<div class="item" data-value="ws"><i class="ws flag"></i>Samoa</div>
<div class="item" data-value="ye"><i class="ye flag"></i>Yemen</div>
<div class="item" data-value="yt"><i class="yt flag"></i>Mayotte</div>
<div class="item" data-value="za"><i class="za flag"></i>South Africa</div>
<div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
<div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
</div>
</div>
<div class="existing code">
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
<div class="item" data-value="ae"><i class="ae flag"></i>United Arab Emirates</div>
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="ag"><i class="ag flag"></i>Antigua</div>
<!-- Omitted Some Countries !-->
<div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
<div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="another dropdown example"> <div class="another dropdown example">
<select class="ui search dropdown"> <select class="ui search dropdown">
@ -409,15 +430,14 @@ themes : ['Default']
<div class="dropdown example"> <div class="dropdown example">
<h4 class="ui header">Inline</h4> <h4 class="ui header">Inline</h4>
<p>A dropdown can be formatted to appear inline in other content</p> <p>A dropdown can be formatted to appear inline in other content</p>
<div>Show me posts trending
<div class="ui inline dropdown">
<div class="text">today</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-text="today">Today</div>
<div class="item" data-text="this week">This Week</div>
<div class="item" data-text="this month">This Month</div>
</div>
Show me posts trending
<div class="ui inline dropdown">
<div class="text">today</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-text="today">Today</div>
<div class="item" data-text="this week">This Week</div>
<div class="item" data-text="this month">This Month</div>
</div> </div>
</div> </div>
</div> </div>
@ -427,22 +447,43 @@ themes : ['Default']
<p>A dropdown can be formatted so that its menu is pointing</p> <p>A dropdown can be formatted so that its menu is pointing</p>
<div class="ui menu"> <div class="ui menu">
<div class="menu"> <div class="menu">
<a class="active item">
<a class="item">
Home Home
</a> </a>
<div class="ui pointing dropdown link item"> <div class="ui pointing dropdown link item">
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
Messages
Shopping
<div class="menu"> <div class="menu">
<a class="item"><i class="mail icon"></i>Inbox</a>
<a class="item"><i class="book icon"></i>Archive</a>
<div class="header">Categories</div>
<div class="item">
<i class="dropdown icon"></i>
Clothing
<div class="menu">
<div class="header">Mens</div>
<div class="item">Shirts</div>
<div class="item">Pants</div>
<div class="item">Jeans</div>
<div class="item">Shoes</div>
<div class="divider"></div>
<div class="header">Womens</div>
<div class="item">Dresses</div>
<div class="item">Shoes</div>
<div class="item">Bags</div>
</div>
</div>
<div class="item">Home Goods</div>
<div class="item">Bedroom</div>
<div class="divider"></div>
<div class="header">Order</div>
<div class="item">Status</div>
<div class="item">Cancellations</div>
</div> </div>
</div> </div>
<a class="item"> <a class="item">
Browse
Forums
</a> </a>
<a class="item"> <a class="item">
Help
Contact Us
</a> </a>
</div> </div>
</div> </div>
@ -450,15 +491,20 @@ themes : ['Default']
<div class="another hover example"> <div class="another hover example">
<div class="ui vertical menu"> <div class="ui vertical menu">
<div class="menu"> <div class="menu">
<a class="active item">
<a class="item">
Home Home
</a> </a>
<div class="ui left pointing dropdown link item"> <div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
Messages Messages
<div class="menu"> <div class="menu">
<a class="item"><i class="mail icon"></i>Inbox</a>
<a class="item"><i class="book icon"></i>Archive</a>
<div class="item">Inbox</div>
<div class="item">Starred</div>
<div class="item">Sent Mail</div>
<div class="item">Drafts (143)</div>
<div class="divider"></div>
<div class="item">Spam (1009)</div>
<div class="item">Trash</div>
</div> </div>
</div> </div>
<a class="item"> <a class="item">
@ -471,22 +517,78 @@ themes : ['Default']
</div> </div>
</div> </div>
<div class="another button example"> <div class="another button example">
<div class="ui blue labeled icon top left pointing dropdown button">
<i class="settings icon"></i>
<span class="text">Settings</span>
<div class="ui icon top left pointing dropdown button">
<i class="wrench icon"></i>
<div class="menu"> <div class="menu">
<div class="item"><i class="edit icon"></i> Edit</div>
<div class="item"><i class="delete icon"></i> Remove</div>
<div class="item"><i class="hide icon"></i> Hide</div>
<div class="header">Display Density</div>
<div class="item">Comfortable</div>
<div class="item">Cozy</div>
<div class="item">Compact</div>
<div class="ui divider"></div>
<div class="item">Settings</div>
<div class="item">
<i class="dropdown icon"></i>
Upload Settings
<div class="menu">
<div class="item">
<i class="check icon"></i>
Convert Uploaded Files to PDF
</div>
<div class="item">
<i class="check icon"></i>
Digitize Text from Uploaded Files
</div>
</div>
</div>
<div class="item">Manage Apps</div>
<div class="item">Keyboard Shortcuts</div>
<div class="item">Help</div>
</div> </div>
</div> </div>
<div class="ui red labeled icon top right pointing dropdown button">
<i class="settings icon"></i>
<span class="text">Settings</span>
</div>
<div class="another button example">
<div class="ui labeled icon top right pointing dropdown button">
<i class="filter icon"></i>
<span class="text">Filter Posts</span>
<div class="menu"> <div class="menu">
<div class="item"><i class="edit icon"></i> Edit</div>
<div class="item"><i class="delete icon"></i> Remove</div>
<div class="item"><i class="hide icon"></i> Hide</div>
<div class="ui icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search issues...">
</div>
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Discussion
</div>
<div class="divider"></div>
<div class="header">
<i class="calendar icon"></i>
Filter by date
</div>
<div class="item">
<i class="circle icon"></i>
This Week
</div>
<div class="item">
<i class="circle icon"></i>
This Month
</div>
<div class="item">
<i class="circle icon"></i>
This Year
</div>
</div> </div>
</div> </div>
</div> </div>
@ -494,17 +596,53 @@ themes : ['Default']
<div class="ui right pointing dropdown icon button"> <div class="ui right pointing dropdown icon button">
<i class="settings icon"></i> <i class="settings icon"></i>
<div class="menu"> <div class="menu">
<div class="item"><i class="edit icon"></i> Edit</div>
<div class="item"><i class="delete icon"></i> Remove</div>
<div class="item"><i class="hide icon"></i> Hide</div>
<div class="ui transparent left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search issues...">
</div>
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Discussion
</div>
</div> </div>
</div> </div>
<div class="ui left pointing dropdown icon button"> <div class="ui left pointing dropdown icon button">
<i class="settings icon"></i> <i class="settings icon"></i>
<div class="menu"> <div class="menu">
<div class="item"><i class="edit icon"></i> Edit</div>
<div class="item"><i class="delete icon"></i> Remove</div>
<div class="item"><i class="hide icon"></i> Hide</div>
<div class="ui transparent left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search issues...">
</div>
<div class="divider"></div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Discussion
</div>
</div> </div>
</div> </div>
</div> </div>
@ -541,6 +679,168 @@ themes : ['Default']
</div> </div>
</div> </div>
<h2 class="ui dividing header">Content</h2>
<div class="dropdown example">
<h4 class="ui header">Header</h4>
<p>A dropdown can contain a header</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="item">
Important
</div>
<div class="item">
Announcement
</div>
<div class="item">
Discussion
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Divider</h4>
<p>A dropdown can contain dividers to separate related content</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="divider"></div>
<div class="item">
Important
</div>
<div class="item">
Announcement
</div>
<div class="item">
Discussion
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Label</h4>
<p>A dropdown can contain a <a href="/elements/input.html">ui label</a>.</p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
Search Issues
</div>
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search...">
</div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="divider"></div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Discussion
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Input</h4>
<p>A dropdown can contain a <a href="/elements/input.html">ui input</a></p>
<div class="ui floating labeled icon dropdown button">
<i class="filter icon"></i>
<span class="text">Filter</span>
<div class="menu">
<div class="header">
Search Issues
</div>
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search...">
</div>
<div class="header">
<i class="tags icon"></i>
Filter by tag
</div>
<div class="divider"></div>
<div class="item">
<div class="ui red empty circular label"></div>
Important
</div>
<div class="item">
<div class="ui blue empty circular label"></div>
Announcement
</div>
<div class="item">
<div class="ui black empty circular label"></div>
Discussion
</div>
</div>
</div>
</div>
<div class="dropdown example">
<h4 class="ui header">Image</h4>
<p>A dropdown can contain a <a href="/elements/input.html">ui image</a></p>
<div class="ui floating labeled icon dropdown button">
<i class="add user icon"></i>
<span class="text">Add User</span>
<div class="menu">
<div class="header">
People You Might Know
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/jenny.jpg">
Jenny Hess
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/elliot.jpg">
Elliot Fu
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/stevie.jpg">
Stevie Feliciano
</div>
<div class="header">
Your Friends' Friends
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/christian.jpg">
Christian
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/matt.jpg">
Matt
</div>
<div class="item">
<img class="ui mini avatar image" src="/images/avatar/small/justen.jpg">
Justen Kitsune
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Variations</h2> <h2 class="ui dividing header">Variations</h2>
<div class="dropdown example"> <div class="dropdown example">

4
src/definitions/collections/menu.less
View File

@ -524,10 +524,10 @@
} }
/*--- Sub Menu ---*/ /*--- Sub Menu ---*/
.ui.vertical.menu .item > .menu {
.ui.vertical.menu .item:not(.dropdown) > .menu {
margin: @subMenuMargin -@horizontalPadding 0em; margin: @subMenuMargin -@horizontalPadding 0em;
} }
.ui.vertical.menu .item > .menu > .item {
.ui.vertical.menu .item:not(.dropdown) > .menu > .item {
background: none; background: none;
padding: @subMenuHorizontalPadding @subMenuVerticalPadding; padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
font-size: @subMenuFontSize; font-size: @subMenuFontSize;

2
src/definitions/elements/button.less
View File

@ -764,7 +764,7 @@
padding-right: @horizontalPadding !important; padding-right: @horizontalPadding !important;
} }
.ui.right.labeled.icon.button .icon {
.ui.right.labeled.icon.button > .icon {
left: auto; left: auto;
right: 0em; right: 0em;
border-radius: 0em @borderRadius @borderRadius 0em; border-radius: 0em @borderRadius @borderRadius 0em;

9
src/definitions/elements/label.less
View File

@ -824,9 +824,12 @@ a.ui.yellow.label:hover:before {
} }
.ui.empty.circular.labels .label, .ui.empty.circular.labels .label,
.ui.empty.circular.label { .ui.empty.circular.label {
min-width: 0.5em;
min-height: 0.5em;
vertical-align: middle;
min-width: 0em;
min-height: 0em;
overflow: hidden;
width: @emptyCircleSize;
height: @emptyCircleSize;
vertical-align: baseline;
} }
/*------------------- /*-------------------

26
src/definitions/modules/dropdown.js
View File

@ -45,7 +45,6 @@ $.fn.dropdown = function(parameters) {
moduleNamespace = 'module-' + namespace, moduleNamespace = 'module-' + namespace,
$module = $(this), $module = $(this),
$item = $module.find(selector.item),
$text = $module.find(selector.text), $text = $module.find(selector.text),
$search = $module.find(selector.search), $search = $module.find(selector.search),
$input = $module.find(selector.input), $input = $module.find(selector.input),
@ -55,6 +54,7 @@ $.fn.dropdown = function(parameters) {
: $module.prev(), : $module.prev(),
$menu = $module.children(selector.menu), $menu = $module.children(selector.menu),
$item = $menu.find(selector.item),
activated = false, activated = false,
selectionCache = false, selectionCache = false,
@ -119,7 +119,7 @@ $.fn.dropdown = function(parameters) {
.attr('tabindex', 0) .attr('tabindex', 0)
; ;
$menu $menu
.attr('tabindex', -1)
.attr('tabindex', '-1')
; ;
} }
else { else {
@ -129,7 +129,7 @@ $.fn.dropdown = function(parameters) {
.attr('tabindex', 0) .attr('tabindex', 0)
; ;
$menu $menu
.attr('tabindex', -1)
.attr('tabindex', '-1')
; ;
} }
} }
@ -153,11 +153,11 @@ $.fn.dropdown = function(parameters) {
}, },
refresh: function() { refresh: function() {
$item = $module.find(selector.item);
$text = $module.find(selector.text);
$search = $module.find(selector.search);
$input = $module.find(selector.input);
$menu = $module.children(selector.menu);
$text = $module.find(selector.text);
$search = $module.find(selector.search);
$input = $module.find(selector.input);
$menu = $module.children(selector.menu);
$item = $menu.find(selector.item);
}, },
bind: { bind: {
@ -371,7 +371,7 @@ $.fn.dropdown = function(parameters) {
$nextItem = $visibleItems.eq(0); $nextItem = $visibleItems.eq(0);
} }
else { else {
$nextItem = $selectedItem.prevAll(':not(.' + className.filtered + ')').eq(0);
$nextItem = $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0);
} }
if(currentIndex !== 0) { if(currentIndex !== 0) {
module.verbose('Up key pressed, changing active item'); module.verbose('Up key pressed, changing active item');
@ -390,7 +390,7 @@ $.fn.dropdown = function(parameters) {
$nextItem = $visibleItems.eq(0); $nextItem = $visibleItems.eq(0);
} }
else { else {
$nextItem = $selectedItem.nextAll(':not(.' + className.filtered + ')').eq(0);
$nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0);
} }
if(currentIndex + 1 < $visibleItems.size() ) { if(currentIndex + 1 < $visibleItems.size() ) {
module.verbose('Down key pressed, changing active item'); module.verbose('Down key pressed, changing active item');
@ -1310,11 +1310,11 @@ $.fn.dropdown.settings = {
}, },
selector : { selector : {
menu : '.menu',
item : '.menu > .item',
text : '> .text:not(.icon)', text : '> .text:not(.icon)',
input : '> input[type="hidden"], > select', input : '> input[type="hidden"], > select',
search : '> .search'
search : '> .search',
menu : '.menu',
item : '.item'
}, },
className : { className : {

121
src/definitions/modules/dropdown.less
View File

@ -56,6 +56,7 @@
white-space: @menuWrap; white-space: @menuWrap;
font-size: 1rem; font-size: 1rem;
text-shadow: none; text-shadow: none;
text-align: @menuTextAlign;
box-shadow: @menuBoxShadow; box-shadow: @menuBoxShadow;
border: @menuBorder; border: @menuBorder;
@ -66,14 +67,14 @@
} }
/*-------------- /*--------------
Icon
Dropdown Icon
---------------*/ ---------------*/
.ui.dropdown > .dropdown.icon { .ui.dropdown > .dropdown.icon {
width: auto; width: auto;
margin: @dropdownIconMargin; margin: @dropdownIconMargin;
} }
.ui.dropdown .menu .item .dropdown.icon {
.ui.dropdown .menu > .item .dropdown.icon {
width: auto; width: auto;
float: @dropdownSubMenuIconFloat; float: @dropdownSubMenuIconFloat;
margin: @dropdownSubMenuIconMargin; margin: @dropdownSubMenuIconMargin;
@ -94,7 +95,7 @@
Menu Item Menu Item
---------------*/ ---------------*/
.ui.dropdown .menu .item {
.ui.dropdown .menu > .item {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -110,30 +111,59 @@
font-size: @itemFontSize; font-size: @itemFontSize;
text-transform: @itemTextTransform; text-transform: @itemTextTransform;
font-weight: @itemFontWeight; font-weight: @itemFontWeight;
text-align: @itemTextAlign;
box-shadow: @itemBoxShadow; box-shadow: @itemBoxShadow;
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
.ui.dropdown .menu .item .icon {
margin: @itemIconMargin;
.ui.dropdown .menu > .item:first-child {
border-top: none;
} }
.ui.dropdown .menu .item:first-child {
border-top: none;
/*--------------
Menu Divider
---------------*/
.ui.dropdown .menu > .header {
margin: @menuHeaderMargin;
padding: @menuHeaderPadding;
color: @menuHeaderColor;
font-size: @menuHeaderFontSize;
font-weight: @menuHeaderFontWeight;
text-transform: @menuHeaderTextTransform;
} }
.ui.dropdown .menu > .divider {
border-top: @menuDividerBorder;
height: 0em;
margin: @menuDividerMargin;
}
.ui.dropdown .menu > .input {
margin: @menuInputMargin;
min-width: @menuInputMinWidth;
}
.ui.dropdown .menu > .header + .input {
margin-top: 0em;
}
.ui.dropdown .menu > .input:not(.transparent) input {
padding: @menuInputPadding;
}
.ui.dropdown .menu > .input:not(.transparent) .icon {
padding-top: @menuInputIconOffset;
}
/*-------------- /*--------------
Item Image Item Image
---------------*/ ---------------*/
.ui.dropdown .menu .item > img {
height: 2.5em;
.ui.dropdown .text > img,
.ui.dropdown .text > .image,
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 0.5em;
width: auto;
max-height: @menuImageMaxHeight;
margin: @itemImageMargin;
} }
@ -159,9 +189,24 @@
Coupling Coupling
*******************************/ *******************************/
/* Icons / Flags / Labels */
.ui.dropdown > .text > .icon,
.ui.dropdown .menu > .item .icon {
margin: @itemIconMargin;
}
.ui.dropdown > .text > .label,
.ui.dropdown .menu > .item .label {
margin: @itemLabelMargin;
}
.ui.dropdown > .text > .flag,
.ui.dropdown .menu > .item .flag {
margin: @itemFlagMargin;
}
/* Remove Menu Item Divider */ /* Remove Menu Item Divider */
.ui.dropdown .ui.menu .item:before,
.ui.menu .ui.dropdown .menu .item:before {
.ui.dropdown .ui.menu > .item:before,
.ui.menu .ui.dropdown .menu > .item:before {
display: none; display: none;
} }
@ -288,7 +333,7 @@ select.ui.dropdown {
.ui.selection.dropdown .menu:before { .ui.selection.dropdown .menu:before {
display: none; display: none;
} }
.ui.selection.dropdown .menu .item {
.ui.selection.dropdown .menu > .item {
padding-left: @selectionHorizontalPadding !important; padding-left: @selectionHorizontalPadding !important;
/* Add in spacing for scroll bar */ /* Add in spacing for scroll bar */
padding-right: calc(@selectionHorizontalPadding + 1em) !important; padding-right: calc(@selectionHorizontalPadding + 1em) !important;
@ -386,7 +431,7 @@ select.ui.dropdown {
----------------------*/ ----------------------*/
/* Menu Item Hover */ /* Menu Item Hover */
.ui.dropdown .menu .item:hover {
.ui.dropdown .menu > .item:hover {
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
z-index: 12; z-index: 12;
} }
@ -437,35 +482,35 @@ select.ui.dropdown {
.ui.dropdown.error, .ui.dropdown.error,
.ui.dropdown.error > .text, .ui.dropdown.error > .text,
.ui.dropdown.error > .default.text { .ui.dropdown.error > .default.text {
color: @errorTextColor !important;
color: @errorTextColor;
} }
.ui.selection.dropdown.error { .ui.selection.dropdown.error {
background: @errorBackgroundColor; background: @errorBackgroundColor;
box-shadow: 0px 0px 0px 1px @errorBorderColor !important;
border-color: @errorBorderColor;
} }
.ui.selection.dropdown.error:hover { .ui.selection.dropdown.error:hover {
box-shadow: 0px 0px 0px 1px @errorBorderColor !important;
border-color: @errorBorderColor;
} }
.ui.dropdown.error > .menu, .ui.dropdown.error > .menu,
.ui.dropdown.error > .menu .menu { .ui.dropdown.error > .menu .menu {
box-shadow: 0px 0px 1px 1px @errorBorderColor !important;
border-color: @errorBorderColor;
} }
.ui.dropdown.error > .menu .item {
color: #D95C5C !important;
.ui.dropdown.error > .menu > .item {
color: @errorItemTextColor;
} }
/* Item Hover */ /* Item Hover */
.ui.dropdown.error > .menu .item:hover {
background-color: #FFF2F2 !important;
.ui.dropdown.error > .menu > .item:hover {
background-color: @errorItemHoverBackground;
} }
/* Item Active */ /* Item Active */
.ui.dropdown.error > .menu .active.item { .ui.dropdown.error > .menu .active.item {
background-color: #FDCFCF !important;
background-color: @errorItemActiveBackground;
} }
@ -518,8 +563,8 @@ select.ui.dropdown {
top: 100% !important; top: 100% !important;
opacity: 1; opacity: 1;
} }
.ui.simple.dropdown > .menu .item:active > .menu,
.ui.simple.dropdown:hover > .menu .item:hover > .menu {
.ui.simple.dropdown > .menu > .item:active > .menu,
.ui.simple.dropdown:hover > .menu > .item:hover > .menu {
overflow: visible; overflow: visible;
width: auto; width: auto;
height: auto; height: auto;
@ -565,13 +610,13 @@ select.ui.dropdown {
---------------*/ ---------------*/
.ui.pointing.dropdown .menu {
.ui.pointing.dropdown > .menu {
top: 100%; top: 100%;
margin-top: @pointingMenuDistance; margin-top: @pointingMenuDistance;
border-radius: @pointingMenuBorderRadius; border-radius: @pointingMenuBorderRadius;
} }
.ui.pointing.dropdown .menu:after {
.ui.pointing.dropdown > .menu:after {
display: block; display: block;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@ -587,33 +632,33 @@ select.ui.dropdown {
} }
/* Directions */ /* Directions */
.ui.pointing.dropdown .menu:after {
.ui.pointing.dropdown > .menu:after {
top: @pointingArrowOffset; top: @pointingArrowOffset;
left: 50%; left: 50%;
margin: 0em 0em 0em @pointingArrowOffset; margin: 0em 0em 0em @pointingArrowOffset;
} }
.ui.top.left.pointing.dropdown .menu {
.ui.top.left.pointing.dropdown > .menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
left: 0%; left: 0%;
right: auto; right: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em; margin: @pointingArrowDistanceFromEdge 0em 0em;
} }
.ui.top.left.pointing.dropdown .menu:after {
.ui.top.left.pointing.dropdown > .menu:after {
top: @pointingArrowOffset; top: @pointingArrowOffset;
left: @pointingArrowDistanceFromEdge; left: @pointingArrowDistanceFromEdge;
right: auto; right: auto;
margin: 0em; margin: 0em;
transform: rotate(45deg); transform: rotate(45deg);
} }
.ui.top.right.pointing.dropdown .menu {
.ui.top.right.pointing.dropdown > .menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
right: 0%; right: 0%;
left: auto; left: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em; margin: @pointingArrowDistanceFromEdge 0em 0em;
} }
.ui.top.right.pointing.dropdown .menu:after {
.ui.top.right.pointing.dropdown > .menu:after {
top: @pointingArrowOffset; top: @pointingArrowOffset;
left: auto; left: auto;
right: @pointingArrowDistanceFromEdge; right: @pointingArrowDistanceFromEdge;
@ -621,26 +666,26 @@ select.ui.dropdown {
transform: rotate(45deg); transform: rotate(45deg);
} }
.ui.left.pointing.dropdown .menu {
.ui.left.pointing.dropdown > .menu {
top: 0%; top: 0%;
left: 100%; left: 100%;
right: auto; right: auto;
margin: 0em 0em 0em @pointingArrowDistanceFromEdge; margin: 0em 0em 0em @pointingArrowDistanceFromEdge;
} }
.ui.left.pointing.dropdown .menu:after {
.ui.left.pointing.dropdown > .menu:after {
top: 1em; top: 1em;
left: @pointingArrowOffset; left: @pointingArrowOffset;
margin: 0em 0em 0em 0em; margin: 0em 0em 0em 0em;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.ui.right.pointing.dropdown .menu {
.ui.right.pointing.dropdown > .menu {
top: 0%; top: 0%;
left: auto; left: auto;
right: 100%; right: 100%;
margin: 0em @pointingArrowDistanceFromEdge 0em 0em; margin: 0em @pointingArrowDistanceFromEdge 0em 0em;
} }
.ui.right.pointing.dropdown .menu:after {
.ui.right.pointing.dropdown > .menu:after {
top: 1em; top: 1em;
left: auto; left: auto;
right: @pointingArrowOffset; right: @pointingArrowOffset;

8
src/themes/packages/default/elements/input.variables
View File

@ -40,11 +40,11 @@
@iconFocusOpacity: 1; @iconFocusOpacity: 1;
@iconSpacing: 0.5em; @iconSpacing: 0.5em;
@iconMargin: @iconWidth + @iconSpacing; @iconMargin: @iconWidth + @iconSpacing;
@iconTransition: opacity 0.3s ease-out;
@iconTransition: opacity 0.3s @defaultEasing;
@transparentIconWidth: @glyphWidth;
@transparentIconOffset: @lineOffset;
@transparentIconMargin: @transparentIconWidth + @iconSpacing;
@transparentIconWidth: auto;
@transparentIconOffset: (@lineOffset * 2);
@transparentIconMargin: 1.75em;
/* Circular Icon Input */ /* Circular Icon Input */
@circularIconVerticalOffset: 0.35em; @circularIconVerticalOffset: 0.35em;

3
src/themes/packages/default/elements/label.variables
View File

@ -9,7 +9,7 @@
@verticalAlign: baseline; @verticalAlign: baseline;
@verticalMargin: 0.25em;
@verticalMargin: 0em;
@horizontalMargin: 0.125em; @horizontalMargin: 0.125em;
@backgroundColor: #E8E8E8; @backgroundColor: #E8E8E8;
@backgroundImage: none; @backgroundImage: none;
@ -114,6 +114,7 @@
/* Circular Padding */ /* Circular Padding */
@circularPadding: 0.5em; @circularPadding: 0.5em;
@circularMinSize: 2em; @circularMinSize: 2em;
@emptyCircleSize: 0.5em;
/* Pointing */ /* Pointing */
@pointingTriangleSize: 0.6em; @pointingTriangleSize: 0.6em;

56
src/themes/packages/default/modules/dropdown.variables
View File

@ -20,10 +20,6 @@
/* Icon */ /* Icon */
@dropdownIconMargin: 0em 0em 0em 1em; @dropdownIconMargin: 0em 0em 0em 1em;
/* Sub Menu Pointer Icon */
@dropdownSubMenuIconFloat: right;
@dropdownSubMenuIconMargin: 0em 0em 0em 0.5em;
/* Current Text */ /* Current Text */
@textTransition: color 0.2s @defaultEasing; @textTransition: color 0.2s @defaultEasing;
@ -33,6 +29,7 @@
@menuPadding: 0em 0em; @menuPadding: 0em 0em;
@menuTop: 100%; @menuTop: 100%;
@menuWrap: nowrap; @menuWrap: nowrap;
@menuTextAlign: left;
@menuBorder: 1px solid @borderColor; @menuBorder: 1px solid @borderColor;
@menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15); @menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
@ -46,26 +43,57 @@
@itemHeight: auto; @itemHeight: auto;
@itemDivider: none; @itemDivider: none;
@itemColor: @textColor; @itemColor: @textColor;
@itemVerticalPadding: 0.85em;
@itemHorizontalPadding: 0.8em;
@itemVerticalPadding: 0.65rem;
@itemHorizontalPadding: 1.25rem;
@itemFontWeight: normal; @itemFontWeight: normal;
@itemLineHeight: 1.2; @itemLineHeight: 1.2;
@itemTextAlign: left;
@itemTextTransform: none; @itemTextTransform: none;
@itemBoxShadow: none; @itemBoxShadow: none;
/* Menu Header */
@menuHeaderColor: @darkTextColor;
@menuHeaderFontSize: 0.8em;
@menuHeaderFontWeight: bold;
@menuHeaderTextTransform: uppercase;
@menuHeaderMargin: 1rem 0rem 0.75rem;
@menuHeaderPadding: 0em @itemHorizontalPadding;
/* Menu Divider */
@menuDividerMargin: 0.5em 0em;
@menuDividerColor: rgba(0, 0, 0, 0.05);
@menuDividerSize: 1px;
@menuDividerBorder: @menuDividerSize solid @menuDividerColor;
/* Menu Input */
@menuInputMargin: 0.75rem @itemHorizontalPadding 0.25rem;
@menuInputMinWidth: 200px;
@menuInputPadding: 0.5em 1em;
@menuInputIconOffset: 0.7em;
/* Menu Image */
@menuImageMaxHeight: 2.5em;
/* Sub Menu Pointer Icon */
@dropdownSubMenuIconFloat: right;
@dropdownSubMenuIconMargin: (@itemLineHeight - 1em) 0em 0em 0.5em;
/* Menu Item Icon */ /* Menu Item Icon */
@itemIconMargin: 0em 0.75em 0em 0em; @itemIconMargin: 0em 0.75em 0em 0em;
@itemLabelMargin: @itemIconMargin;
@itemFlagMargin: @itemIconMargin;
@itemImageMargin: @itemIconMargin;
/* Sub Menu */ /* Sub Menu */
@subMenuTop: 0%; @subMenuTop: 0%;
@subMenuLeft: 100%; @subMenuLeft: 100%;
@subMenuRight: auto; @subMenuRight: auto;
@subMenuMargin: 0em;
@subMenuDistanceAway: -0.5em;
@subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em;
/*------------------- /*-------------------
Types
b Types
--------------------*/ --------------------*/
/* Selection */ /* Selection */
@ -143,6 +171,11 @@
@selectedBackground: @subtleTransparentBlack; @selectedBackground: @subtleTransparentBlack;
@selectedColor: @selectedTextColor; @selectedColor: @selectedTextColor;
/* Error */
@errorItemTextColor: #D95C5C;
@errorItemHoverBackground: #FFF2F2;
@errorItemActiveBackground: #FDCFCF;
/*------------------- /*-------------------
Variations Variations
--------------------*/ --------------------*/
@ -153,10 +186,7 @@
/* Floating */ /* Floating */
@floatingMenuDistance: 0.5em; @floatingMenuDistance: 0.5em;
@floatingMenuBoxShadow:
0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
0px 2px 5px 0px rgba(0, 0, 0, 0.15)
;
@floatingMenuBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
@floatingMenuBorderRadius: @borderRadius; @floatingMenuBorderRadius: @borderRadius;
/* Pointing */ /* Pointing */

Write Preview
Loading…
Cancel
Save