From c5490a4a32270e9e28782db841556786ad27e412 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 9 Sep 2014 17:33:53 -0400 Subject: [PATCH] Added many new content types inside dropdowns --- server/documents/elements/input.html.eco | 12 + server/documents/modules/dropdown.html.eco | 874 ++++++++++++------ src/definitions/collections/menu.less | 4 +- src/definitions/elements/button.less | 2 +- src/definitions/elements/label.less | 9 +- src/definitions/modules/dropdown.js | 26 +- src/definitions/modules/dropdown.less | 121 ++- .../packages/default/elements/input.variables | 8 +- .../packages/default/elements/label.variables | 3 +- .../default/modules/dropdown.variables | 56 +- 10 files changed, 753 insertions(+), 362 deletions(-) diff --git a/server/documents/elements/input.html.eco b/server/documents/elements/input.html.eco index 3c03e57c4..4bde6ea23 100755 --- a/server/documents/elements/input.html.eco +++ b/server/documents/elements/input.html.eco @@ -129,6 +129,18 @@ themes : ['Default'] +
+
+ + +
+
+
+
+ + +
+

Fluid

diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index e24a31517..5d2d8a6bf 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -26,6 +26,7 @@ themes : ['Default']
Types + Content Variations States
@@ -36,21 +37,26 @@ themes : ['Default']

Dropdown

-

A basic dropdown has no special formatting of its own

+

A dropdown

-
Select
+
Shop
-
Edit
-
Remove
-
Hide
+
Categories
+
Clothing
+
Home Goods
+
Bedroom
+
+
Order
+
Status
+
Cancellations

Selection

-

A dropdown can be used for user selection

+

A dropdown can be used to select between choices in a form

Gender
@@ -65,7 +71,7 @@ themes : ['Default']
Converting Select Elements

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

-

It is recommended to include the necessary html unless absolutely necessary, otherwise elements will experience a flash of unstyled +

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.

Select Country
-
Andorra
-
United Arab Emirates
-
Afghanistan
-
Antigua
-
Anguilla
-
Albania
-
Armenia
-
Netherlands Antilles
-
Angola
-
Argentina
-
American Samoa
-
Austria
-
Australia
-
Aruba
-
Aland Islands
-
Azerbaijan
-
Bosnia
-
Barbados
-
Bangladesh
-
Belgium
-
Burkina Faso
-
Bulgaria
-
Bahrain
-
Burundi
-
Benin
-
Bermuda
-
Brunei
-
Bolivia
-
Brazil
-
Bahamas
-
Bhutan
-
Bouvet Island
-
Botswana
-
Belarus
-
Belize
-
Canada
-
Cocos Islands
-
Congo
-
Central African Republic
-
Congo Brazzaville
-
Switzerland
-
Cote Divoire
-
Cook Islands
-
Chile
-
Cameroon
-
China
-
Colombia
-
Costa Rica
-
Serbia
-
Cuba
-
Cape Verde
-
Christmas Island
-
Cyprus
-
Czech Republic
-
Germany
-
Djibouti
-
Denmark
-
Dominica
-
Dominican Republic
-
Algeria
-
Ecuador
-
Estonia
-
Egypt
-
Western Sahara
-
Eritrea
-
Spain
-
Ethiopia
-
European Union
-
Finland
-
Fiji
-
Falkland Islands
-
Micronesia
-
Faroe Islands
-
France
-
Gabon
-
England
-
Grenada
-
Georgia
-
French Guiana
-
Ghana
-
Gibraltar
-
Greenland
-
Gambia
-
Guinea
-
Guadeloupe
-
Equatorial Guinea
-
Greece
-
Sandwich Islands
-
Guatemala
-
Guam
-
Guinea-Bissau
-
Guyana
-
Hong Kong
-
Heard Island
-
Honduras
-
Croatia
-
Haiti
-
Hungary
-
Indonesia
-
Ireland
-
Israel
-
India
-
Indian Ocean Territory
-
Iraq
-
Iran
-
Iceland
-
Italy
-
Jamaica
-
Jordan
-
Japan
-
Kenya
-
Kyrgyzstan
-
Cambodia
-
Kiribati
-
Comoros
-
Saint Kitts and Nevis
-
North Korea
-
South Korea
-
Kuwait
-
Cayman Islands
-
Kazakhstan
-
Laos
-
Lebanon
-
Saint Lucia
-
Liechtenstein
-
Sri Lanka
-
Liberia
-
Lesotho
-
Lithuania
-
Luxembourg
-
Latvia
-
Libya
-
Morocco
-
Monaco
-
Moldova
-
Montenegro
-
Madagascar
-
Marshall Islands
-
MacEdonia
-
Mali
-
Burma
-
Mongolia
-
MacAu
-
Northern Mariana Islands
-
Martinique
-
Mauritania
-
Montserrat
-
Malta
-
Mauritius
-
Maldives
-
Malawi
-
Mexico
-
Malaysia
-
Mozambique
-
Namibia
-
New Caledonia
-
Niger
-
Norfolk Island
-
Nigeria
-
Nicaragua
-
Netherlands
-
Norway
-
Nepal
-
Nauru
-
Niue
-
New Zealand
-
Oman
-
Panama
-
Peru
-
French Polynesia
-
New Guinea
-
Philippines
-
Pakistan
-
Poland
-
Saint Pierre
-
Pitcairn Islands
-
Puerto Rico
-
Palestine
-
Portugal
-
Palau
-
Paraguay
-
Qatar
-
Reunion
-
Romania
-
Serbia
-
Russia
-
Rwanda
-
Saudi Arabia
-
Solomon Islands
-
Seychelles
-
Sudan
-
Sweden
-
Singapore
-
Saint Helena
-
Slovenia
-
Svalbard, Jan Mayen
-
Slovakia
-
Sierra Leone
-
San Marino
-
Senegal
-
Somalia
-
Suriname
-
Sao Tome
-
El Salvador
-
Syria
-
Swaziland
-
Caicos Islands
-
Chad
-
French Territories
-
Togo
-
Thailand
-
Tajikistan
-
Tokelau
-
Timorleste
-
Turkmenistan
-
Tunisia
-
Tonga
-
Turkey
-
Trinidad
-
Tuvalu
-
Taiwan
-
Tanzania
-
Ukraine
-
Uganda
-
US Minor Islands
-
United States
-
Uruguay
-
Uzbekistan
-
Vatican City
-
Saint Vincent
-
Venezuela
-
British Virgin Islands
-
Us Virgin Islands
-
Vietnam
-
Vanuatu
-
Wallis and Futuna
-
Samoa
-
Yemen
-
Mayotte
-
South Africa
-
Zambia
-
Zimbabwe
+
Andorra
+
United Arab Emirates
+
Afghanistan
+
Antigua
+
Anguilla
+
Albania
+
Armenia
+
Netherlands Antilles
+
Angola
+
Argentina
+
American Samoa
+
Austria
+
Australia
+
Aruba
+
Aland Islands
+
Azerbaijan
+
Bosnia
+
Barbados
+
Bangladesh
+
Belgium
+
Burkina Faso
+
Bulgaria
+
Bahrain
+
Burundi
+
Benin
+
Bermuda
+
Brunei
+
Bolivia
+
Brazil
+
Bahamas
+
Bhutan
+
Bouvet Island
+
Botswana
+
Belarus
+
Belize
+
Canada
+
Cocos Islands
+
Congo
+
Central African Republic
+
Congo Brazzaville
+
Switzerland
+
Cote Divoire
+
Cook Islands
+
Chile
+
Cameroon
+
China
+
Colombia
+
Costa Rica
+
Serbia
+
Cuba
+
Cape Verde
+
Christmas Island
+
Cyprus
+
Czech Republic
+
Germany
+
Djibouti
+
Denmark
+
Dominica
+
Dominican Republic
+
Algeria
+
Ecuador
+
Estonia
+
Egypt
+
Western Sahara
+
Eritrea
+
Spain
+
Ethiopia
+
European Union
+
Finland
+
Fiji
+
Falkland Islands
+
Micronesia
+
Faroe Islands
+
France
+
Gabon
+
England
+
Grenada
+
Georgia
+
French Guiana
+
Ghana
+
Gibraltar
+
Greenland
+
Gambia
+
Guinea
+
Guadeloupe
+
Equatorial Guinea
+
Greece
+
Sandwich Islands
+
Guatemala
+
Guam
+
Guinea-Bissau
+
Guyana
+
Hong Kong
+
Heard Island
+
Honduras
+
Croatia
+
Haiti
+
Hungary
+
Indonesia
+
Ireland
+
Israel
+
India
+
Indian Ocean Territory
+
Iraq
+
Iran
+
Iceland
+
Italy
+
Jamaica
+
Jordan
+
Japan
+
Kenya
+
Kyrgyzstan
+
Cambodia
+
Kiribati
+
Comoros
+
Saint Kitts and Nevis
+
North Korea
+
South Korea
+
Kuwait
+
Cayman Islands
+
Kazakhstan
+
Laos
+
Lebanon
+
Saint Lucia
+
Liechtenstein
+
Sri Lanka
+
Liberia
+
Lesotho
+
Lithuania
+
Luxembourg
+
Latvia
+
Libya
+
Morocco
+
Monaco
+
Moldova
+
Montenegro
+
Madagascar
+
Marshall Islands
+
MacEdonia
+
Mali
+
Burma
+
Mongolia
+
MacAu
+
Northern Mariana Islands
+
Martinique
+
Mauritania
+
Montserrat
+
Malta
+
Mauritius
+
Maldives
+
Malawi
+
Mexico
+
Malaysia
+
Mozambique
+
Namibia
+
New Caledonia
+
Niger
+
Norfolk Island
+
Nigeria
+
Nicaragua
+
Netherlands
+
Norway
+
Nepal
+
Nauru
+
Niue
+
New Zealand
+
Oman
+
Panama
+
Peru
+
French Polynesia
+
New Guinea
+
Philippines
+
Pakistan
+
Poland
+
Saint Pierre
+
Pitcairn Islands
+
Puerto Rico
+
Palestine
+
Portugal
+
Palau
+
Paraguay
+
Qatar
+
Reunion
+
Romania
+
Serbia
+
Russia
+
Rwanda
+
Saudi Arabia
+
Solomon Islands
+
Seychelles
+
Sudan
+
Sweden
+
Singapore
+
Saint Helena
+
Slovenia
+
Svalbard, I Flag Jan Mayen
+
Slovakia
+
Sierra Leone
+
San Marino
+
Senegal
+
Somalia
+
Suriname
+
Sao Tome
+
El Salvador
+
Syria
+
Swaziland
+
Caicos Islands
+
Chad
+
French Territories
+
Togo
+
Thailand
+
Tajikistan
+
Tokelau
+
Timorleste
+
Turkmenistan
+
Tunisia
+
Tonga
+
Turkey
+
Trinidad
+
Tuvalu
+
Taiwan
+
Tanzania
+
Ukraine
+
Uganda
+
Us Minor Islands
+
United States
+
Uruguay
+
Uzbekistan
+
Vatican City
+
Saint Vincent
+
Venezuela
+
British Virgin Islands
+
Us Virgin Islands
+
Vietnam
+
Vanuatu
+
Wallis and Futuna
+
Samoa
+
Yemen
+
Mayotte
+
South Africa
+
Zambia
+
Zimbabwe
+
+
+
+
+ + +
Select Country
+
+
Andorra
+
United Arab Emirates
+
Afghanistan
+
Antigua
+ +
Zambia
+
Zimbabwe
+
-
+
+
+
+ + Filter by tag +
+
+
+ Important +
+
+
+ Announcement +
+
+
+ Discussion +
+
+
+ + Filter by date +
+
+ + This Week +
+
+ + This Month +
+
+ + This Year +
@@ -494,17 +596,53 @@ themes : ['Default']
-
Edit
-
Remove
-
Hide
+
+ + +
+
+
+ + Filter by tag +
+
+
+ Important +
+
+
+ Announcement +
+
+
+ Discussion +
-
Edit
-
Remove
-
Hide
+
+ + +
+
+
+ + Filter by tag +
+
+
+ Important +
+
+
+ Announcement +
+
+
+ Discussion +
@@ -541,6 +679,168 @@ themes : ['Default'] +

Content

+ +
+

Header

+

A dropdown can contain a header

+
+ + Filter +
+
+ + Filter by tag +
+
+ Important +
+
+ Announcement +
+
+ Discussion +
+
+
+
+
+

Divider

+

A dropdown can contain dividers to separate related content

+
+ + Filter +
+
+ + Filter by tag +
+
+
+ Important +
+
+ Announcement +
+
+ Discussion +
+
+
+
+ +
+

Label

+

A dropdown can contain a ui label.

+
+ + Filter +
+
+ Search Issues +
+
+ + +
+
+ + Filter by tag +
+
+
+
+ Important +
+
+
+ Announcement +
+
+
+ Discussion +
+
+
+
+ +
+

Input

+

A dropdown can contain a ui input

+
+ + Filter +
+
+ Search Issues +
+
+ + +
+
+ + Filter by tag +
+
+
+
+ Important +
+
+
+ Announcement +
+
+
+ Discussion +
+
+
+
+ +
+

Image

+

A dropdown can contain a ui image

+
+ + Add User +
+
+ People You Might Know +
+
+ + Jenny Hess +
+
+ + Elliot Fu +
+
+ + Stevie Feliciano +
+
+ Your Friends' Friends +
+
+ + Christian +
+
+ + Matt +
+
+ + Justen Kitsune +
+
+
+
+ +

Variations

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 0f9b993f6..0520c7283 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -524,10 +524,10 @@ } /*--- Sub Menu ---*/ -.ui.vertical.menu .item > .menu { +.ui.vertical.menu .item:not(.dropdown) > .menu { margin: @subMenuMargin -@horizontalPadding 0em; } -.ui.vertical.menu .item > .menu > .item { +.ui.vertical.menu .item:not(.dropdown) > .menu > .item { background: none; padding: @subMenuHorizontalPadding @subMenuVerticalPadding; font-size: @subMenuFontSize; diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 50d15c8a3..ac22e6f5f 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -764,7 +764,7 @@ padding-right: @horizontalPadding !important; } -.ui.right.labeled.icon.button .icon { +.ui.right.labeled.icon.button > .icon { left: auto; right: 0em; border-radius: 0em @borderRadius @borderRadius 0em; diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 85de13f22..9eba75b13 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -824,9 +824,12 @@ a.ui.yellow.label:hover:before { } .ui.empty.circular.labels .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; } /*------------------- diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 19af502f7..51b63f135 100755 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -45,7 +45,6 @@ $.fn.dropdown = function(parameters) { moduleNamespace = 'module-' + namespace, $module = $(this), - $item = $module.find(selector.item), $text = $module.find(selector.text), $search = $module.find(selector.search), $input = $module.find(selector.input), @@ -55,6 +54,7 @@ $.fn.dropdown = function(parameters) { : $module.prev(), $menu = $module.children(selector.menu), + $item = $menu.find(selector.item), activated = false, selectionCache = false, @@ -119,7 +119,7 @@ $.fn.dropdown = function(parameters) { .attr('tabindex', 0) ; $menu - .attr('tabindex', -1) + .attr('tabindex', '-1') ; } else { @@ -129,7 +129,7 @@ $.fn.dropdown = function(parameters) { .attr('tabindex', 0) ; $menu - .attr('tabindex', -1) + .attr('tabindex', '-1') ; } } @@ -153,11 +153,11 @@ $.fn.dropdown = function(parameters) { }, 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: { @@ -371,7 +371,7 @@ $.fn.dropdown = function(parameters) { $nextItem = $visibleItems.eq(0); } else { - $nextItem = $selectedItem.prevAll(':not(.' + className.filtered + ')').eq(0); + $nextItem = $selectedItem.prevAll(selector.item + ':not(.' + className.filtered + ')').eq(0); } if(currentIndex !== 0) { module.verbose('Up key pressed, changing active item'); @@ -390,7 +390,7 @@ $.fn.dropdown = function(parameters) { $nextItem = $visibleItems.eq(0); } else { - $nextItem = $selectedItem.nextAll(':not(.' + className.filtered + ')').eq(0); + $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0); } if(currentIndex + 1 < $visibleItems.size() ) { module.verbose('Down key pressed, changing active item'); @@ -1310,11 +1310,11 @@ $.fn.dropdown.settings = { }, selector : { - menu : '.menu', - item : '.menu > .item', text : '> .text:not(.icon)', input : '> input[type="hidden"], > select', - search : '> .search' + search : '> .search', + menu : '.menu', + item : '.item' }, className : { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index c9072be5b..becd87a54 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -56,6 +56,7 @@ white-space: @menuWrap; font-size: 1rem; text-shadow: none; + text-align: @menuTextAlign; box-shadow: @menuBoxShadow; border: @menuBorder; @@ -66,14 +67,14 @@ } /*-------------- - Icon + Dropdown Icon ---------------*/ .ui.dropdown > .dropdown.icon { width: auto; margin: @dropdownIconMargin; } -.ui.dropdown .menu .item .dropdown.icon { +.ui.dropdown .menu > .item .dropdown.icon { width: auto; float: @dropdownSubMenuIconFloat; margin: @dropdownSubMenuIconMargin; @@ -94,7 +95,7 @@ Menu Item ---------------*/ -.ui.dropdown .menu .item { +.ui.dropdown .menu > .item { position: relative; cursor: pointer; display: block; @@ -110,30 +111,59 @@ font-size: @itemFontSize; text-transform: @itemTextTransform; font-weight: @itemFontWeight; - text-align: @itemTextAlign; - box-shadow: @itemBoxShadow; -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 ---------------*/ -.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; vertical-align: middle; - margin-right: 0.5em; + width: auto; + max-height: @menuImageMaxHeight; + margin: @itemImageMargin; } @@ -159,9 +189,24 @@ 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 */ -.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; } @@ -288,7 +333,7 @@ select.ui.dropdown { .ui.selection.dropdown .menu:before { display: none; } -.ui.selection.dropdown .menu .item { +.ui.selection.dropdown .menu > .item { padding-left: @selectionHorizontalPadding !important; /* Add in spacing for scroll bar */ padding-right: calc(@selectionHorizontalPadding + 1em) !important; @@ -386,7 +431,7 @@ select.ui.dropdown { ----------------------*/ /* Menu Item Hover */ -.ui.dropdown .menu .item:hover { +.ui.dropdown .menu > .item:hover { background-color: rgba(0, 0, 0, 0.03); z-index: 12; } @@ -437,35 +482,35 @@ select.ui.dropdown { .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text { - color: @errorTextColor !important; + color: @errorTextColor; } .ui.selection.dropdown.error { background: @errorBackgroundColor; - box-shadow: 0px 0px 0px 1px @errorBorderColor !important; + border-color: @errorBorderColor; } .ui.selection.dropdown.error:hover { - box-shadow: 0px 0px 0px 1px @errorBorderColor !important; + border-color: @errorBorderColor; } .ui.dropdown.error > .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 */ -.ui.dropdown.error > .menu .item:hover { - background-color: #FFF2F2 !important; +.ui.dropdown.error > .menu > .item:hover { + background-color: @errorItemHoverBackground; } /* Item Active */ .ui.dropdown.error > .menu .active.item { - background-color: #FDCFCF !important; + background-color: @errorItemActiveBackground; } @@ -518,8 +563,8 @@ select.ui.dropdown { top: 100% !important; 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; width: auto; height: auto; @@ -565,13 +610,13 @@ select.ui.dropdown { ---------------*/ -.ui.pointing.dropdown .menu { +.ui.pointing.dropdown > .menu { top: 100%; margin-top: @pointingMenuDistance; border-radius: @pointingMenuBorderRadius; } -.ui.pointing.dropdown .menu:after { +.ui.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; @@ -587,33 +632,33 @@ select.ui.dropdown { } /* Directions */ -.ui.pointing.dropdown .menu:after { +.ui.pointing.dropdown > .menu:after { top: @pointingArrowOffset; left: 50%; margin: 0em 0em 0em @pointingArrowOffset; } -.ui.top.left.pointing.dropdown .menu { +.ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: @pointingArrowDistanceFromEdge 0em 0em; } -.ui.top.left.pointing.dropdown .menu:after { +.ui.top.left.pointing.dropdown > .menu:after { top: @pointingArrowOffset; left: @pointingArrowDistanceFromEdge; right: auto; margin: 0em; transform: rotate(45deg); } -.ui.top.right.pointing.dropdown .menu { +.ui.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; right: 0%; left: auto; margin: @pointingArrowDistanceFromEdge 0em 0em; } -.ui.top.right.pointing.dropdown .menu:after { +.ui.top.right.pointing.dropdown > .menu:after { top: @pointingArrowOffset; left: auto; right: @pointingArrowDistanceFromEdge; @@ -621,26 +666,26 @@ select.ui.dropdown { transform: rotate(45deg); } -.ui.left.pointing.dropdown .menu { +.ui.left.pointing.dropdown > .menu { top: 0%; left: 100%; right: auto; margin: 0em 0em 0em @pointingArrowDistanceFromEdge; } -.ui.left.pointing.dropdown .menu:after { +.ui.left.pointing.dropdown > .menu:after { top: 1em; left: @pointingArrowOffset; margin: 0em 0em 0em 0em; transform: rotate(-45deg); } -.ui.right.pointing.dropdown .menu { +.ui.right.pointing.dropdown > .menu { top: 0%; left: auto; right: 100%; margin: 0em @pointingArrowDistanceFromEdge 0em 0em; } -.ui.right.pointing.dropdown .menu:after { +.ui.right.pointing.dropdown > .menu:after { top: 1em; left: auto; right: @pointingArrowOffset; diff --git a/src/themes/packages/default/elements/input.variables b/src/themes/packages/default/elements/input.variables index 8c9e9b575..0498121ca 100755 --- a/src/themes/packages/default/elements/input.variables +++ b/src/themes/packages/default/elements/input.variables @@ -40,11 +40,11 @@ @iconFocusOpacity: 1; @iconSpacing: 0.5em; @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 */ @circularIconVerticalOffset: 0.35em; diff --git a/src/themes/packages/default/elements/label.variables b/src/themes/packages/default/elements/label.variables index 6755e2282..ff601e375 100755 --- a/src/themes/packages/default/elements/label.variables +++ b/src/themes/packages/default/elements/label.variables @@ -9,7 +9,7 @@ @verticalAlign: baseline; -@verticalMargin: 0.25em; +@verticalMargin: 0em; @horizontalMargin: 0.125em; @backgroundColor: #E8E8E8; @backgroundImage: none; @@ -114,6 +114,7 @@ /* Circular Padding */ @circularPadding: 0.5em; @circularMinSize: 2em; +@emptyCircleSize: 0.5em; /* Pointing */ @pointingTriangleSize: 0.6em; diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index face682e6..545237627 100755 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -20,10 +20,6 @@ /* Icon */ @dropdownIconMargin: 0em 0em 0em 1em; -/* Sub Menu Pointer Icon */ -@dropdownSubMenuIconFloat: right; -@dropdownSubMenuIconMargin: 0em 0em 0em 0.5em; - /* Current Text */ @textTransition: color 0.2s @defaultEasing; @@ -33,6 +29,7 @@ @menuPadding: 0em 0em; @menuTop: 100%; @menuWrap: nowrap; +@menuTextAlign: left; @menuBorder: 1px solid @borderColor; @menuBoxShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15); @@ -46,26 +43,57 @@ @itemHeight: auto; @itemDivider: none; @itemColor: @textColor; -@itemVerticalPadding: 0.85em; -@itemHorizontalPadding: 0.8em; +@itemVerticalPadding: 0.65rem; +@itemHorizontalPadding: 1.25rem; @itemFontWeight: normal; @itemLineHeight: 1.2; -@itemTextAlign: left; @itemTextTransform: 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 */ @itemIconMargin: 0em 0.75em 0em 0em; +@itemLabelMargin: @itemIconMargin; +@itemFlagMargin: @itemIconMargin; +@itemImageMargin: @itemIconMargin; /* Sub Menu */ @subMenuTop: 0%; @subMenuLeft: 100%; @subMenuRight: auto; -@subMenuMargin: 0em; +@subMenuDistanceAway: -0.5em; +@subMenuMargin: 0em 0em 0em @subMenuDistanceAway; @subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; /*------------------- - Types +b Types --------------------*/ /* Selection */ @@ -143,6 +171,11 @@ @selectedBackground: @subtleTransparentBlack; @selectedColor: @selectedTextColor; +/* Error */ +@errorItemTextColor: #D95C5C; +@errorItemHoverBackground: #FFF2F2; +@errorItemActiveBackground: #FDCFCF; + /*------------------- Variations --------------------*/ @@ -153,10 +186,7 @@ /* Floating */ @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; /* Pointing */