From 99eecc2ddda9091fbe1b7c78eae8db9643476abf Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 31 Jul 2014 17:29:37 -0400 Subject: [PATCH] Initial commit of themed dropdowns --- server/documents/modules/dropdown.html.eco | 11 +- server/files/stylesheets/semantic.css | 6 +- server/partials/header.html.eco | 2 +- src/definitions/modules/dropdown.less | 428 +++++++++--------- .../default/collections/form.variables | 1 - .../default/modules/dropdown.overrides | 54 +++ .../default/modules/dropdown.variables | 141 +++++- 7 files changed, 414 insertions(+), 229 deletions(-) diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index 776877e93..20aba979a 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -5,10 +5,18 @@ css : 'dropdown' title : 'Dropdown' description : 'A dropdown is a hidden list of selections that a user can choose to have appear' type : 'UI Module' + +element : 'dropdown' +elementType : 'module' + +themes : ['Default'] --- + + + <%- @partial('header', { tabs: 'module' }) %>
@@ -58,7 +66,7 @@ type : 'UI Module'

Selection

-

A dropdown can be formatted to allow selection of a menu choice.

+

A dropdown can point to other content to show its relationship

Gender
@@ -66,6 +74,7 @@ type : 'UI Module'
Male
Female
+
Unknown
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index dfb497a2a..c9af4da77 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -49,6 +49,7 @@ body#example { padding: 0px; color: #555555; min-width: 320px; + font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important; } body > .content { background: #FCFCFC url(../images/bg.jpg) repeat; @@ -59,7 +60,7 @@ h2, h3, h4, h5 { - font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif/*rtl:prepend:"Droid Arabic Kufi","Droid Sans", */; + font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif/*rtl:prepend:"Droid Arabic Kufi","Droid Sans", */ !important; } p:first-child { @@ -416,9 +417,6 @@ body.guide .main.container > * { vertical-align: top; width: 100%; } -#example .introduction h1 { - margin-bottom: 0em; -} #example .introduction .theme.buttons { margin: -0.1em 0em 0em 0.5em; diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco index eee6c4877..4066ddc62 100755 --- a/server/partials/header.html.eco +++ b/server/partials/header.html.eco @@ -4,7 +4,7 @@
-

+

<%=@document.title %> <% if @document.status?: %><%= @document.status %><% end %>

diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 4e9309e74..dd0b7aae9 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -27,11 +27,8 @@ cursor: pointer; position: relative; display: inline-block; - line-height: 1; - transition: - border-radius 0.1s ease, - width 0.2s ease - ; + line-height: @lineHeight; + transition: @transition; tap-highlight-color: rgba(0, 0, 0, 0); } @@ -50,18 +47,18 @@ display: none; top: 100%; - margin: 0em; - background-color: #FFFFFF; + margin: @menuMargin; + background: @menuBackground; min-width: 100%; - white-space: nowrap; - font-size: 0.875em; + white-space: @menuWrap; + font-size: 1rem; text-shadow: none; - box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); - border-radius: 0px 0px 0.325em 0.325em; - transition: opacity 0.2s ease; - z-index: 11; + box-shadow: @menuBoxShadow; + border-radius: @menuBorderRadius; + transition: @menuTransition; + z-index: @menuZIndex; } /*-------------- @@ -70,19 +67,12 @@ .ui.dropdown > .dropdown.icon { width: auto; - margin: 0em 0em 0em 1em; -} - -.ui.dropdown > .dropdown.icon:before { - content: "\f0d7"; + margin: @dropdownIconMargin; } .ui.dropdown .menu .item .dropdown.icon { width: auto; - float: right; - margin: 0em 0em 0em 0.5em; -} -.ui.dropdown .menu .item .dropdown.icon:before { - content: "\f0da"/*rtl:"\f0d9"*/; + float: @dropdownSubMenuIconFloat; + margin: @dropdownSubMenuIconMargin; } @@ -92,74 +82,182 @@ .ui.dropdown > .text { display: inline-block; - transition: color 0.2s ease; + transition: @textTransition; } -/* Flyout Direction */ -.ui.dropdown .menu { - left: 0px; -} - - /*-------------- - Sub Menu + Menu Item ---------------*/ -.ui.dropdown .menu .menu { - top: 0% !important; - left: 100% !important; - margin: 0em !important; - border-radius: 0 0.325em 0.325em 0em !important; -} -.ui.dropdown .menu .menu:after { - display: none; -} - .ui.dropdown .menu .item { cursor: pointer; - border: none; - height: auto; - - border-top: 1px solid rgba(0, 0, 0, 0.1); - font-size: 0.875em; display: block; - color: rgba(0, 0, 0, 0.75); + border: @itemBorder; + height: @itemHeight; - padding: 0.85em 1em !important; - font-size: 0.875rem; - text-transform: none; - font-weight: normal; - text-align: left; + border-top: @itemDivider; + font-size: @itemFontSize; + color: @itemColor; + padding: @itemVerticalPadding @itemHorizontalPadding !important; + font-size: @itemFontSize; + text-transform: @itemTextTransform; + font-weight: @itemFontWeight; + text-align: @itemTextAlign; + + box-shadow: @itemBoxShadow; -webkit-touch-callout: none; } -.ui.dropdown .menu .item:before { - display: none; -} .ui.dropdown .menu .item .icon { - margin-right: 0.75em; + margin: @itemIconMargin; } .ui.dropdown .menu .item:first-child { border-top: none; } +/*-------------- + Item Image +---------------*/ + +.ui.dropdown .menu .item > img { + height: 2.5em; + display: inline-block; + vertical-align: middle; + margin-right: 0.5em; +} + + +/*-------------- + Sub Menu +---------------*/ + +.ui.dropdown .menu .menu { + top: @subMenuTop !important; + left: @subMenuLeft !important; + right: @subMenuRight !important; + margin: @subMenuMargin !important; + border-radius: @subMenuBorderRadius !important; +} + +/* Hide Arrow */ +.ui.dropdown .menu .menu:after { + display: none; +} + /******************************* Coupling *******************************/ -/* Opposite on last menu on right */ +/* Remove Menu Item Divider */ +.ui.dropdown .ui.menu .item:before, +.ui.menu .ui.dropdown .menu .item:before { + display: none; +} + +/* Prevent Menu Item Border */ +.ui.menu .ui.dropdown .menu .active.item { + border-left: none; +} + +/* No Margin On Icon Button */ +.ui.dropdown.icon.button > .dropdown.icon { + margin: 0em; +} + +/* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.buttons > .ui.dropdown:last-child .menu { left: auto; - right: 0px; + right: 0em; } -.ui.vertical.menu .dropdown.item > .dropdown.icon:before { - content: "\f0da"/*rtl:"\f0d9"*/; + + +/******************************* + Types +*******************************/ + +/*-------------- + Selection +---------------*/ +/* Displays like a select box */ + +.ui.selection.dropdown { + cursor: pointer; + word-wrap: break-word; + white-space: normal; + background: @selectionBackground; + display: @selectionDisplay; + padding: @selectionVerticalPadding @selectionHorizontalPadding; + color: @selectionTextColor; + box-shadow: @selectionBoxShadow !important; + border-radius: @selectionBorderRadius !important; + + /* Matches selection dropdown height to input height */ + border-top: 1px solid transparent; } -.ui.dropdown.icon.button > .dropdown.icon { - margin: 0em; +.ui.selection.dropdown select { + display: none; +} +.ui.selection.dropdown > .dropdown.icon { + opacity: @selectionIconOpacity; + margin: @selectionIconMargin; + transition: @selectionIconTransition; +} + +.ui.selection.dropdown .menu { + overflow-x: hidden; + overflow-y: auto; + max-height: @selectionMenuMaxHeight; + box-shadow: @selectionMenuBoxShadow; +} +.ui.selection.dropdown .menu:after, +.ui.selection.dropdown .menu:before { + display: none; +} + +/* Hover */ +.ui.selection.dropdown:hover { + box-shadow: @selectionHoverBoxShadow !important; +} +.ui.selection.dropdown:hover .menu { + box-shadow: @selectionHoverMenuBoxShadow; +} +.ui.selection.dropdown:hover > .dropdown.icon { + opacity: @selectionHoverIconOpacity; +} + +/* Connecting Border */ +.ui.active.selection.dropdown, +.ui.visible.selection.dropdown { + border-bottom-left-radius: @selectionVisibleConnectingBorder !important; + border-bottom-right-radius: @selectionVisibleConnectingBorder !important; +} + +.ui.active.selection.dropdown > .dropdown.icon { + opacity: @selectionActiveIconOpacity; +} + +/*-------------- + Inline +---------------*/ + +.ui.inline.dropdown { + cursor: pointer; + display: inline-block; + color: @inlineTextColor; +} +.ui.inline.dropdown .dropdown.icon { + margin: @inlineIconMargin; +} +.ui.inline.dropdown .text { + font-weight: @inlineTextFontWeight; +} +.ui.inline.dropdown .menu { + cursor: auto; + margin-top: @inlineMenuDistance; + border-radius: 0.325em; } @@ -188,13 +286,11 @@ /* Menu Item Active */ .ui.dropdown .menu .active.item { - box-shadow: none; - font-weight: bold; - border-left: none; - background-color: rgba(0, 0, 0, 0.03); - - box-shadow: none; - z-index: 12; + background: @activeItemBackground; + font-weight: @activeItemFontWeight; + color: @activeItemColor; + box-shadow: @activeItemBoxShadow; + z-index: @activeItemZIndex; } /*-------------------- @@ -203,11 +299,11 @@ .ui.dropdown > .default.text, .ui.default.dropdown > .text { - color: rgba(179, 179, 179, 0.7); + color: @defaultTextColor; } .ui.dropdown:hover > .default.text, .ui.default.dropdown:hover > .text { - color: rgba(140, 140, 140, 0.7); + color: @defaultTextHoverColor; } /*-------------------- @@ -217,21 +313,21 @@ .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text { - color: #D95C5C !important; + color: @errorTextColor !important; } .ui.selection.dropdown.error { - background-color: #FFFAFA; - box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; + background: @errorBackgroundColor; + box-shadow: 0px 0px 0px 1px @errorBorderColor !important; } .ui.selection.dropdown.error:hover { - box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; + box-shadow: 0px 0px 0px 1px @errorBorderColor !important; } .ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu { - box-shadow: 0px 0px 1px 1px #E7BEBE !important; + box-shadow: 0px 0px 1px 1px @errorBorderColor !important; } .ui.dropdown.error > .menu .item { @@ -253,9 +349,20 @@ Variations *******************************/ +/*-------------- + Direction +---------------*/ + +/* Flyout Direction */ +.ui.dropdown .menu { + left: 0px; +} + + /*-------------- Simple ---------------*/ + /* Displays without javascript */ .ui.simple.dropdown .menu:before, @@ -263,14 +370,14 @@ display: none; } .ui.simple.dropdown .menu { + position: absolute; display: block; overflow: hidden; top: -9999px !important; - position: absolute; opacity: 0; width: 0; height: 0; - transition: opacity 0.2s ease-out; + transition: @simpleTransition; } .ui.simple.active.dropdown, @@ -304,91 +411,6 @@ } -/*-------------- - Selection ----------------*/ -/* Displays like a select box */ - -.ui.selection.dropdown { - cursor: pointer; - display: inline-block; - - word-wrap: break-word; - white-space: normal; - - /* Matches selection dropdown height to input height */ - border-top: 1px solid transparent; - - background-color: #FFFFFF; - padding: 0.65em 1em; - - line-height: 1.33; - color: rgba(0, 0, 0, 0.8); - - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; - - border-radius: 0.3125em !important; -} -.ui.selection.dropdown select { - display: none; -} -.ui.selection.dropdown > .dropdown.icon { - opacity: 0.7; - margin: 0.2em 0em 0.2em 1.25em; - - transition: opacity 0.2s ease-out; -} - -.ui.selection.dropdown, -.ui.selection.dropdown .menu { - top: 100%; - transition: box-shadow 0.2s ease-out; -} - -.ui.selection.dropdown .menu { - max-height: 312px; - - overflow-x: hidden; - overflow-y: auto; - - box-shadow: 0px 1px 0px 1px #E0E0E0; - border-radius: 0px 0px 0.325em 0.325em; -} -.ui.selection.dropdown .menu:after, -.ui.selection.dropdown .menu:before { - display: none; -} -.ui.selection.dropdown .menu img { - height: 2.5em; - display: inline-block; - vertical-align: middle; - margin-right: 0.5em; -} - -/* Hover */ -.ui.selection.dropdown:hover { - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; -} -.ui.selection.dropdown:hover .menu { - box-shadow: 0px 1px 0px 1px #D3D3D3; -} -.ui.selection.dropdown:hover > .dropdown.icon { - opacity: 1; -} - -/* Visible */ -.ui.visible.selection.dropdown { - border-bottom-left-radius: 0em !important; - border-bottom-right-radius: 0em !important; -} - -/* Active */ -.ui.active.selection.dropdown { - border-radius: 0.3125em 0.3125em 0em 0em !important; -} -.ui.active.selection.dropdown > .dropdown.icon { - opacity: 1; -} /*-------------- Fluid @@ -401,26 +423,6 @@ float: right; } -/*-------------- - Inline ----------------*/ - -.ui.inline.dropdown { - cursor: pointer; - display: inline-block; - color: inherit; -} -.ui.inline.dropdown .dropdown.icon { - margin: 0em 0.5em 0em 0.25em; -} -.ui.inline.dropdown .text { - font-weight: bold; -} -.ui.inline.dropdown .menu { - cursor: auto; - margin-top: 0.25em; - border-radius: 0.325em; -} /*-------------- Floating @@ -429,14 +431,9 @@ .ui.floating.dropdown .menu { left: 0; right: auto; - - margin-top: 0.5em !important; - - box-shadow: - 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset, - 0px 2px 5px 0px rgba(0, 0, 0, 0.15) - ; - border-radius: 0.325em; + margin-top: @floatingMenuDistance !important; + box-shadow: @floatingMenuBoxShadow; + border-radius: @floatingMenuBorderRadius; } /*-------------- @@ -446,50 +443,41 @@ .ui.pointing.dropdown .menu { top: 100%; - margin-top: 0.75em; - border-radius: 0.325em; + margin-top: @pointingMenuDistance; + border-radius: @pointingMenuBorderRadius; } .ui.pointing.dropdown .menu:after { display: block; position: absolute; pointer-events: none; - content: " "; + content: ''; visibility: visible; - - width: 0.5em; - height: 0.5em; - - box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); - - background-image: none; - background-color: #FFFFFF; - transform: rotate(45deg); - z-index: 2; -} -.ui.pointing.dropdown .menu .active.item:first-child { - background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); + width: @pointingArrowSize; + height: @pointingArrowSize; + box-shadow: @pointingArrowBoxShadow; + background: @pointingArrowBackground; + z-index: @pointingArrowZIndex; } /* Directions */ - .ui.pointing.dropdown .menu:after { - top: -0.25em; + top: @pointingArrowOffset; left: 50%; - margin: 0em 0em 0em -0.25em; + margin: 0em 0em 0em @pointingArrowOffset; } .ui.top.left.pointing.dropdown .menu { top: 100%; bottom: auto; left: 0%; right: auto; - margin: 0.75em 0em 0em; + margin: @pointingArrowDistanceFromEdge 0em 0em; } .ui.top.left.pointing.dropdown .menu:after { - top: -0.25em; - left: 1.25em; + top: @pointingArrowOffset; + left: @pointingArrowDistanceFromEdge; right: auto; margin: 0em; transform: rotate(45deg); @@ -499,12 +487,12 @@ bottom: auto; right: 0%; left: auto; - margin: 0.75em 0em 0em; + margin: @pointingArrowDistanceFromEdge 0em 0em; } .ui.top.right.pointing.dropdown .menu:after { - top: -0.25em; + top: @pointingArrowOffset; left: auto; - right: 1.25em; + right: @pointingArrowDistanceFromEdge; margin: 0em; transform: rotate(45deg); } @@ -513,11 +501,11 @@ top: 0%; left: 100%; right: auto; - margin: 0em 0em 0em 0.75em; + margin: 0em 0em 0em @pointingArrowDistanceFromEdge; } .ui.left.pointing.dropdown .menu:after { top: 1em; - left: -0.25em; + left: @pointingArrowOffset; margin: 0em 0em 0em 0em; transform: rotate(-45deg); } @@ -526,12 +514,12 @@ top: 0%; left: auto; right: 100%; - margin: 0em 0.75em 0em 0em; + margin: 0em @pointingArrowDistanceFromEdge 0em 0em; } .ui.right.pointing.dropdown .menu:after { top: 1em; left: auto; - right: -0.25em; + right: @pointingArrowOffset; margin: 0em 0em 0em 0em; transform: rotate(135deg); } diff --git a/src/themes/packages/default/collections/form.variables b/src/themes/packages/default/collections/form.variables index e62d86906..1221f9b35 100755 --- a/src/themes/packages/default/collections/form.variables +++ b/src/themes/packages/default/collections/form.variables @@ -22,7 +22,6 @@ /* Input */ @inputWidth: 100%; @inputFontSize: 1em; -@inputColor: @textColor; @inputVerticalPadding: 0.65em; @inputHorizontalPadding: 1em; diff --git a/src/themes/packages/default/modules/dropdown.overrides b/src/themes/packages/default/modules/dropdown.overrides index c5c53367f..fd2dcfa27 100644 --- a/src/themes/packages/default/modules/dropdown.overrides +++ b/src/themes/packages/default/modules/dropdown.overrides @@ -1,3 +1,57 @@ /******************************* Overrides *******************************/ + +/* Dropdown Carets */ +@font-face { + font-family: 'Dropdown'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +.ui.dropdown > .dropdown.icon { + font-family: 'Dropdown'; + line-height: 1; + height: 1em; + width: 1.23em; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .dropdown.icon:before { + content: '\f0d7'; +} + +/* Sub Menu */ +.ui.dropdown .menu .item .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} + +/* Vertical Menu Dropdown */ +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da"/*rtl:"\f0d9"*/; +} + +/* Icons for Reference +.dropdown.down.icon { + content: "\f0d7"; +} +.dropdown.up.icon { + content: "\f0d8"; +} +.dropdown.left.icon { + content: "\f0d9"; +} +.dropdown.icon.icon { + content: "\f0da"; +} +*/ diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index 9570cd592..7bd4510fd 100644 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -1,3 +1,140 @@ /******************************* - Dropdown -*******************************/ \ No newline at end of file + Dropdown +*******************************/ + +/*------------------- + Element +--------------------*/ + +@lineHeight: 1; +@transition: + border-radius 0.1s ease, + width 0.2s ease +; +@borderRadius: 0.325em; + +/*------------------- + Content +--------------------*/ + +/* Icon */ +@dropdownIconMargin: 0em 0em 0em 1em; + +@dropdownSubMenuIconFloat: right; +@dropdownSubMenuIconMargin: 0em 0em 0em 0.5em; + +/* Current Text */ +@textTransition: color 0.2s @defaultEasing; + +/* Menu */ +@menuBackground: #FFFFFF; +@menuMargin: 0em; +@menuTop: 100%; +@menuWrap: nowrap; +@menuBoxShadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); +@menuBorderRadius: 0em 0em @borderRadius @borderRadius; +@menuTransition: opacity 0.2s ease; +@menuZIndex: 11; + +/* Menu Item */ +@itemFontSize: 1rem; +@itemBorder: none; +@itemHeight: auto; +@itemDivider: 1px solid @borderColor; +@itemColor: @textColor; +@itemVerticalPadding: 0.85em; +@itemHorizontalPadding: 1em; +@itemFontWeight: normal; +@itemTextAlign: left; +@itemTextTransform: none; +@itemBoxShadow: none; + +/* Menu Item Icon */ +@itemIconMargin: 0em 0.75em 0em 0em; + +/* Sub Menu */ +@subMenuTop: 0%; +@subMenuLeft: 100%; +@subMenuRight: auto; +@subMenuMargin: 0em; +@subMenuBorderRadius: 0em @borderRadius @borderRadius 0em; + +/*------------------- + Types +--------------------*/ + +/* Selection */ +@selectionBackground: @white; +@selectionDisplay: inline-block; +@selectionVerticalPadding: 0.65em; +@selectionHorizontalPadding: 1em; +@selectionTextColor: @textColor; +@selectionBoxShadow: 0px 0px 0px 1px @borderColor; +@selectionBorderRadius: @borderRadius; +@selectionIconOpacity: 0.8; +@selectionIconTransition: opacity 0.2s ease; +@selectionIconMargin: 0em 0em 0em 1em; +@selectionMenuMaxHeight: 312px; +@selectionMenuBoxShadow: 0px 1px 0px 1px #E0E0E0; +@selectionMenuItemBoxShadow: none; + +/* Selection Hover */ +@selectionHoverBoxShadow: 0px 0px 0px 1px @selectedBorderColor; +@selectionHoverMenuBoxShadow: 0px 1px 0px 1px #D3D3D3; +@selectionHoverIconOpacity: 1; + +@selectionVisibleConnectingBorder: 0em; +@selectionActiveIconOpacity: 1; + +/* Inline */ +@inlineIconMargin: 0em 0.5em 0em 0.25em; +@inlineTextColor: inherit; +@inlineTextFontWeight: bold; +@inlineMenuDistance: 0.25em; +@inlineMenuBorderRadius: @borderRadius; + +/*------------------- + States +--------------------*/ + +/* Default Text */ +@defaultTextColor: rgba(179, 179, 179, 0.7); +@defaultTextHoverColor: rgba(140, 140, 140, 0.7); + +/* Active Menu Item */ +@activeItemBackground: @transparentBlack; +@activeItemZIndex: @menuZIndex + 1; +@activeItemBoxShadow: none; +@activeItemFontWeight: bold; +@activeItemColor: @selectedTextColor; + +/* Menu Error */ + + +/*------------------- + Variations +--------------------*/ + +/* Simple */ +@simpleTransitionDuration: 0.2s; +@simpleTransition: opacity @simpleTransitionDuration @defaultEasing; + +/* 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) +; +@floatingMenuBorderRadius: @borderRadius; + +/* Pointing */ +@pointingArrowOffset: -0.25em; +@pointingArrowDistanceFromEdge: 1em; + +@pointingArrowBackground: @white; +@pointingArrowZIndex: 2; +@pointingArrowBoxShadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); +@pointingArrowSize: 0.5em; + +@pointingMenuDistance: 0.75em; +@pointingMenuBorderRadius: @borderRadius; \ No newline at end of file