From d84de60120315f27ecce5c8fe65a91ab463ad54f Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 19 Sep 2014 17:53:22 -0400 Subject: [PATCH] Rebuild files --- build/less/definitions/collections/form.less | 72 +-- build/less/definitions/collections/grid.less | 117 ++-- build/less/definitions/elements/button.less | 144 ++++- build/less/definitions/elements/progress.less | 1 + build/less/definitions/modules/accordion.js | 24 +- build/less/definitions/modules/checkbox.js | 2 +- build/less/definitions/modules/dropdown.js | 63 +- build/less/definitions/modules/dropdown.less | 14 +- build/less/definitions/modules/modal.js | 12 + build/less/definitions/modules/modal.less | 10 + build/less/definitions/modules/popup.js | 20 +- build/less/definitions/modules/transition.js | 4 +- build/less/definitions/views/card.less | 2 + .../default/collections/form.variables | 47 +- .../default/collections/menu.variables | 2 +- .../default/elements/header.variables | 10 +- .../packages/default/modules/sticky.variables | 4 +- .../packages/raised/elements/button.variables | 9 +- .../collections/breadcrumb.min.css | 2 +- .../definitions/collections/form.min.css | 4 +- .../definitions/collections/grid.min.css | 4 +- .../definitions/collections/menu.min.css | 4 +- .../definitions/collections/message.min.css | 2 +- .../definitions/collections/table.min.css | 2 +- .../definitions/elements/button.min.css | 4 +- .../definitions/elements/divider.min.css | 2 +- .../definitions/elements/flag.min.css | 2 +- .../definitions/elements/header.min.css | 4 +- .../definitions/elements/icon.min.css | 2 +- .../definitions/elements/image.min.css | 2 +- .../definitions/elements/input.min.css | 2 +- .../definitions/elements/label.min.css | 2 +- .../definitions/elements/list.min.css | 2 +- .../definitions/elements/loader.min.css | 2 +- .../definitions/elements/progress.min.css | 4 +- .../definitions/elements/rail.min.css | 2 +- .../definitions/elements/reveal.min.css | 2 +- .../definitions/elements/segment.min.css | 2 +- .../definitions/elements/step.min.css | 2 +- .../definitions/globals/reset.min.css | 2 +- .../minified/definitions/globals/site.min.css | 2 +- .../definitions/modules/accordion.min.css | 2 +- .../definitions/modules/accordion.min.js | 2 +- .../definitions/modules/chatroom.min.css | 2 +- .../definitions/modules/checkbox.min.css | 2 +- .../definitions/modules/checkbox.min.js | 2 +- .../definitions/modules/dimmer.min.css | 2 +- .../definitions/modules/dropdown.min.css | 4 +- .../definitions/modules/dropdown.min.js | 2 +- .../definitions/modules/modal.min.css | 4 +- .../minified/definitions/modules/modal.min.js | 2 +- .../minified/definitions/modules/nag.min.css | 2 +- .../definitions/modules/popup.min.css | 2 +- .../minified/definitions/modules/popup.min.js | 2 +- .../definitions/modules/rating.min.css | 2 +- .../definitions/modules/search.min.css | 4 +- .../definitions/modules/shape.min.css | 2 +- .../definitions/modules/sidebar.min.css | 2 +- .../definitions/modules/sticky.min.css | 4 +- .../minified/definitions/modules/tab.min.css | 2 +- .../definitions/modules/transition.min.css | 2 +- .../definitions/modules/transition.min.js | 2 +- .../definitions/modules/video.min.css | 2 +- build/minified/definitions/views/card.min.css | 4 +- .../definitions/views/comment.min.css | 2 +- build/minified/definitions/views/feed.min.css | 2 +- build/minified/definitions/views/item.min.css | 2 +- .../definitions/views/statistic.min.css | 2 +- build/packaged/definitions/css/semantic.css | 590 +++++++++++------- .../packaged/definitions/css/semantic.min.css | 4 +- .../definitions/javascript/semantic.js | 125 +++- .../definitions/javascript/semantic.min.js | 12 +- .../definitions/collections/breadcrumb.css | 4 +- .../definitions/collections/form.css | 62 +- .../definitions/collections/grid.css | 112 ++-- .../definitions/collections/menu.css | 8 +- .../definitions/collections/message.css | 4 +- .../definitions/collections/table.css | 4 +- .../definitions/elements/button.css | 148 ++++- .../definitions/elements/divider.css | 4 +- .../definitions/elements/flag.css | 4 +- .../definitions/elements/header.css | 24 +- .../definitions/elements/icon.css | 4 +- .../definitions/elements/image.css | 4 +- .../definitions/elements/input.css | 4 +- .../definitions/elements/label.css | 4 +- .../definitions/elements/list.css | 10 +- .../definitions/elements/loader.css | 4 +- .../definitions/elements/progress.css | 5 +- .../definitions/elements/rail.css | 4 +- .../definitions/elements/segment.css | 4 +- .../definitions/elements/step.css | 4 +- .../definitions/globals/reset.css | 4 +- .../uncompressed/definitions/globals/site.css | 4 +- .../definitions/modules/accordion.css | 4 +- .../definitions/modules/accordion.js | 24 +- .../definitions/modules/chatroom.css | 4 +- .../definitions/modules/checkbox.css | 4 +- .../definitions/modules/checkbox.js | 2 +- .../definitions/modules/dimmer.css | 4 +- .../definitions/modules/dropdown.css | 16 +- .../definitions/modules/dropdown.js | 63 +- .../definitions/modules/modal.css | 12 +- .../uncompressed/definitions/modules/modal.js | 12 + .../uncompressed/definitions/modules/nag.css | 4 +- .../definitions/modules/popup.css | 4 +- .../uncompressed/definitions/modules/popup.js | 20 +- .../definitions/modules/rating.css | 4 +- .../definitions/modules/search.css | 54 +- .../definitions/modules/shape.css | 4 +- .../definitions/modules/sidebar.css | 4 +- .../definitions/modules/sticky.css | 8 +- .../uncompressed/definitions/modules/tab.css | 4 +- .../definitions/modules/transition.css | 4 +- .../definitions/modules/transition.js | 4 +- .../definitions/modules/video.css | 4 +- build/uncompressed/definitions/views/card.css | 7 +- .../definitions/views/comment.css | 4 +- build/uncompressed/definitions/views/feed.css | 4 +- build/uncompressed/definitions/views/item.css | 4 +- .../definitions/views/statistic.css | 4 +- 121 files changed, 1345 insertions(+), 780 deletions(-) diff --git a/build/less/definitions/collections/form.less b/build/less/definitions/collections/form.less index ca92e6b26..682433d7c 100644 --- a/build/less/definitions/collections/form.less +++ b/build/less/definitions/collections/form.less @@ -56,17 +56,22 @@ Labels ---------------------*/ -.ui.form .grouped.fields > label, -.ui.form .inline.fields > label, .ui.form .field > label { - margin: 0em 0em @labelDistance 0em; display: block; - + margin: @labelMargin; color: @labelColor; font-size: @labelFontSize; font-weight: @labelFontWeight; text-transform: @labelTextTransform; } +.ui.form .grouped.fields > label, +.ui.form .inline.fields > label { + margin: @groupedLabelMargin; + color: @groupedLabelColor; + font-size: @groupedLabelFontSize; + font-weight: @groupedLabelFontWeight; + text-transform: @groupedLabelTextTransform; +} /*-------------------- Standard Inputs @@ -114,24 +119,20 @@ .ui.textarea, .ui.form textarea { margin: 0em; - padding: @inputVerticalPadding @inputHorizontalPadding; - font-size: @inputFontSize; + -webkit-appearance: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + box-sizing: border-box; - background: @inputBackground; - border: @inputBorder; + padding: @textAreaPadding; + font-size: @textAreaFontSize; + background: @textAreaBackground; + border: @textAreaBorder; outline: none; - color: @inputColor; border-radius: @inputBorderRadius; box-shadow: @inputBoxShadow; - - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - box-sizing: border-box; - transition: @inputTransition; - + transition: @textAreaTransition; font-size: @textAreaFontSize; - height: @textAreaHeight; min-height: @textAreaMinHeight; max-height: @textAreaMaxHeight; @@ -263,13 +264,19 @@ .ui.form input[type="password"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="url"]:focus, -.ui.form input[type="tel"]:focus, -.ui.form textarea:focus{ +.ui.form input[type="tel"]:focus { color: @inputFocusColor; border-color: @inputFocusBorderColor; border-radius: @inputFocusBorderRadius; background: @inputFocusBackground; box-shadow: @inputFocusBoxShadow; +} +.ui.form textarea:focus { + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; -webkit-appearance: none; } @@ -465,24 +472,6 @@ color: @requiredColor; } -/*-------------------- - Date Input ----------------------*/ - -.ui.form .date.field > label { - position: relative; -} -.ui.form .date.field > label:after { - position: absolute; - top: 2em; - right: 0.5em; - font-family: 'Icons'; - content: '\f133'; - font-size: 1.2em; - font-weight: normal; - color: #CCCCCC; -} - /******************************* Variations @@ -522,9 +511,6 @@ margin: @groupedFieldMargin; padding: 0em; } -.ui.form .inline.grouped.fields > label { - margin-bottom: @inlineGroupedFieldLabelDistance; -} /*-------------------- Fields @@ -546,8 +532,8 @@ clear: none; float: left; box-sizing: border-box; - padding-left: @gutterWidth; - padding-right: @gutterWidth; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); } .ui.form .fields > .field:first-child { border-left: none; @@ -600,8 +586,8 @@ .ui.form .fields .wide.field { width: @oneWide; - padding-left: @gutterWidth; - padding-right: @gutterWidth; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); } .ui.form .fields .wide.field:first-child { padding-left: 0%; diff --git a/build/less/definitions/collections/grid.less b/build/less/definitions/collections/grid.less index b7a37f4d3..7f680572d 100644 --- a/build/less/definitions/collections/grid.less +++ b/build/less/definitions/collections/grid.less @@ -505,15 +505,25 @@ Divided -----------------------*/ +.ui.divided.grid:not(.vertically) > .column:not(.row), +.ui.divided.grid:not(.vertically) > .row > .column { + box-shadow: @dividedBorder; +} + +/* Swap from padding to margin on columns to have dividers align */ .ui.divided.grid:not(.vertically) > .column:not(.row), .ui.divided.grid:not(.vertically) > .row > .column { margin-top: (@rowSpacing / 2); margin-bottom: (@rowSpacing / 2); padding-top: 0rem; padding-bottom: 0rem; - box-shadow: @dividedBorder; +} +.ui.divided.grid:not(.vertically) > .row { + margin-top: 0em; + margin-bottom: 0em; } +/* No divider on first column on row */ .ui.divided.grid:not(.vertically) > .column:first-child, .ui.divided.grid:not(.vertically) > .row > .column:first-child { box-shadow: none; @@ -818,57 +828,6 @@ } -/*---------------------- - Only (Device) ------------------------*/ - -/* Mobile Only Hide */ -@media only screen and ( max-width: @largestMobileScreen ) { - .ui.tablet:not(.mobile).only.grid, - .ui.grid > [class*="tablet only"].row:not(.mobile), - .ui.grid > [class*="tablet only"].column:not(.mobile), - .ui.grid > .row > [class*="tablet only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="computer only"].grid:not(.mobile), - .ui.grid > [class*="computer only"].row:not(.mobile), - .ui.grid > [class*="computer only"].column:not(.mobile), - .ui.grid > .row > [class*="computer only"].column:not(.mobile) { - display: none !important; - } -} -/* Tablet Only Hide */ -@media only screen and (min-width: (@tabletBreakpoint)) and (max-width: @largestTabletScreen ) { - .ui[class*="mobile only"].grid:not(.tablet), - .ui.grid > [class*="mobile only"].row:not(.tablet), - .ui.grid > [class*="mobile only"].column:not(.tablet), - .ui.grid > .row > [class*="mobile only"].column:not(.tablet) { - display: none !important; - } - .ui[class*="computer only"].grid:not(.tablet), - .ui.grid > [class*="computer only"].row:not(.tablet), - .ui.grid > [class*="computer only"].column:not(.tablet), - .ui.grid > .row > [class*="computer only"].column:not(.tablet) { - display: none !important; - } -} - -/* Computer Only Hide */ -@media only screen and ( min-width: (@computerBreakpoint) ) { - .ui[class*="mobile only"].grid:not(.computer), - .ui.grid > [class*="mobile only"].row:not(.computer), - .ui.grid > [class*="mobile only"].column:not(.computer), - .ui.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - .ui[class*="tablet only"].grid:not(.computer), - .ui.grid > [class*="tablet only"].row:not(.computer), - .ui.grid > [class*="tablet only"].column:not(.computer), - .ui.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } -} - /*------------------- Doubling --------------------*/ @@ -1076,4 +1035,58 @@ } +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and ( max-width: @largestMobileScreen ) { + .ui.tablet:not(.mobile).only.grid.grid.grid, + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } +} +/* Tablet Only Hide */ +@media only screen and (min-width: @tabletBreakpoint ) and (max-width: @largestTabletScreen) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and ( min-width: (@computerBreakpoint) ) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + .loadUIOverrides(); \ No newline at end of file diff --git a/build/less/definitions/elements/button.less b/build/less/definitions/elements/button.less index d11f179a6..b38b9d75c 100644 --- a/build/less/definitions/elements/button.less +++ b/build/less/definitions/elements/button.less @@ -1193,6 +1193,12 @@ background-color: @lightBlack; color: @white; } +.ui.inverted.black.buttons .button.active, +.ui.inverted.black.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; + background-color: @lightBlack; + color: @white; +} .ui.inverted.black.buttons .button:active, .ui.inverted.black.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; @@ -1214,6 +1220,12 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; color: @white !important; } +.ui.inverted.black.basic.buttons .button.active, +.ui.inverted.black.buttons .basic.button.active, +.ui.inverted.black.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlack inset !important; + color: @white !important; +} .ui.inverted.black.basic.buttons .button:active, .ui.inverted.black.buttons .basic.button:active, .ui.inverted.black.basic.button:active { @@ -1291,13 +1303,19 @@ .ui.inverted.blue.button:hover { box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; background-color: @lightBlue; - color: @black; + color: @white; +} +.ui.inverted.blue.buttons .button.active, +.ui.inverted.blue.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; + background-color: @lightBlue; + color: @white; } .ui.inverted.blue.buttons .button:active, .ui.inverted.blue.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; background-color: @lightBlueDown; - color: @black; + color: @white; } /* Inverted Basic */ @@ -1314,11 +1332,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; color: @lightBlue !important; } +.ui.inverted.blue.basic.buttons .button.active, +.ui.inverted.blue.buttons .basic.button.active, +.ui.inverted.blue.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; + color: @lightBlue !important; +} .ui.inverted.blue.basic.buttons .button:active, .ui.inverted.blue.buttons .basic.button:active, .ui.inverted.blue.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; - color: @lightBlueDown !important; + color: @lightBlue !important; } /*--- Green ---*/ @@ -1389,13 +1413,19 @@ .ui.inverted.green.button:hover { box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; background-color: @lightGreen; - color: @black; + color: @white; +} +.ui.inverted.green.buttons .button.active, +.ui.inverted.green.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; + background-color: @lightGreen; + color: @white; } .ui.inverted.green.buttons .button:active, .ui.inverted.green.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; background-color: @lightGreenDown; - color: @black; + color: @white; } /* Inverted Basic */ @@ -1412,11 +1442,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; color: @lightGreen !important; } +.ui.inverted.green.basic.buttons .button.active, +.ui.inverted.green.buttons .basic.button.active, +.ui.inverted.green.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; + color: @lightGreen !important; +} .ui.inverted.green.basic.buttons .button:active, .ui.inverted.green.buttons .basic.button:active, .ui.inverted.green.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; - color: @lightGreenDown !important; + color: @lightGreen !important; } /*--- Orange ---*/ @@ -1486,13 +1522,19 @@ .ui.inverted.orange.button:hover { box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; background-color: @lightOrange; - color: @black; + color: @white; +} +.ui.inverted.orange.buttons .button.active, +.ui.inverted.orange.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; + background-color: @lightOrange; + color: @white; } .ui.inverted.orange.buttons .button:active, .ui.inverted.orange.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; background-color: @lightOrangeDown; - color: @black; + color: @white; } /* Inverted Basic */ @@ -1509,11 +1551,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; color: @lightOrange !important; } +.ui.inverted.orange.basic.buttons .button.active, +.ui.inverted.orange.buttons .basic.button.active, +.ui.inverted.orange.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; + color: @lightOrange !important; +} .ui.inverted.orange.basic.buttons .button:active, .ui.inverted.orange.buttons .basic.button:active, .ui.inverted.orange.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; - color: @lightOrangeDown !important; + color: @lightOrange !important; } /*--- Pink ---*/ @@ -1583,13 +1631,19 @@ .ui.inverted.pink.button:hover { box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; background-color: @lightPink; - color: @black; + color: @white; +} +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; + background-color: @lightPink; + color: @white; } .ui.inverted.pink.buttons .button:active, .ui.inverted.pink.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; background-color: @lightPinkDown; - color: @black; + color: @white; } /* Inverted Basic */ @@ -1606,11 +1660,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; color: @lightPink !important; } +.ui.inverted.pink.basic.buttons .button.active, +.ui.inverted.pink.buttons .basic.button.active, +.ui.inverted.pink.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; + color: @lightPink !important; +} .ui.inverted.pink.basic.buttons .button:active, .ui.inverted.pink.buttons .basic.button:active, .ui.inverted.pink.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; - color: @lightPinkDown !important; + color: @lightPink !important; } /*--- Purple ---*/ @@ -1682,6 +1742,12 @@ background-color: @lightPurple; color: @black; } +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; + background-color: @lightPurple; + color: @black; +} .ui.inverted.purple.buttons .button:active, .ui.inverted.purple.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; @@ -1703,11 +1769,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; color: @lightPurple !important; } +.ui.inverted.purple.basic.buttons .button.active, +.ui.inverted.purple.buttons .basic.button.active, +.ui.inverted.purple.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; + color: @lightPurple !important; +} .ui.inverted.purple.basic.buttons .button:active, .ui.inverted.purple.buttons .basic.button:active, .ui.inverted.purple.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; - color: @lightPurpleDown !important; + color: @lightPurple !important; } /*--- Red ---*/ @@ -1777,13 +1849,19 @@ .ui.inverted.red.button:hover { box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; background-color: @lightRed; - color: @black; + color: @white; +} +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; + background-color: @lightRed; + color: @white; } .ui.inverted.red.buttons .button:active, .ui.inverted.red.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; background-color: @lightRedDown; - color: @black; + color: @white; } /* Inverted Basic */ @@ -1800,11 +1878,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; color: @lightRed !important; } +.ui.inverted.red.basic.buttons .button.active, +.ui.inverted.red.buttons .basic.button.active, +.ui.inverted.red.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; + color: @lightRed !important; +} .ui.inverted.red.basic.buttons .button:active, .ui.inverted.red.buttons .basic.button:active, .ui.inverted.red.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; - color: @lightRedDown !important; + color: @lightRed !important; } @@ -1877,6 +1961,12 @@ background-color: @lightTeal; color: @black; } +.ui.inverted.teal.buttons .button.active, +.ui.inverted.teal.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; + background-color: @lightTeal; + color: @black; +} .ui.inverted.teal.buttons .button:active, .ui.inverted.teal.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; @@ -1898,11 +1988,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; color: @lightTeal !important; } +.ui.inverted.teal.basic.buttons .button.active, +.ui.inverted.teal.buttons .basic.button.active, +.ui.inverted.teal.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; + color: @lightTeal !important; +} .ui.inverted.teal.basic.buttons .button:active, .ui.inverted.teal.buttons .basic.button:active, .ui.inverted.teal.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; - color: @lightTealDown !important; + color: @lightTeal !important; } @@ -1975,6 +2071,12 @@ background-color: @lightYellow; color: @black; } +.ui.inverted.yellow.buttons .button.active, +.ui.inverted.yellow.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; + background-color: @lightYellow; + color: @black; +} .ui.inverted.yellow.buttons .button:active, .ui.inverted.yellow.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; @@ -1996,11 +2098,17 @@ box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; color: @lightYellow !important; } +.ui.inverted.yellow.basic.buttons .button.active, +.ui.inverted.yellow.buttons .basic.button.active, +.ui.inverted.yellow.basic.button.active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; + color: @lightYellow !important; +} .ui.inverted.yellow.basic.buttons .button:active, .ui.inverted.yellow.buttons .basic.button:active, .ui.inverted.yellow.basic.button:active { box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; - color: @lightYellowDown !important; + color: @lightYellow !important; } diff --git a/build/less/definitions/elements/progress.less b/build/less/definitions/elements/progress.less index 0d20f399b..f3bd3704f 100644 --- a/build/less/definitions/elements/progress.less +++ b/build/less/definitions/elements/progress.less @@ -32,6 +32,7 @@ .ui.progress .bar { display: inline-block; + width: 0%; height: 100%; background-color: #CCCCCC; diff --git a/build/less/definitions/modules/accordion.js b/build/less/definitions/modules/accordion.js index 2115e4e6e..6645cc926 100644 --- a/build/less/definitions/modules/accordion.js +++ b/build/less/definitions/modules/accordion.js @@ -116,10 +116,12 @@ $.fn.accordion = function(parameters) { } }, - toggle: function(index) { + toggle: function(query) { var - $activeTitle = (index !== undefined) - ? $title.eq(index) + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query) : $(this), $activeContent = $activeTitle.next($content), contentIsOpen = $activeContent.is(':visible') @@ -138,10 +140,12 @@ $.fn.accordion = function(parameters) { } }, - open: function(index) { + open: function(query) { var - $activeTitle = (index !== undefined) - ? $title.eq(index) + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query) : $(this), $activeContent = $activeTitle.next($content), currentlyAnimating = $activeContent.is(':animated'), @@ -175,10 +179,12 @@ $.fn.accordion = function(parameters) { } }, - close: function(index) { + close: function(query) { var - $activeTitle = (index !== undefined) - ? $title.eq(index) + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query) : $(this), $activeContent = $activeTitle.next($content), isActive = $activeContent.hasClass(className.active) diff --git a/build/less/definitions/modules/checkbox.js b/build/less/definitions/modules/checkbox.js index ed684cced..e79496f90 100644 --- a/build/less/definitions/modules/checkbox.js +++ b/build/less/definitions/modules/checkbox.js @@ -361,8 +361,8 @@ $.fn.checkbox.settings = { name : 'Checkbox', namespace : 'checkbox', + debug : false, verbose : true, - debug : true, performance : true, // delegated event context diff --git a/build/less/definitions/modules/dropdown.js b/build/less/definitions/modules/dropdown.js index 6a35d3391..7abc9bd29 100644 --- a/build/less/definitions/modules/dropdown.js +++ b/build/less/definitions/modules/dropdown.js @@ -139,19 +139,35 @@ $.fn.dropdown = function(parameters) { } }, select: function() { - module.debug('Dropdown initialized on a select, generating html'); - // redefine module as wrapped element - $input = $module; - $module = $('
') - .attr('class', $input.attr('class') ) - .addClass(className.selection) - .html( settings.templates.select(module.get.selectValues())) - .insertBefore($input) - ; - $input - .removeAttr('class') - .prependTo($module) + var + selectValues = module.get.selectValues() ; + module.debug('Dropdown initialized on a select', selectValues); + // see if select exists inside a dropdown + $input = $module; + + if($module.closest(className.dropdown) > 0) { + module.debug('Creating dropdown menu only from template'); + $module = $module.closest(className.dropdown); + $('
') + .addClass(className.menu) + .html( settings.templates.menu( selectValues )) + .appendTo($module) + ; + } + else { + module.debug('Creating entire dropdown from template'); + $module = $('
') + .attr('class', $input.attr('class') ) + .addClass(className.selection) + .html( settings.templates.dropdown(selectValues) ) + .insertBefore($input) + ; + $input + .removeAttr('class') + .prependTo($module) + ; + } module.refresh(); } }, @@ -483,7 +499,7 @@ $.fn.dropdown = function(parameters) { callback = function() { $search.val(''); module.determine.selectAction(text, value); - $.proxy(settings.onChange, element)(value, text); + $.proxy(settings.onChange, element)(value, text, $choice); }, openingSubMenu = ($choice.find(selector.menu).size() > 0) ; @@ -1323,7 +1339,9 @@ $.fn.dropdown.settings = { className : { active : 'active', disabled : 'disabled', + dropdown : 'ui dropdown', filtered : 'filtered', + menu : 'menu', placeholder : 'default', search : 'search', selected : 'selected', @@ -1334,7 +1352,24 @@ $.fn.dropdown.settings = { }; $.fn.dropdown.settings.templates = { - select: function(select) { + menu: function(select) { + var + placeholder = select.placeholder || false, + values = select.values || {}, + html = '' + ; + html += '