Browse Source

Initial commit of themed dropdowns

pull/993/head
jlukic 10 years ago
parent
commit
99eecc2ddd
7 changed files with 414 additions and 229 deletions
  1. 11
      server/documents/modules/dropdown.html.eco
  2. 6
      server/files/stylesheets/semantic.css
  3. 2
      server/partials/header.html.eco
  4. 428
      src/definitions/modules/dropdown.less
  5. 1
      src/themes/packages/default/collections/form.variables
  6. 54
      src/themes/packages/default/modules/dropdown.overrides
  7. 141
      src/themes/packages/default/modules/dropdown.variables

11
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']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/dropdown.less" />
<script src="/javascript/dropdown.js"></script>
<%- @partial('header', { tabs: 'module' }) %>
<div class="main container">
@ -58,7 +66,7 @@ type : 'UI Module'
<div class="dropdown example">
<h4 class="ui header">Selection</h4>
<p>A dropdown can be formatted to allow selection of a menu choice.</p>
<p>A dropdown can point to other content to show its relationship</p>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
@ -66,6 +74,7 @@ type : 'UI Module'
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
<div class="item" data-value="2">Unknown</div>
</div>
</div>
</div>

6
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;

2
server/partials/header.html.eco

@ -4,7 +4,7 @@
<div class="container">
<div class="introduction">
<h1 class="ui header">
<h1 class="ui dividing header">
<%=@document.title %>
<% if @document.status?: %><span class="ui label"><%= @document.status %></span><% end %>
</h1>

428
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);
}

1
src/themes/packages/default/collections/form.variables

@ -22,7 +22,6 @@
/* Input */
@inputWidth: 100%;
@inputFontSize: 1em;
@inputColor: @textColor;
@inputVerticalPadding: 0.65em;
@inputHorizontalPadding: 1em;

54
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";
}
*/

141
src/themes/packages/default/modules/dropdown.variables

@ -1,3 +1,140 @@
/*******************************
Dropdown
*******************************/
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;
Loading…
Cancel
Save