diff --git a/server/documents/elements/divider.html.eco b/server/documents/elements/divider.html.eco index d70e373df..bd3694116 100755 --- a/server/documents/elements/divider.html.eco +++ b/server/documents/elements/divider.html.eco @@ -12,6 +12,7 @@ themes : ['default'] <%- @partial('header') %> +
@@ -75,6 +76,9 @@ themes : ['default']

Horizontal Divider

A divider can segment content horizontally

+
Horizontal dividers can also be used in combination with header and icons to create different styles of dividers. +
+
Dividers in Semantic 1.0 will automatically vary the size of their rules to match the length of your text

Retrieve Order

@@ -94,18 +98,41 @@ themes : ['default']
- -
-

Icon Divider

-

A divider can include an icon

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-
- +
+
+

+ Doggie Treat +
$4.99 for 100
+

+
Add to cart
+

Doggie treats are good for all times of the year. Proven to be eaten by 99.9% of all dogs worldwide.

+

+ + Specifications +

+ + + + + + + + + + + + + + + + + + + +
Size1" x 2"
Weight6 ounces
ColorYellowish
OdorNot Much Usually
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Variations

diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco index 4a74ed319..e25d9d7a1 100755 --- a/server/documents/index.html.eco +++ b/server/documents/index.html.eco @@ -22,7 +22,7 @@ type : 'Semantic'

UI is the vocabulary of the web.

- UI Library + UI Library Themes diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 9a63bba4b..d24d0cb9c 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -696,10 +696,13 @@ .ui.very.basic.table { border: none; } -.ui.very.basic.table:not(.sortable) th, -.ui.very.basic.table:not(.sortable) td { +.ui.very.basic.table:not(.sortable):not(.striped) th, +.ui.very.basic.table:not(.sortable):not(.striped) td { padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding; } +.ui.very.basic.table:not(.sortable):not(.striped) tbody tr:last-child td { + padding-bottom: 0em; +} /*-------------- Padded diff --git a/src/definitions/elements/divider.less b/src/definitions/elements/divider.less index aedffd286..4d3ef112b 100755 --- a/src/definitions/elements/divider.less +++ b/src/definitions/elements/divider.less @@ -26,34 +26,70 @@ .ui.divider { margin: @dividerMargin 0rem; - border-top: @shadowWidth solid @shadowColor; - border-bottom: @highlightWidth solid @highlightColor; - line-height: 1; height: 0em; - box-sizing: border-box; + font-weight: @fontWeight; + text-transform: @textTransform; + color: @color; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.ui.vertical.divider, -.ui.horizontal.divider { - position: absolute; +/*-------------- + Basic +---------------*/ - border: none; - height: 0em; - margin: 0em; - background-color: transparent; +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +.ui.grid > .ui.divider { + font-size: 1rem; +} + + +/*-------------- + Horizontal +---------------*/ - font-weight: bold; +.ui.horizontal.divider { + position: relative; + + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; text-align: center; - text-transform: @dividerTextTransform; +} - color: @dividerTextColor; +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + position: absolute; + top: 50%; + content: ''; + z-index: 3; + + width: 50%; + top: 50%; + height: 0px; + + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; } +.ui.horizontal.divider:before { + margin-left: -(50% + @horizontalDividerMargin); +} +.ui.horizontal.divider:after { + margin-left: @horizontalDividerMargin; +} /*-------------- Vertical @@ -65,27 +101,27 @@ top: 50%; left: 50%; - margin: 0% 0% 0% -(@verticalDividerWidth / 2); - - width: @verticalDividerWidth; + margin: 0rem; + padding: 0em; + width: auto; height: 50%; line-height: 0em; - padding: 0em; + text-align: center; } .ui.vertical.divider:before, .ui.vertical.divider:after { position: absolute; left: 50%; - content: " "; + content: ''; z-index: 3; border-left: @shadowWidth solid @shadowColor; border-right: @highlightWidth solid @highlightColor; width: 0%; - height: 80%; + height: @verticalDividerHeight; } .ui.vertical.divider:before { @@ -96,45 +132,6 @@ bottom: 0px; } -/*-------------- - Horizontal ----------------*/ - -.ui.horizontal.divider { - position: relative; - top: 0%; - left: 0%; - - margin: @horizontalDividerVerticalMargin 0em; - height: auto; - padding: 0em; - - line-height: 1; -} - -.ui.horizontal.divider:before, -.ui.horizontal.divider:after { - position: absolute; - top: 50%; - content: ''; - z-index: 3; - - width: @horizontalDividerWidth; - top: 50%; - height: 0%; - - border-top: @shadowWidth solid @shadowColor; - border-bottom: @highlightWidth solid @highlightColor; -} - -.ui.horizontal.divider:before { - left: 0%; -} -.ui.horizontal.divider:after { - left: auto; - right: 0%; -} - /*-------------- Icon ---------------*/ @@ -167,16 +164,16 @@ } .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider { - color: @directionalTextColor; + color: @invertedTextColor; } .ui.divider.inverted, .ui.divider.inverted:after, .ui.divider.inverted:before { - border-top-color: @invertedShadowColor; - border-bottom-color: @invertedHighlightColor; + border-top-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; - border-left-color: @invertedShadowColor; - border-right-color: @invertedHighlightColor; + border-left-color: @invertedShadowColor !important; + border-right-color: @invertedHighlightColor !important; } /*-------------- @@ -204,12 +201,4 @@ margin-bottom: @sectionMargin; } -/*-------------- - Sizes ----------------*/ - -.ui.divider { - font-size: 1rem; -} - .loadUIOverrides(); diff --git a/src/definitions/modules/search.js b/src/definitions/modules/search.js index 9b83ab641..5f839e74c 100755 --- a/src/definitions/modules/search.js +++ b/src/definitions/modules/search.js @@ -243,7 +243,7 @@ $.fn.search = function(parameters) { } else { module.debug("Querying for '" + searchTerm + "'"); - if($.isPlainObject(settings.source)) { + if($.isPlainObject(settings.source) || $.isArray(settings.source)) { module.search.local(searchTerm); } else if(settings.apiSettings) { @@ -811,4 +811,4 @@ $.fn.search.settings = { } }; -})( jQuery, window , document ); \ No newline at end of file +})( jQuery, window , document ); diff --git a/src/themes/packages/default/elements/divider.variables b/src/themes/packages/default/elements/divider.variables index 05338179f..705eb5035 100755 --- a/src/themes/packages/default/elements/divider.variables +++ b/src/themes/packages/default/elements/divider.variables @@ -9,13 +9,15 @@ @dividerMargin: 1rem; @highlightWidth: 1px; -@highlightColor: rgba(255, 255, 255, 0.8); +@highlightColor: rgba(255, 255, 255, 0.2); @shadowWidth: 1px; @shadowColor: rgba(0, 0, 0, 0.1); -@dividerTextColor: @textColor; -@dividerTextTransform: uppercase; +/* Text */ +@fontWeight: bold; +@color: @darkTextColor; +@textTransform: uppercase; /*------------------- Coupling @@ -31,16 +33,13 @@ *******************************/ /* Horizontal / Vertical */ -@directionalFontSize: 0.875rem; -@directionalTextColor: @invertedLightTextColor; - -@horizontalDividerVerticalMargin: 1rem; -@horizontalDividerWidth: 40%; -@verticalDividerWidth: 6%; +@horizontalMargin: ''; +@horizontalDividerMargin: 1.5%; +@verticalDividerMargin: 1rem; +@verticalDividerHeight: ~"calc(100% - "(@verticalDividerMargin)~")"; /* Inverted */ @invertedTextColor: @white; - @invertedHighlightColor: rgba(255, 255, 255, 0.15); @invertedShadowColor: rgba(0, 0, 0, 0.15); diff --git a/src/themes/packages/default/elements/icon.overrides b/src/themes/packages/default/elements/icon.overrides index 702629247..5b4f464e0 100755 --- a/src/themes/packages/default/elements/icon.overrides +++ b/src/themes/packages/default/elements/icon.overrides @@ -568,6 +568,7 @@ i.icon.shuffle:before { content: "\f074"; } i.icon.talk:before { content: "\f075"; } i.icon.chat:before { content: "\f075"; } i.icon.shopping.cart:before { content: "\f07a"; } +i.icon.bar.graph:before { content: "\f080"; } i.icon.key:before { content: "\f084"; } i.icon.privacy:before { content: "\f084"; } i.icon.cogs:before { content: "\f085"; } diff --git a/src/themes/packages/default/elements/icon.variables b/src/themes/packages/default/elements/icon.variables index 8decbf4ea..8c6934d05 100755 --- a/src/themes/packages/default/elements/icon.variables +++ b/src/themes/packages/default/elements/icon.variables @@ -11,7 +11,7 @@ @opacity: 0.75; @width: 1.23em; @height: 0.9em; -@distanceFromText: 0em; +@distanceFromText: 0.25em; @linkDuration: 0.3s; @loadingDuration: 2s;