From d2fed5f4a38efc545deb2d00299e68f6ce81196a Mon Sep 17 00:00:00 2001 From: Marco 'Lubber' Wienkoop Date: Fri, 17 Sep 2021 08:06:46 +0200 Subject: [PATCH] feat(chore): more variation options This PR adds lots of additional options for the variation.variables customization for switching CSS Variations to be able to shorten a custom build even more. --- src/definitions/collections/form.less | 236 +-- src/definitions/collections/grid.less | 1368 +++++++++-------- src/definitions/collections/menu.less | 177 ++- src/definitions/collections/message.less | 15 +- src/definitions/collections/table.less | 358 ++--- src/definitions/elements/button.less | 243 +-- src/definitions/elements/container.less | 24 +- src/definitions/elements/emoji.less | 24 +- src/definitions/elements/header.less | 22 +- src/definitions/elements/list.less | 100 +- src/definitions/elements/segment.less | 7 +- src/definitions/elements/step.less | 100 +- src/definitions/modules/dropdown.less | 36 +- src/definitions/modules/search.less | 48 +- src/definitions/modules/sidebar.less | 48 +- src/definitions/views/card.less | 706 +++++---- src/definitions/views/comment.less | 173 ++- src/definitions/views/feed.less | 308 ++-- src/definitions/views/item.less | 445 +++--- src/definitions/views/statistic.less | 141 +- .../default/globals/variation.variables | 64 + 21 files changed, 2488 insertions(+), 2155 deletions(-) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 5180533db5..845117b94f 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -291,19 +291,21 @@ width: auto; } -/* Full Width Input */ -.ui.form .ten.fields .ui.input input, -.ui.form .nine.fields .ui.input input, -.ui.form .eight.fields .ui.input input, -.ui.form .seven.fields .ui.input input, -.ui.form .six.fields .ui.input input, -.ui.form .five.fields .ui.input input, -.ui.form .four.fields .ui.input input, -.ui.form .three.fields .ui.input input, -.ui.form .two.fields .ui.input input, -.ui.form .wide.field .ui.input input { - flex: 1 0 auto; - width: 0; +& when (@variationFormEqualWidth) or (@variationFormWide) { + /* Full Width Input */ + .ui.form .ten.fields .ui.input input, + .ui.form .nine.fields .ui.input input, + .ui.form .eight.fields .ui.input input, + .ui.form .seven.fields .ui.input input, + .ui.form .six.fields .ui.input input, + .ui.form .five.fields .ui.input input, + .ui.form .four.fields .ui.input input, + .ui.form .three.fields .ui.input input, + .ui.form .two.fields .ui.input input, + .ui.form .wide.field .ui.input input { + flex: 1 0 auto; + width: 0; + } } @@ -626,13 +628,15 @@ /*------------------ Input State --------------------*/ - /* Transparent */ - .ui.form .field.@{state} .transparent.input input, - .ui.form .field.@{state} .transparent.input textarea, - .ui.form .field.@{state} input.transparent, - .ui.form .field.@{state} textarea.transparent { - background-color: @formStates[@@state][transparentBackground] !important; - color: @formStates[@@state][transparentColor] !important; + & when (@variationFormTransparent) { + /* Transparent */ + .ui.form .field.@{state} .transparent.input input, + .ui.form .field.@{state} .transparent.input textarea, + .ui.form .field.@{state} input.transparent, + .ui.form .field.@{state} textarea.transparent { + background-color: @formStates[@@state][transparentBackground] !important; + color: @formStates[@@state][transparentColor] !important; + } } /* Autofilled */ @@ -942,42 +946,44 @@ box-shadow: none; } -/* Other Combinations */ -.ui.form .two.fields > .fields, -.ui.form .two.fields > .field { - width: @twoColumn; -} -.ui.form .three.fields > .fields, -.ui.form .three.fields > .field { - width: @threeColumn; -} -.ui.form .four.fields > .fields, -.ui.form .four.fields > .field { - width: @fourColumn; -} -.ui.form .five.fields > .fields, -.ui.form .five.fields > .field { - width: @fiveColumn; -} -.ui.form .six.fields > .fields, -.ui.form .six.fields > .field { - width: @sixColumn; -} -.ui.form .seven.fields > .fields, -.ui.form .seven.fields > .field { - width: @sevenColumn; -} -.ui.form .eight.fields > .fields, -.ui.form .eight.fields > .field { - width: @eightColumn; -} -.ui.form .nine.fields > .fields, -.ui.form .nine.fields > .field { - width: @nineColumn; -} -.ui.form .ten.fields > .fields, -.ui.form .ten.fields > .field { - width: @tenColumn; +& when (@variationFormEqualWidth) { + /* Other Combinations */ + .ui.form .two.fields > .fields, + .ui.form .two.fields > .field { + width: @twoColumn; + } + .ui.form .three.fields > .fields, + .ui.form .three.fields > .field { + width: @threeColumn; + } + .ui.form .four.fields > .fields, + .ui.form .four.fields > .field { + width: @fourColumn; + } + .ui.form .five.fields > .fields, + .ui.form .five.fields > .field { + width: @fiveColumn; + } + .ui.form .six.fields > .fields, + .ui.form .six.fields > .field { + width: @sixColumn; + } + .ui.form .seven.fields > .fields, + .ui.form .seven.fields > .field { + width: @sevenColumn; + } + .ui.form .eight.fields > .fields, + .ui.form .eight.fields > .field { + width: @eightColumn; + } + .ui.form .nine.fields > .fields, + .ui.form .nine.fields > .field { + width: @nineColumn; + } + .ui.form .ten.fields > .fields, + .ui.form .ten.fields > .field { + width: @tenColumn; + } } /* Swap to full width on mobile */ @@ -994,61 +1000,63 @@ } } +& when (@variationFormWide) { -/* Sizing Combinations */ -.ui.form .fields .wide.field { - width: @oneWide; - padding-left: (@gutterWidth / 2); - padding-right: (@gutterWidth / 2); -} + /* Sizing Combinations */ + .ui.form .fields .wide.field { + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); + } -.ui.form .one.wide.field { - width: @oneWide; -} -.ui.form .two.wide.field { - width: @twoWide; -} -.ui.form .three.wide.field { - width: @threeWide; -} -.ui.form .four.wide.field { - width: @fourWide; -} -.ui.form .five.wide.field { - width: @fiveWide; -} -.ui.form .six.wide.field { - width: @sixWide; -} -.ui.form .seven.wide.field { - width: @sevenWide; -} -.ui.form .eight.wide.field { - width: @eightWide; -} -.ui.form .nine.wide.field { - width: @nineWide; -} -.ui.form .ten.wide.field { - width: @tenWide; -} -.ui.form .eleven.wide.field { - width: @elevenWide; -} -.ui.form .twelve.wide.field { - width: @twelveWide; -} -.ui.form .thirteen.wide.field { - width: @thirteenWide; -} -.ui.form .fourteen.wide.field { - width: @fourteenWide; -} -.ui.form .fifteen.wide.field { - width: @fifteenWide; -} -.ui.form .sixteen.wide.field { - width: @sixteenWide; + .ui.form .one.wide.field { + width: @oneWide; + } + .ui.form .two.wide.field { + width: @twoWide; + } + .ui.form .three.wide.field { + width: @threeWide; + } + .ui.form .four.wide.field { + width: @fourWide; + } + .ui.form .five.wide.field { + width: @fiveWide; + } + .ui.form .six.wide.field { + width: @sixWide; + } + .ui.form .seven.wide.field { + width: @sevenWide; + } + .ui.form .eight.wide.field { + width: @eightWide; + } + .ui.form .nine.wide.field { + width: @nineWide; + } + .ui.form .ten.wide.field { + width: @tenWide; + } + .ui.form .eleven.wide.field { + width: @elevenWide; + } + .ui.form .twelve.wide.field { + width: @twelveWide; + } + .ui.form .thirteen.wide.field { + width: @thirteenWide; + } + .ui.form .fourteen.wide.field { + width: @fourteenWide; + } + .ui.form .fifteen.wide.field { + width: @fifteenWide; + } + .ui.form .sixteen.wide.field { + width: @sixteenWide; + } } @@ -1056,10 +1064,12 @@ Equal Width ---------------------*/ -.ui[class*="equal width"].form .fields > .field, -.ui.form [class*="equal width"].fields > .field { - width: 100%; - flex: 1 1 auto; +& when (@variationFormEqualWidth) { + .ui[class*="equal width"].form .fields > .field, + .ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; + } } & when (@variationFormInline) { diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index a2080245c9..848efe3c45 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -39,13 +39,17 @@ margin-left: -(@gutterWidth / 2); margin-right: -(@gutterWidth / 2); } -.ui.relaxed.grid { - margin-left: -(@relaxedGutterWidth / 2); - margin-right: -(@relaxedGutterWidth / 2); -} -.ui[class*="very relaxed"].grid { - margin-left: -(@veryRelaxedGutterWidth / 2); - margin-right: -(@veryRelaxedGutterWidth / 2); +& when (@variationGridRelaxed) { + .ui.relaxed.grid { + margin-left: -(@relaxedGutterWidth / 2); + margin-right: -(@relaxedGutterWidth / 2); + } + & when (@variationGridVeryRelaxed) { + .ui[class*="very relaxed"].grid { + margin-left: -(@veryRelaxedGutterWidth / 2); + margin-right: -(@veryRelaxedGutterWidth / 2); + } + } } @@ -338,609 +342,611 @@ } } -/*------------------- - Column Width ---------------------*/ - -/* Sizing Combinations */ -.ui.grid > .row > [class*="one wide"].column, -.ui.grid > .column.row > [class*="one wide"].column, -.ui.grid > [class*="one wide"].column, -.ui.column.grid > [class*="one wide"].column { - width: @oneWide !important; -} -.ui.grid > .row > [class*="two wide"].column, -.ui.grid > .column.row > [class*="two wide"].column, -.ui.grid > [class*="two wide"].column, -.ui.column.grid > [class*="two wide"].column { - width: @twoWide !important; -} -.ui.grid > .row > [class*="three wide"].column, -.ui.grid > .column.row > [class*="three wide"].column, -.ui.grid > [class*="three wide"].column, -.ui.column.grid > [class*="three wide"].column { - width: @threeWide !important; -} -.ui.grid > .row > [class*="four wide"].column, -.ui.grid > .column.row > [class*="four wide"].column, -.ui.grid > [class*="four wide"].column, -.ui.column.grid > [class*="four wide"].column { - width: @fourWide !important; -} -.ui.grid > .row > [class*="five wide"].column, -.ui.grid > .column.row > [class*="five wide"].column, -.ui.grid > [class*="five wide"].column, -.ui.column.grid > [class*="five wide"].column { - width: @fiveWide !important; -} -.ui.grid > .row > [class*="six wide"].column, -.ui.grid > .column.row > [class*="six wide"].column, -.ui.grid > [class*="six wide"].column, -.ui.column.grid > [class*="six wide"].column { - width: @sixWide !important; -} -.ui.grid > .row > [class*="seven wide"].column, -.ui.grid > .column.row > [class*="seven wide"].column, -.ui.grid > [class*="seven wide"].column, -.ui.column.grid > [class*="seven wide"].column { - width: @sevenWide !important; -} -.ui.grid > .row > [class*="eight wide"].column, -.ui.grid > .column.row > [class*="eight wide"].column, -.ui.grid > [class*="eight wide"].column, -.ui.column.grid > [class*="eight wide"].column { - width: @eightWide !important; -} -.ui.grid > .row > [class*="nine wide"].column, -.ui.grid > .column.row > [class*="nine wide"].column, -.ui.grid > [class*="nine wide"].column, -.ui.column.grid > [class*="nine wide"].column { - width: @nineWide !important; -} -.ui.grid > .row > [class*="ten wide"].column, -.ui.grid > .column.row > [class*="ten wide"].column, -.ui.grid > [class*="ten wide"].column, -.ui.column.grid > [class*="ten wide"].column { - width: @tenWide !important; -} -.ui.grid > .row > [class*="eleven wide"].column, -.ui.grid > .column.row > [class*="eleven wide"].column, -.ui.grid > [class*="eleven wide"].column, -.ui.column.grid > [class*="eleven wide"].column { - width: @elevenWide !important; -} -.ui.grid > .row > [class*="twelve wide"].column, -.ui.grid > .column.row > [class*="twelve wide"].column, -.ui.grid > [class*="twelve wide"].column, -.ui.column.grid > [class*="twelve wide"].column { - width: @twelveWide !important; -} -.ui.grid > .row > [class*="thirteen wide"].column, -.ui.grid > .column.row > [class*="thirteen wide"].column, -.ui.grid > [class*="thirteen wide"].column, -.ui.column.grid > [class*="thirteen wide"].column { - width: @thirteenWide !important; -} -.ui.grid > .row > [class*="fourteen wide"].column, -.ui.grid > .column.row > [class*="fourteen wide"].column, -.ui.grid > [class*="fourteen wide"].column, -.ui.column.grid > [class*="fourteen wide"].column { - width: @fourteenWide !important; -} -.ui.grid > .row > [class*="fifteen wide"].column, -.ui.grid > .column.row > [class*="fifteen wide"].column, -.ui.grid > [class*="fifteen wide"].column, -.ui.column.grid > [class*="fifteen wide"].column { - width: @fifteenWide !important; -} -.ui.grid > .row > [class*="sixteen wide"].column, -.ui.grid > .column.row > [class*="sixteen wide"].column, -.ui.grid > [class*="sixteen wide"].column, -.ui.column.grid > [class*="sixteen wide"].column { - width: @sixteenWide !important; -} - -/*---------------------- - Width per Device ------------------------*/ +& when (@variationGridWide) { + /*------------------- + Column Width + --------------------*/ -/* Mobile Sizing Combinations */ -@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { - .ui.grid > .row > [class*="one wide mobile"].column, - .ui.grid > .column.row > [class*="one wide mobile"].column, - .ui.grid > [class*="one wide mobile"].column, - .ui.column.grid > [class*="one wide mobile"].column { + /* Sizing Combinations */ + .ui.grid > .row > [class*="one wide"].column, + .ui.grid > .column.row > [class*="one wide"].column, + .ui.grid > [class*="one wide"].column, + .ui.column.grid > [class*="one wide"].column { width: @oneWide !important; } - .ui.grid > .row > [class*="two wide mobile"].column, - .ui.grid > .column.row > [class*="two wide mobile"].column, - .ui.grid > [class*="two wide mobile"].column, - .ui.column.grid > [class*="two wide mobile"].column { + .ui.grid > .row > [class*="two wide"].column, + .ui.grid > .column.row > [class*="two wide"].column, + .ui.grid > [class*="two wide"].column, + .ui.column.grid > [class*="two wide"].column { width: @twoWide !important; } - .ui.grid > .row > [class*="three wide mobile"].column, - .ui.grid > .column.row > [class*="three wide mobile"].column, - .ui.grid > [class*="three wide mobile"].column, - .ui.column.grid > [class*="three wide mobile"].column { + .ui.grid > .row > [class*="three wide"].column, + .ui.grid > .column.row > [class*="three wide"].column, + .ui.grid > [class*="three wide"].column, + .ui.column.grid > [class*="three wide"].column { width: @threeWide !important; } - .ui.grid > .row > [class*="four wide mobile"].column, - .ui.grid > .column.row > [class*="four wide mobile"].column, - .ui.grid > [class*="four wide mobile"].column, - .ui.column.grid > [class*="four wide mobile"].column { + .ui.grid > .row > [class*="four wide"].column, + .ui.grid > .column.row > [class*="four wide"].column, + .ui.grid > [class*="four wide"].column, + .ui.column.grid > [class*="four wide"].column { width: @fourWide !important; } - .ui.grid > .row > [class*="five wide mobile"].column, - .ui.grid > .column.row > [class*="five wide mobile"].column, - .ui.grid > [class*="five wide mobile"].column, - .ui.column.grid > [class*="five wide mobile"].column { + .ui.grid > .row > [class*="five wide"].column, + .ui.grid > .column.row > [class*="five wide"].column, + .ui.grid > [class*="five wide"].column, + .ui.column.grid > [class*="five wide"].column { width: @fiveWide !important; } - .ui.grid > .row > [class*="six wide mobile"].column, - .ui.grid > .column.row > [class*="six wide mobile"].column, - .ui.grid > [class*="six wide mobile"].column, - .ui.column.grid > [class*="six wide mobile"].column { + .ui.grid > .row > [class*="six wide"].column, + .ui.grid > .column.row > [class*="six wide"].column, + .ui.grid > [class*="six wide"].column, + .ui.column.grid > [class*="six wide"].column { width: @sixWide !important; } - .ui.grid > .row > [class*="seven wide mobile"].column, - .ui.grid > .column.row > [class*="seven wide mobile"].column, - .ui.grid > [class*="seven wide mobile"].column, - .ui.column.grid > [class*="seven wide mobile"].column { + .ui.grid > .row > [class*="seven wide"].column, + .ui.grid > .column.row > [class*="seven wide"].column, + .ui.grid > [class*="seven wide"].column, + .ui.column.grid > [class*="seven wide"].column { width: @sevenWide !important; } - .ui.grid > .row > [class*="eight wide mobile"].column, - .ui.grid > .column.row > [class*="eight wide mobile"].column, - .ui.grid > [class*="eight wide mobile"].column, - .ui.column.grid > [class*="eight wide mobile"].column { + .ui.grid > .row > [class*="eight wide"].column, + .ui.grid > .column.row > [class*="eight wide"].column, + .ui.grid > [class*="eight wide"].column, + .ui.column.grid > [class*="eight wide"].column { width: @eightWide !important; } - .ui.grid > .row > [class*="nine wide mobile"].column, - .ui.grid > .column.row > [class*="nine wide mobile"].column, - .ui.grid > [class*="nine wide mobile"].column, - .ui.column.grid > [class*="nine wide mobile"].column { + .ui.grid > .row > [class*="nine wide"].column, + .ui.grid > .column.row > [class*="nine wide"].column, + .ui.grid > [class*="nine wide"].column, + .ui.column.grid > [class*="nine wide"].column { width: @nineWide !important; } - .ui.grid > .row > [class*="ten wide mobile"].column, - .ui.grid > .column.row > [class*="ten wide mobile"].column, - .ui.grid > [class*="ten wide mobile"].column, - .ui.column.grid > [class*="ten wide mobile"].column { + .ui.grid > .row > [class*="ten wide"].column, + .ui.grid > .column.row > [class*="ten wide"].column, + .ui.grid > [class*="ten wide"].column, + .ui.column.grid > [class*="ten wide"].column { width: @tenWide !important; } - .ui.grid > .row > [class*="eleven wide mobile"].column, - .ui.grid > .column.row > [class*="eleven wide mobile"].column, - .ui.grid > [class*="eleven wide mobile"].column, - .ui.column.grid > [class*="eleven wide mobile"].column { + .ui.grid > .row > [class*="eleven wide"].column, + .ui.grid > .column.row > [class*="eleven wide"].column, + .ui.grid > [class*="eleven wide"].column, + .ui.column.grid > [class*="eleven wide"].column { width: @elevenWide !important; } - .ui.grid > .row > [class*="twelve wide mobile"].column, - .ui.grid > .column.row > [class*="twelve wide mobile"].column, - .ui.grid > [class*="twelve wide mobile"].column, - .ui.column.grid > [class*="twelve wide mobile"].column { + .ui.grid > .row > [class*="twelve wide"].column, + .ui.grid > .column.row > [class*="twelve wide"].column, + .ui.grid > [class*="twelve wide"].column, + .ui.column.grid > [class*="twelve wide"].column { width: @twelveWide !important; } - .ui.grid > .row > [class*="thirteen wide mobile"].column, - .ui.grid > .column.row > [class*="thirteen wide mobile"].column, - .ui.grid > [class*="thirteen wide mobile"].column, - .ui.column.grid > [class*="thirteen wide mobile"].column { + .ui.grid > .row > [class*="thirteen wide"].column, + .ui.grid > .column.row > [class*="thirteen wide"].column, + .ui.grid > [class*="thirteen wide"].column, + .ui.column.grid > [class*="thirteen wide"].column { width: @thirteenWide !important; } - .ui.grid > .row > [class*="fourteen wide mobile"].column, - .ui.grid > .column.row > [class*="fourteen wide mobile"].column, - .ui.grid > [class*="fourteen wide mobile"].column, - .ui.column.grid > [class*="fourteen wide mobile"].column { + .ui.grid > .row > [class*="fourteen wide"].column, + .ui.grid > .column.row > [class*="fourteen wide"].column, + .ui.grid > [class*="fourteen wide"].column, + .ui.column.grid > [class*="fourteen wide"].column { width: @fourteenWide !important; } - .ui.grid > .row > [class*="fifteen wide mobile"].column, - .ui.grid > .column.row > [class*="fifteen wide mobile"].column, - .ui.grid > [class*="fifteen wide mobile"].column, - .ui.column.grid > [class*="fifteen wide mobile"].column { + .ui.grid > .row > [class*="fifteen wide"].column, + .ui.grid > .column.row > [class*="fifteen wide"].column, + .ui.grid > [class*="fifteen wide"].column, + .ui.column.grid > [class*="fifteen wide"].column { width: @fifteenWide !important; } - .ui.grid > .row > [class*="sixteen wide mobile"].column, - .ui.grid > .column.row > [class*="sixteen wide mobile"].column, - .ui.grid > [class*="sixteen wide mobile"].column, - .ui.column.grid > [class*="sixteen wide mobile"].column { + .ui.grid > .row > [class*="sixteen wide"].column, + .ui.grid > .column.row > [class*="sixteen wide"].column, + .ui.grid > [class*="sixteen wide"].column, + .ui.column.grid > [class*="sixteen wide"].column { width: @sixteenWide !important; } -} -/* Tablet Sizing Combinations */ -@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui.grid > .row > [class*="one wide tablet"].column, - .ui.grid > .column.row > [class*="one wide tablet"].column, - .ui.grid > [class*="one wide tablet"].column, - .ui.column.grid > [class*="one wide tablet"].column { - width: @oneWide !important; - } - .ui.grid > .row > [class*="two wide tablet"].column, - .ui.grid > .column.row > [class*="two wide tablet"].column, - .ui.grid > [class*="two wide tablet"].column, - .ui.column.grid > [class*="two wide tablet"].column { - width: @twoWide !important; - } - .ui.grid > .row > [class*="three wide tablet"].column, - .ui.grid > .column.row > [class*="three wide tablet"].column, - .ui.grid > [class*="three wide tablet"].column, - .ui.column.grid > [class*="three wide tablet"].column { - width: @threeWide !important; - } - .ui.grid > .row > [class*="four wide tablet"].column, - .ui.grid > .column.row > [class*="four wide tablet"].column, - .ui.grid > [class*="four wide tablet"].column, - .ui.column.grid > [class*="four wide tablet"].column { - width: @fourWide !important; - } - .ui.grid > .row > [class*="five wide tablet"].column, - .ui.grid > .column.row > [class*="five wide tablet"].column, - .ui.grid > [class*="five wide tablet"].column, - .ui.column.grid > [class*="five wide tablet"].column { - width: @fiveWide !important; - } - .ui.grid > .row > [class*="six wide tablet"].column, - .ui.grid > .column.row > [class*="six wide tablet"].column, - .ui.grid > [class*="six wide tablet"].column, - .ui.column.grid > [class*="six wide tablet"].column { - width: @sixWide !important; - } - .ui.grid > .row > [class*="seven wide tablet"].column, - .ui.grid > .column.row > [class*="seven wide tablet"].column, - .ui.grid > [class*="seven wide tablet"].column, - .ui.column.grid > [class*="seven wide tablet"].column { - width: @sevenWide !important; - } - .ui.grid > .row > [class*="eight wide tablet"].column, - .ui.grid > .column.row > [class*="eight wide tablet"].column, - .ui.grid > [class*="eight wide tablet"].column, - .ui.column.grid > [class*="eight wide tablet"].column { - width: @eightWide !important; - } - .ui.grid > .row > [class*="nine wide tablet"].column, - .ui.grid > .column.row > [class*="nine wide tablet"].column, - .ui.grid > [class*="nine wide tablet"].column, - .ui.column.grid > [class*="nine wide tablet"].column { - width: @nineWide !important; - } - .ui.grid > .row > [class*="ten wide tablet"].column, - .ui.grid > .column.row > [class*="ten wide tablet"].column, - .ui.grid > [class*="ten wide tablet"].column, - .ui.column.grid > [class*="ten wide tablet"].column { - width: @tenWide !important; - } - .ui.grid > .row > [class*="eleven wide tablet"].column, - .ui.grid > .column.row > [class*="eleven wide tablet"].column, - .ui.grid > [class*="eleven wide tablet"].column, - .ui.column.grid > [class*="eleven wide tablet"].column { - width: @elevenWide !important; - } - .ui.grid > .row > [class*="twelve wide tablet"].column, - .ui.grid > .column.row > [class*="twelve wide tablet"].column, - .ui.grid > [class*="twelve wide tablet"].column, - .ui.column.grid > [class*="twelve wide tablet"].column { - width: @twelveWide !important; - } - .ui.grid > .row > [class*="thirteen wide tablet"].column, - .ui.grid > .column.row > [class*="thirteen wide tablet"].column, - .ui.grid > [class*="thirteen wide tablet"].column, - .ui.column.grid > [class*="thirteen wide tablet"].column { - width: @thirteenWide !important; - } - .ui.grid > .row > [class*="fourteen wide tablet"].column, - .ui.grid > .column.row > [class*="fourteen wide tablet"].column, - .ui.grid > [class*="fourteen wide tablet"].column, - .ui.column.grid > [class*="fourteen wide tablet"].column { - width: @fourteenWide !important; - } - .ui.grid > .row > [class*="fifteen wide tablet"].column, - .ui.grid > .column.row > [class*="fifteen wide tablet"].column, - .ui.grid > [class*="fifteen wide tablet"].column, - .ui.column.grid > [class*="fifteen wide tablet"].column { - width: @fifteenWide !important; - } - .ui.grid > .row > [class*="sixteen wide tablet"].column, - .ui.grid > .column.row > [class*="sixteen wide tablet"].column, - .ui.grid > [class*="sixteen wide tablet"].column, - .ui.column.grid > [class*="sixteen wide tablet"].column { - width: @sixteenWide !important; - } -} + /*---------------------- + Width per Device + -----------------------*/ -/* Computer/Desktop Sizing Combinations */ -@media only screen and (min-width: @computerBreakpoint) { + /* Mobile Sizing Combinations */ + @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { + .ui.grid > .row > [class*="one wide mobile"].column, + .ui.grid > .column.row > [class*="one wide mobile"].column, + .ui.grid > [class*="one wide mobile"].column, + .ui.column.grid > [class*="one wide mobile"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide mobile"].column, + .ui.grid > .column.row > [class*="two wide mobile"].column, + .ui.grid > [class*="two wide mobile"].column, + .ui.column.grid > [class*="two wide mobile"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide mobile"].column, + .ui.grid > .column.row > [class*="three wide mobile"].column, + .ui.grid > [class*="three wide mobile"].column, + .ui.column.grid > [class*="three wide mobile"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide mobile"].column, + .ui.grid > .column.row > [class*="four wide mobile"].column, + .ui.grid > [class*="four wide mobile"].column, + .ui.column.grid > [class*="four wide mobile"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide mobile"].column, + .ui.grid > .column.row > [class*="five wide mobile"].column, + .ui.grid > [class*="five wide mobile"].column, + .ui.column.grid > [class*="five wide mobile"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide mobile"].column, + .ui.grid > .column.row > [class*="six wide mobile"].column, + .ui.grid > [class*="six wide mobile"].column, + .ui.column.grid > [class*="six wide mobile"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide mobile"].column, + .ui.grid > .column.row > [class*="seven wide mobile"].column, + .ui.grid > [class*="seven wide mobile"].column, + .ui.column.grid > [class*="seven wide mobile"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide mobile"].column, + .ui.grid > .column.row > [class*="eight wide mobile"].column, + .ui.grid > [class*="eight wide mobile"].column, + .ui.column.grid > [class*="eight wide mobile"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide mobile"].column, + .ui.grid > .column.row > [class*="nine wide mobile"].column, + .ui.grid > [class*="nine wide mobile"].column, + .ui.column.grid > [class*="nine wide mobile"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide mobile"].column, + .ui.grid > .column.row > [class*="ten wide mobile"].column, + .ui.grid > [class*="ten wide mobile"].column, + .ui.column.grid > [class*="ten wide mobile"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide mobile"].column, + .ui.grid > .column.row > [class*="eleven wide mobile"].column, + .ui.grid > [class*="eleven wide mobile"].column, + .ui.column.grid > [class*="eleven wide mobile"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide mobile"].column, + .ui.grid > .column.row > [class*="twelve wide mobile"].column, + .ui.grid > [class*="twelve wide mobile"].column, + .ui.column.grid > [class*="twelve wide mobile"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide mobile"].column, + .ui.grid > .column.row > [class*="thirteen wide mobile"].column, + .ui.grid > [class*="thirteen wide mobile"].column, + .ui.column.grid > [class*="thirteen wide mobile"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide mobile"].column, + .ui.grid > .column.row > [class*="fourteen wide mobile"].column, + .ui.grid > [class*="fourteen wide mobile"].column, + .ui.column.grid > [class*="fourteen wide mobile"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide mobile"].column, + .ui.grid > .column.row > [class*="fifteen wide mobile"].column, + .ui.grid > [class*="fifteen wide mobile"].column, + .ui.column.grid > [class*="fifteen wide mobile"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide mobile"].column, + .ui.grid > .column.row > [class*="sixteen wide mobile"].column, + .ui.grid > [class*="sixteen wide mobile"].column, + .ui.column.grid > [class*="sixteen wide mobile"].column { + width: @sixteenWide !important; + } + } + + /* Tablet Sizing Combinations */ + @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.grid > .row > [class*="one wide tablet"].column, + .ui.grid > .column.row > [class*="one wide tablet"].column, + .ui.grid > [class*="one wide tablet"].column, + .ui.column.grid > [class*="one wide tablet"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide tablet"].column, + .ui.grid > .column.row > [class*="two wide tablet"].column, + .ui.grid > [class*="two wide tablet"].column, + .ui.column.grid > [class*="two wide tablet"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide tablet"].column, + .ui.grid > .column.row > [class*="three wide tablet"].column, + .ui.grid > [class*="three wide tablet"].column, + .ui.column.grid > [class*="three wide tablet"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide tablet"].column, + .ui.grid > .column.row > [class*="four wide tablet"].column, + .ui.grid > [class*="four wide tablet"].column, + .ui.column.grid > [class*="four wide tablet"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide tablet"].column, + .ui.grid > .column.row > [class*="five wide tablet"].column, + .ui.grid > [class*="five wide tablet"].column, + .ui.column.grid > [class*="five wide tablet"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide tablet"].column, + .ui.grid > .column.row > [class*="six wide tablet"].column, + .ui.grid > [class*="six wide tablet"].column, + .ui.column.grid > [class*="six wide tablet"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide tablet"].column, + .ui.grid > .column.row > [class*="seven wide tablet"].column, + .ui.grid > [class*="seven wide tablet"].column, + .ui.column.grid > [class*="seven wide tablet"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide tablet"].column, + .ui.grid > .column.row > [class*="eight wide tablet"].column, + .ui.grid > [class*="eight wide tablet"].column, + .ui.column.grid > [class*="eight wide tablet"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide tablet"].column, + .ui.grid > .column.row > [class*="nine wide tablet"].column, + .ui.grid > [class*="nine wide tablet"].column, + .ui.column.grid > [class*="nine wide tablet"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide tablet"].column, + .ui.grid > .column.row > [class*="ten wide tablet"].column, + .ui.grid > [class*="ten wide tablet"].column, + .ui.column.grid > [class*="ten wide tablet"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide tablet"].column, + .ui.grid > .column.row > [class*="eleven wide tablet"].column, + .ui.grid > [class*="eleven wide tablet"].column, + .ui.column.grid > [class*="eleven wide tablet"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide tablet"].column, + .ui.grid > .column.row > [class*="twelve wide tablet"].column, + .ui.grid > [class*="twelve wide tablet"].column, + .ui.column.grid > [class*="twelve wide tablet"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide tablet"].column, + .ui.grid > .column.row > [class*="thirteen wide tablet"].column, + .ui.grid > [class*="thirteen wide tablet"].column, + .ui.column.grid > [class*="thirteen wide tablet"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide tablet"].column, + .ui.grid > .column.row > [class*="fourteen wide tablet"].column, + .ui.grid > [class*="fourteen wide tablet"].column, + .ui.column.grid > [class*="fourteen wide tablet"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide tablet"].column, + .ui.grid > .column.row > [class*="fifteen wide tablet"].column, + .ui.grid > [class*="fifteen wide tablet"].column, + .ui.column.grid > [class*="fifteen wide tablet"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide tablet"].column, + .ui.grid > .column.row > [class*="sixteen wide tablet"].column, + .ui.grid > [class*="sixteen wide tablet"].column, + .ui.column.grid > [class*="sixteen wide tablet"].column { + width: @sixteenWide !important; + } + } + + /* Computer/Desktop Sizing Combinations */ + @media only screen and (min-width: @computerBreakpoint) { .ui.grid > .row > [class*="one wide computer"].column, - .ui.grid > .column.row > [class*="one wide computer"].column, - .ui.grid > [class*="one wide computer"].column, - .ui.column.grid > [class*="one wide computer"].column { - width: @oneWide !important; - } - .ui.grid > .row > [class*="two wide computer"].column, - .ui.grid > .column.row > [class*="two wide computer"].column, - .ui.grid > [class*="two wide computer"].column, - .ui.column.grid > [class*="two wide computer"].column { - width: @twoWide !important; - } - .ui.grid > .row > [class*="three wide computer"].column, - .ui.grid > .column.row > [class*="three wide computer"].column, - .ui.grid > [class*="three wide computer"].column, - .ui.column.grid > [class*="three wide computer"].column { - width: @threeWide !important; - } - .ui.grid > .row > [class*="four wide computer"].column, - .ui.grid > .column.row > [class*="four wide computer"].column, - .ui.grid > [class*="four wide computer"].column, - .ui.column.grid > [class*="four wide computer"].column { - width: @fourWide !important; - } - .ui.grid > .row > [class*="five wide computer"].column, - .ui.grid > .column.row > [class*="five wide computer"].column, - .ui.grid > [class*="five wide computer"].column, - .ui.column.grid > [class*="five wide computer"].column { - width: @fiveWide !important; - } - .ui.grid > .row > [class*="six wide computer"].column, - .ui.grid > .column.row > [class*="six wide computer"].column, - .ui.grid > [class*="six wide computer"].column, - .ui.column.grid > [class*="six wide computer"].column { - width: @sixWide !important; - } - .ui.grid > .row > [class*="seven wide computer"].column, - .ui.grid > .column.row > [class*="seven wide computer"].column, - .ui.grid > [class*="seven wide computer"].column, - .ui.column.grid > [class*="seven wide computer"].column { - width: @sevenWide !important; - } - .ui.grid > .row > [class*="eight wide computer"].column, - .ui.grid > .column.row > [class*="eight wide computer"].column, - .ui.grid > [class*="eight wide computer"].column, - .ui.column.grid > [class*="eight wide computer"].column { - width: @eightWide !important; - } - .ui.grid > .row > [class*="nine wide computer"].column, - .ui.grid > .column.row > [class*="nine wide computer"].column, - .ui.grid > [class*="nine wide computer"].column, - .ui.column.grid > [class*="nine wide computer"].column { - width: @nineWide !important; - } - .ui.grid > .row > [class*="ten wide computer"].column, - .ui.grid > .column.row > [class*="ten wide computer"].column, - .ui.grid > [class*="ten wide computer"].column, - .ui.column.grid > [class*="ten wide computer"].column { - width: @tenWide !important; - } - .ui.grid > .row > [class*="eleven wide computer"].column, - .ui.grid > .column.row > [class*="eleven wide computer"].column, - .ui.grid > [class*="eleven wide computer"].column, - .ui.column.grid > [class*="eleven wide computer"].column { - width: @elevenWide !important; - } - .ui.grid > .row > [class*="twelve wide computer"].column, - .ui.grid > .column.row > [class*="twelve wide computer"].column, - .ui.grid > [class*="twelve wide computer"].column, - .ui.column.grid > [class*="twelve wide computer"].column { - width: @twelveWide !important; - } - .ui.grid > .row > [class*="thirteen wide computer"].column, - .ui.grid > .column.row > [class*="thirteen wide computer"].column, - .ui.grid > [class*="thirteen wide computer"].column, - .ui.column.grid > [class*="thirteen wide computer"].column { - width: @thirteenWide !important; - } - .ui.grid > .row > [class*="fourteen wide computer"].column, - .ui.grid > .column.row > [class*="fourteen wide computer"].column, - .ui.grid > [class*="fourteen wide computer"].column, - .ui.column.grid > [class*="fourteen wide computer"].column { - width: @fourteenWide !important; - } - .ui.grid > .row > [class*="fifteen wide computer"].column, - .ui.grid > .column.row > [class*="fifteen wide computer"].column, - .ui.grid > [class*="fifteen wide computer"].column, - .ui.column.grid > [class*="fifteen wide computer"].column { - width: @fifteenWide !important; - } - .ui.grid > .row > [class*="sixteen wide computer"].column, - .ui.grid > .column.row > [class*="sixteen wide computer"].column, - .ui.grid > [class*="sixteen wide computer"].column, - .ui.column.grid > [class*="sixteen wide computer"].column { - width: @sixteenWide !important; - } -} - -/* Large Monitor Sizing Combinations */ -@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){ - .ui.grid > .row > [class*="one wide large screen"].column, - .ui.grid > .column.row > [class*="one wide large screen"].column, - .ui.grid > [class*="one wide large screen"].column, - .ui.column.grid > [class*="one wide large screen"].column { - width: @oneWide !important; - } - .ui.grid > .row > [class*="two wide large screen"].column, - .ui.grid > .column.row > [class*="two wide large screen"].column, - .ui.grid > [class*="two wide large screen"].column, - .ui.column.grid > [class*="two wide large screen"].column { - width: @twoWide !important; - } - .ui.grid > .row > [class*="three wide large screen"].column, - .ui.grid > .column.row > [class*="three wide large screen"].column, - .ui.grid > [class*="three wide large screen"].column, - .ui.column.grid > [class*="three wide large screen"].column { - width: @threeWide !important; - } - .ui.grid > .row > [class*="four wide large screen"].column, - .ui.grid > .column.row > [class*="four wide large screen"].column, - .ui.grid > [class*="four wide large screen"].column, - .ui.column.grid > [class*="four wide large screen"].column { - width: @fourWide !important; - } - .ui.grid > .row > [class*="five wide large screen"].column, - .ui.grid > .column.row > [class*="five wide large screen"].column, - .ui.grid > [class*="five wide large screen"].column, - .ui.column.grid > [class*="five wide large screen"].column { - width: @fiveWide !important; - } - .ui.grid > .row > [class*="six wide large screen"].column, - .ui.grid > .column.row > [class*="six wide large screen"].column, - .ui.grid > [class*="six wide large screen"].column, - .ui.column.grid > [class*="six wide large screen"].column { - width: @sixWide !important; - } - .ui.grid > .row > [class*="seven wide large screen"].column, - .ui.grid > .column.row > [class*="seven wide large screen"].column, - .ui.grid > [class*="seven wide large screen"].column, - .ui.column.grid > [class*="seven wide large screen"].column { - width: @sevenWide !important; - } - .ui.grid > .row > [class*="eight wide large screen"].column, - .ui.grid > .column.row > [class*="eight wide large screen"].column, - .ui.grid > [class*="eight wide large screen"].column, - .ui.column.grid > [class*="eight wide large screen"].column { - width: @eightWide !important; - } - .ui.grid > .row > [class*="nine wide large screen"].column, - .ui.grid > .column.row > [class*="nine wide large screen"].column, - .ui.grid > [class*="nine wide large screen"].column, - .ui.column.grid > [class*="nine wide large screen"].column { - width: @nineWide !important; - } - .ui.grid > .row > [class*="ten wide large screen"].column, - .ui.grid > .column.row > [class*="ten wide large screen"].column, - .ui.grid > [class*="ten wide large screen"].column, - .ui.column.grid > [class*="ten wide large screen"].column { - width: @tenWide !important; - } - .ui.grid > .row > [class*="eleven wide large screen"].column, - .ui.grid > .column.row > [class*="eleven wide large screen"].column, - .ui.grid > [class*="eleven wide large screen"].column, - .ui.column.grid > [class*="eleven wide large screen"].column { - width: @elevenWide !important; - } - .ui.grid > .row > [class*="twelve wide large screen"].column, - .ui.grid > .column.row > [class*="twelve wide large screen"].column, - .ui.grid > [class*="twelve wide large screen"].column, - .ui.column.grid > [class*="twelve wide large screen"].column { - width: @twelveWide !important; - } - .ui.grid > .row > [class*="thirteen wide large screen"].column, - .ui.grid > .column.row > [class*="thirteen wide large screen"].column, - .ui.grid > [class*="thirteen wide large screen"].column, - .ui.column.grid > [class*="thirteen wide large screen"].column { - width: @thirteenWide !important; - } - .ui.grid > .row > [class*="fourteen wide large screen"].column, - .ui.grid > .column.row > [class*="fourteen wide large screen"].column, - .ui.grid > [class*="fourteen wide large screen"].column, - .ui.column.grid > [class*="fourteen wide large screen"].column { - width: @fourteenWide !important; - } - .ui.grid > .row > [class*="fifteen wide large screen"].column, - .ui.grid > .column.row > [class*="fifteen wide large screen"].column, - .ui.grid > [class*="fifteen wide large screen"].column, - .ui.column.grid > [class*="fifteen wide large screen"].column { - width: @fifteenWide !important; - } - .ui.grid > .row > [class*="sixteen wide large screen"].column, - .ui.grid > .column.row > [class*="sixteen wide large screen"].column, - .ui.grid > [class*="sixteen wide large screen"].column, - .ui.column.grid > [class*="sixteen wide large screen"].column { - width: @sixteenWide !important; - } -} - -/* Widescreen Sizing Combinations */ -@media only screen and (min-width: @widescreenMonitorBreakpoint) { - .ui.grid > .row > [class*="one wide widescreen"].column, - .ui.grid > .column.row > [class*="one wide widescreen"].column, - .ui.grid > [class*="one wide widescreen"].column, - .ui.column.grid > [class*="one wide widescreen"].column { - width: @oneWide !important; - } - .ui.grid > .row > [class*="two wide widescreen"].column, - .ui.grid > .column.row > [class*="two wide widescreen"].column, - .ui.grid > [class*="two wide widescreen"].column, - .ui.column.grid > [class*="two wide widescreen"].column { - width: @twoWide !important; - } - .ui.grid > .row > [class*="three wide widescreen"].column, - .ui.grid > .column.row > [class*="three wide widescreen"].column, - .ui.grid > [class*="three wide widescreen"].column, - .ui.column.grid > [class*="three wide widescreen"].column { - width: @threeWide !important; - } - .ui.grid > .row > [class*="four wide widescreen"].column, - .ui.grid > .column.row > [class*="four wide widescreen"].column, - .ui.grid > [class*="four wide widescreen"].column, - .ui.column.grid > [class*="four wide widescreen"].column { - width: @fourWide !important; - } - .ui.grid > .row > [class*="five wide widescreen"].column, - .ui.grid > .column.row > [class*="five wide widescreen"].column, - .ui.grid > [class*="five wide widescreen"].column, - .ui.column.grid > [class*="five wide widescreen"].column { - width: @fiveWide !important; - } - .ui.grid > .row > [class*="six wide widescreen"].column, - .ui.grid > .column.row > [class*="six wide widescreen"].column, - .ui.grid > [class*="six wide widescreen"].column, - .ui.column.grid > [class*="six wide widescreen"].column { - width: @sixWide !important; - } - .ui.grid > .row > [class*="seven wide widescreen"].column, - .ui.grid > .column.row > [class*="seven wide widescreen"].column, - .ui.grid > [class*="seven wide widescreen"].column, - .ui.column.grid > [class*="seven wide widescreen"].column { - width: @sevenWide !important; - } - .ui.grid > .row > [class*="eight wide widescreen"].column, - .ui.grid > .column.row > [class*="eight wide widescreen"].column, - .ui.grid > [class*="eight wide widescreen"].column, - .ui.column.grid > [class*="eight wide widescreen"].column { - width: @eightWide !important; - } - .ui.grid > .row > [class*="nine wide widescreen"].column, - .ui.grid > .column.row > [class*="nine wide widescreen"].column, - .ui.grid > [class*="nine wide widescreen"].column, - .ui.column.grid > [class*="nine wide widescreen"].column { - width: @nineWide !important; - } - .ui.grid > .row > [class*="ten wide widescreen"].column, - .ui.grid > .column.row > [class*="ten wide widescreen"].column, - .ui.grid > [class*="ten wide widescreen"].column, - .ui.column.grid > [class*="ten wide widescreen"].column { - width: @tenWide !important; - } - .ui.grid > .row > [class*="eleven wide widescreen"].column, - .ui.grid > .column.row > [class*="eleven wide widescreen"].column, - .ui.grid > [class*="eleven wide widescreen"].column, - .ui.column.grid > [class*="eleven wide widescreen"].column { - width: @elevenWide !important; - } - .ui.grid > .row > [class*="twelve wide widescreen"].column, - .ui.grid > .column.row > [class*="twelve wide widescreen"].column, - .ui.grid > [class*="twelve wide widescreen"].column, - .ui.column.grid > [class*="twelve wide widescreen"].column { - width: @twelveWide !important; - } - .ui.grid > .row > [class*="thirteen wide widescreen"].column, - .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, - .ui.grid > [class*="thirteen wide widescreen"].column, - .ui.column.grid > [class*="thirteen wide widescreen"].column { - width: @thirteenWide !important; - } - .ui.grid > .row > [class*="fourteen wide widescreen"].column, - .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, - .ui.grid > [class*="fourteen wide widescreen"].column, - .ui.column.grid > [class*="fourteen wide widescreen"].column { - width: @fourteenWide !important; - } - .ui.grid > .row > [class*="fifteen wide widescreen"].column, - .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, - .ui.grid > [class*="fifteen wide widescreen"].column, - .ui.column.grid > [class*="fifteen wide widescreen"].column { - width: @fifteenWide !important; - } - .ui.grid > .row > [class*="sixteen wide widescreen"].column, - .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, - .ui.grid > [class*="sixteen wide widescreen"].column, - .ui.column.grid > [class*="sixteen wide widescreen"].column { - width: @sixteenWide !important; + .ui.grid > .column.row > [class*="one wide computer"].column, + .ui.grid > [class*="one wide computer"].column, + .ui.column.grid > [class*="one wide computer"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide computer"].column, + .ui.grid > .column.row > [class*="two wide computer"].column, + .ui.grid > [class*="two wide computer"].column, + .ui.column.grid > [class*="two wide computer"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide computer"].column, + .ui.grid > .column.row > [class*="three wide computer"].column, + .ui.grid > [class*="three wide computer"].column, + .ui.column.grid > [class*="three wide computer"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide computer"].column, + .ui.grid > .column.row > [class*="four wide computer"].column, + .ui.grid > [class*="four wide computer"].column, + .ui.column.grid > [class*="four wide computer"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide computer"].column, + .ui.grid > .column.row > [class*="five wide computer"].column, + .ui.grid > [class*="five wide computer"].column, + .ui.column.grid > [class*="five wide computer"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide computer"].column, + .ui.grid > .column.row > [class*="six wide computer"].column, + .ui.grid > [class*="six wide computer"].column, + .ui.column.grid > [class*="six wide computer"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide computer"].column, + .ui.grid > .column.row > [class*="seven wide computer"].column, + .ui.grid > [class*="seven wide computer"].column, + .ui.column.grid > [class*="seven wide computer"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide computer"].column, + .ui.grid > .column.row > [class*="eight wide computer"].column, + .ui.grid > [class*="eight wide computer"].column, + .ui.column.grid > [class*="eight wide computer"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide computer"].column, + .ui.grid > .column.row > [class*="nine wide computer"].column, + .ui.grid > [class*="nine wide computer"].column, + .ui.column.grid > [class*="nine wide computer"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide computer"].column, + .ui.grid > .column.row > [class*="ten wide computer"].column, + .ui.grid > [class*="ten wide computer"].column, + .ui.column.grid > [class*="ten wide computer"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide computer"].column, + .ui.grid > .column.row > [class*="eleven wide computer"].column, + .ui.grid > [class*="eleven wide computer"].column, + .ui.column.grid > [class*="eleven wide computer"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide computer"].column, + .ui.grid > .column.row > [class*="twelve wide computer"].column, + .ui.grid > [class*="twelve wide computer"].column, + .ui.column.grid > [class*="twelve wide computer"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide computer"].column, + .ui.grid > .column.row > [class*="thirteen wide computer"].column, + .ui.grid > [class*="thirteen wide computer"].column, + .ui.column.grid > [class*="thirteen wide computer"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide computer"].column, + .ui.grid > .column.row > [class*="fourteen wide computer"].column, + .ui.grid > [class*="fourteen wide computer"].column, + .ui.column.grid > [class*="fourteen wide computer"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide computer"].column, + .ui.grid > .column.row > [class*="fifteen wide computer"].column, + .ui.grid > [class*="fifteen wide computer"].column, + .ui.column.grid > [class*="fifteen wide computer"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide computer"].column, + .ui.grid > .column.row > [class*="sixteen wide computer"].column, + .ui.grid > [class*="sixteen wide computer"].column, + .ui.column.grid > [class*="sixteen wide computer"].column { + width: @sixteenWide !important; + } + } + + /* Large Monitor Sizing Combinations */ + @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui.grid > .row > [class*="one wide large screen"].column, + .ui.grid > .column.row > [class*="one wide large screen"].column, + .ui.grid > [class*="one wide large screen"].column, + .ui.column.grid > [class*="one wide large screen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide large screen"].column, + .ui.grid > .column.row > [class*="two wide large screen"].column, + .ui.grid > [class*="two wide large screen"].column, + .ui.column.grid > [class*="two wide large screen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide large screen"].column, + .ui.grid > .column.row > [class*="three wide large screen"].column, + .ui.grid > [class*="three wide large screen"].column, + .ui.column.grid > [class*="three wide large screen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide large screen"].column, + .ui.grid > .column.row > [class*="four wide large screen"].column, + .ui.grid > [class*="four wide large screen"].column, + .ui.column.grid > [class*="four wide large screen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide large screen"].column, + .ui.grid > .column.row > [class*="five wide large screen"].column, + .ui.grid > [class*="five wide large screen"].column, + .ui.column.grid > [class*="five wide large screen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide large screen"].column, + .ui.grid > .column.row > [class*="six wide large screen"].column, + .ui.grid > [class*="six wide large screen"].column, + .ui.column.grid > [class*="six wide large screen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide large screen"].column, + .ui.grid > .column.row > [class*="seven wide large screen"].column, + .ui.grid > [class*="seven wide large screen"].column, + .ui.column.grid > [class*="seven wide large screen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide large screen"].column, + .ui.grid > .column.row > [class*="eight wide large screen"].column, + .ui.grid > [class*="eight wide large screen"].column, + .ui.column.grid > [class*="eight wide large screen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide large screen"].column, + .ui.grid > .column.row > [class*="nine wide large screen"].column, + .ui.grid > [class*="nine wide large screen"].column, + .ui.column.grid > [class*="nine wide large screen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide large screen"].column, + .ui.grid > .column.row > [class*="ten wide large screen"].column, + .ui.grid > [class*="ten wide large screen"].column, + .ui.column.grid > [class*="ten wide large screen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide large screen"].column, + .ui.grid > .column.row > [class*="eleven wide large screen"].column, + .ui.grid > [class*="eleven wide large screen"].column, + .ui.column.grid > [class*="eleven wide large screen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide large screen"].column, + .ui.grid > .column.row > [class*="twelve wide large screen"].column, + .ui.grid > [class*="twelve wide large screen"].column, + .ui.column.grid > [class*="twelve wide large screen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide large screen"].column, + .ui.grid > .column.row > [class*="thirteen wide large screen"].column, + .ui.grid > [class*="thirteen wide large screen"].column, + .ui.column.grid > [class*="thirteen wide large screen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide large screen"].column, + .ui.grid > .column.row > [class*="fourteen wide large screen"].column, + .ui.grid > [class*="fourteen wide large screen"].column, + .ui.column.grid > [class*="fourteen wide large screen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide large screen"].column, + .ui.grid > .column.row > [class*="fifteen wide large screen"].column, + .ui.grid > [class*="fifteen wide large screen"].column, + .ui.column.grid > [class*="fifteen wide large screen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide large screen"].column, + .ui.grid > .column.row > [class*="sixteen wide large screen"].column, + .ui.grid > [class*="sixteen wide large screen"].column, + .ui.column.grid > [class*="sixteen wide large screen"].column { + width: @sixteenWide !important; + } + } + + /* Widescreen Sizing Combinations */ + @media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.grid > .row > [class*="one wide widescreen"].column, + .ui.grid > .column.row > [class*="one wide widescreen"].column, + .ui.grid > [class*="one wide widescreen"].column, + .ui.column.grid > [class*="one wide widescreen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide widescreen"].column, + .ui.grid > .column.row > [class*="two wide widescreen"].column, + .ui.grid > [class*="two wide widescreen"].column, + .ui.column.grid > [class*="two wide widescreen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide widescreen"].column, + .ui.grid > .column.row > [class*="three wide widescreen"].column, + .ui.grid > [class*="three wide widescreen"].column, + .ui.column.grid > [class*="three wide widescreen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide widescreen"].column, + .ui.grid > .column.row > [class*="four wide widescreen"].column, + .ui.grid > [class*="four wide widescreen"].column, + .ui.column.grid > [class*="four wide widescreen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide widescreen"].column, + .ui.grid > .column.row > [class*="five wide widescreen"].column, + .ui.grid > [class*="five wide widescreen"].column, + .ui.column.grid > [class*="five wide widescreen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide widescreen"].column, + .ui.grid > .column.row > [class*="six wide widescreen"].column, + .ui.grid > [class*="six wide widescreen"].column, + .ui.column.grid > [class*="six wide widescreen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide widescreen"].column, + .ui.grid > .column.row > [class*="seven wide widescreen"].column, + .ui.grid > [class*="seven wide widescreen"].column, + .ui.column.grid > [class*="seven wide widescreen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide widescreen"].column, + .ui.grid > .column.row > [class*="eight wide widescreen"].column, + .ui.grid > [class*="eight wide widescreen"].column, + .ui.column.grid > [class*="eight wide widescreen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide widescreen"].column, + .ui.grid > .column.row > [class*="nine wide widescreen"].column, + .ui.grid > [class*="nine wide widescreen"].column, + .ui.column.grid > [class*="nine wide widescreen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide widescreen"].column, + .ui.grid > .column.row > [class*="ten wide widescreen"].column, + .ui.grid > [class*="ten wide widescreen"].column, + .ui.column.grid > [class*="ten wide widescreen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide widescreen"].column, + .ui.grid > .column.row > [class*="eleven wide widescreen"].column, + .ui.grid > [class*="eleven wide widescreen"].column, + .ui.column.grid > [class*="eleven wide widescreen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide widescreen"].column, + .ui.grid > .column.row > [class*="twelve wide widescreen"].column, + .ui.grid > [class*="twelve wide widescreen"].column, + .ui.column.grid > [class*="twelve wide widescreen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide widescreen"].column, + .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, + .ui.grid > [class*="thirteen wide widescreen"].column, + .ui.column.grid > [class*="thirteen wide widescreen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, + .ui.grid > [class*="fourteen wide widescreen"].column, + .ui.column.grid > [class*="fourteen wide widescreen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, + .ui.grid > [class*="fifteen wide widescreen"].column, + .ui.column.grid > [class*="fifteen wide widescreen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide widescreen"].column, + .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, + .ui.grid > [class*="sixteen wide widescreen"].column, + .ui.column.grid > [class*="sixteen wide widescreen"].column { + width: @sixteenWide !important; + } } } @@ -981,11 +987,13 @@ padding-right: (@relaxedGutterWidth / 2); } - .ui[class*="very relaxed"].grid > .column:not(.row), - .ui[class*="very relaxed"].grid > .row > .column, - .ui.grid > [class*="very relaxed"].row > .column { - padding-left: (@veryRelaxedGutterWidth / 2); - padding-right: (@veryRelaxedGutterWidth / 2); + & when (@variationGridVeryRelaxed) { + .ui[class*="very relaxed"].grid > .column:not(.row), + .ui[class*="very relaxed"].grid > .row > .column, + .ui.grid > [class*="very relaxed"].row > .column { + padding-left: (@veryRelaxedGutterWidth / 2); + padding-right: (@veryRelaxedGutterWidth / 2); + } } /* Coupling with UI Divider */ @@ -994,10 +1002,12 @@ margin-left: (@relaxedGutterWidth / 2); margin-right: (@relaxedGutterWidth / 2); } - .ui[class*="very relaxed"].grid .row + .ui.divider, - .ui.grid [class*="very relaxed"].row + .ui.divider { - margin-left: (@veryRelaxedGutterWidth / 2); - margin-right: (@veryRelaxedGutterWidth / 2); + & when (@variationGridVeryRelaxed) { + .ui[class*="very relaxed"].grid .row + .ui.divider, + .ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); + } } } @@ -1042,17 +1052,19 @@ box-shadow: @dividedBorder; } - /* Swap from padding to margin on columns to have dividers align */ - .ui[class*="vertically divided"].grid > .column:not(.row), - .ui[class*="vertically divided"].grid > .row > .column { - margin-top: (@rowSpacing / 2); - margin-bottom: (@rowSpacing / 2); - padding-top: 0; - padding-bottom: 0; - } - .ui[class*="vertically divided"].grid > .row { - margin-top: 0; - margin-bottom: 0; + & when (@variationGridVertical) { + /* Swap from padding to margin on columns to have dividers align */ + .ui[class*="vertically divided"].grid > .column:not(.row), + .ui[class*="vertically divided"].grid > .row > .column { + margin-top: (@rowSpacing / 2); + margin-bottom: (@rowSpacing / 2); + padding-top: 0; + padding-bottom: 0; + } + .ui[class*="vertically divided"].grid > .row { + margin-top: 0; + margin-bottom: 0; + } } @@ -1063,9 +1075,11 @@ box-shadow: none; } - /* No space on top of first row */ - .ui[class*="vertically divided"].grid > .row:first-child > .column { - margin-top: 0; + & when (@variationGridVertical) { + /* No space on top of first row */ + .ui[class*="vertically divided"].grid > .row:first-child > .column { + margin-top: 0; + } } @@ -1077,21 +1091,23 @@ box-shadow: none; } - /* Vertically Divided */ - .ui[class*="vertically divided"].grid > .row { - position: relative; - } - .ui[class*="vertically divided"].grid > .row:before { - position: absolute; - content: ""; - top: 0; - left: 0; + & when (@variationGridVertical) { + /* Vertically Divided */ + .ui[class*="vertically divided"].grid > .row { + position: relative; + } + .ui[class*="vertically divided"].grid > .row:before { + position: absolute; + content: ""; + top: 0; + left: 0; - width: e(%("calc(100%% - %d)", @gutterWidth)); - height: 1px; + width: e(%("calc(100%% - %d)", @gutterWidth)); + height: 1px; - margin: 0 (@gutterWidth / 2); - box-shadow: @verticallyDividedBorder; + margin: 0 (@gutterWidth / 2); + box-shadow: @verticallyDividedBorder; + } } & when (@variationGridPadded) { @@ -1101,9 +1117,11 @@ width: 100%; } } - /* First Row Vertically Divided */ - .ui[class*="vertically divided"].grid > .row:first-child:before { - box-shadow: none; + & when (@variationGridVertical) { + /* First Row Vertically Divided */ + .ui[class*="vertically divided"].grid > .row:first-child:before { + box-shadow: none; + } } & when (@variationGridInverted) { /* Inverted Divided */ @@ -1115,21 +1133,25 @@ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { box-shadow: none; } - .ui.inverted[class*="vertically divided"].grid > .row:before { - box-shadow: @verticallyDividedInvertedBorder; + & when (@variationGridVertical) { + .ui.inverted[class*="vertically divided"].grid > .row:before { + box-shadow: @verticallyDividedInvertedBorder; + } } } - & when (@variationGridRelaxed) { + & when (@variationGridRelaxed) and (@variationGridVertical) { /* Relaxed */ .ui.relaxed[class*="vertically divided"].grid > .row:before { margin-left: (@relaxedGutterWidth / 2); margin-right: (@relaxedGutterWidth / 2); width: e(%("calc(100%% - %d)", @relaxedGutterWidth)); } - .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { - margin-left: (@veryRelaxedGutterWidth / 2); - margin-right: (@veryRelaxedGutterWidth / 2); - width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth)); + & when (@variationGridVeryRelaxed) { + .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); + width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth)); + } } } } @@ -1170,6 +1192,8 @@ .ui.relaxed.celled.grid > .row > .column { padding: @celledRelaxedPadding; } + } + & when (@variationGridVeryRelaxed) { .ui[class*="very relaxed"].celled.grid > .column:not(.row), .ui[class*="very relaxed"].celled.grid > .row > .column { padding: @celledVeryRelaxedPadding; @@ -1320,20 +1344,22 @@ each(@colors, { }) -/*---------------------- - Equal Width ------------------------*/ +& when (@variationGridEqualWidth) { + /*---------------------- + Equal Width + -----------------------*/ -.ui[class*="equal width"].grid > .column:not(.row), -.ui[class*="equal width"].grid > .row > .column, -.ui.grid > [class*="equal width"].row > .column { - display: inline-block; - flex-grow: 1; -} -.ui[class*="equal width"].grid > .wide.column, -.ui[class*="equal width"].grid > .row > .wide.column, -.ui.grid > [class*="equal width"].row > .wide.column { - flex-grow: 0; + .ui[class*="equal width"].grid > .column:not(.row), + .ui[class*="equal width"].grid > .row > .column, + .ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-grow: 1; + } + .ui[class*="equal width"].grid > .wide.column, + .ui[class*="equal width"].grid > .row > .wide.column, + .ui.grid > [class*="equal width"].row > .wide.column { + flex-grow: 0; + } } & when (@variationGridReversed) { @@ -1905,9 +1931,11 @@ each(@colors, { .ui.compact.relaxed.celled.grid > .row > .column { padding: @compactCelledRelaxedPadding; } - .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), - .ui.compact[class*="very relaxed"].celled.grid > .row > .column { - padding: @compactCelledVeryRelaxedPadding; + & when (@variationGridVeryRelaxed) { + .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), + .ui.compact[class*="very relaxed"].celled.grid > .row > .column { + padding: @compactCelledVeryRelaxedPadding; + } } } @@ -1915,43 +1943,47 @@ each(@colors, { Very compact -----------------*/ - .ui.ui.ui[class*="very compact"].grid { - margin: -(@veryCompactGutterWidth / 2); - } + & when (@variationGridVeryCompact) { + .ui.ui.ui[class*="very compact"].grid { + margin: -(@veryCompactGutterWidth / 2); + } - .ui.ui.ui[class*="very compact"].grid > .column:not(.row), - .ui.ui.ui[class*="very compact"].grid > .row > .column { - padding-left: (@veryCompactGutterWidth / 2); - padding-right: (@veryCompactGutterWidth / 2); - } + .ui.ui.ui[class*="very compact"].grid > .column:not(.row), + .ui.ui.ui[class*="very compact"].grid > .row > .column { + padding-left: (@veryCompactGutterWidth / 2); + padding-right: (@veryCompactGutterWidth / 2); + } - .ui.ui.ui[class*="very compact"].grid > * { - padding-left: (@veryCompactGutterWidth / 2); - padding-right: (@veryCompactGutterWidth / 2); - } + .ui.ui.ui[class*="very compact"].grid > * { + padding-left: (@veryCompactGutterWidth / 2); + padding-right: (@veryCompactGutterWidth / 2); + } - /* Row */ - .ui.ui.ui[class*="very compact"].grid > .row { - padding-top: (@veryCompactRowSpacing / 2); - padding-bottom: (@veryCompactRowSpacing / 2); - padding-left: 0; - padding-right: 0; - } + /* Row */ + .ui.ui.ui[class*="very compact"].grid > .row { + padding-top: (@veryCompactRowSpacing / 2); + padding-bottom: (@veryCompactRowSpacing / 2); + padding-left: 0; + padding-right: 0; + } - /* Columns */ - .ui.ui.ui[class*="very compact"].grid > .column:not(.row) { - padding-top: (@veryCompactRowSpacing / 2); - padding-bottom: (@veryCompactRowSpacing / 2); - } - & when (@variationGridRelaxed) and (@variationGridCelled) { - /* Relaxed + Celled */ - .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row), - .ui[class*="very compact"].relaxed.celled.grid > .row > .column { - padding: @veryCompactCelledRelaxedPadding; + /* Columns */ + .ui.ui.ui[class*="very compact"].grid > .column:not(.row) { + padding-top: (@veryCompactRowSpacing / 2); + padding-bottom: (@veryCompactRowSpacing / 2); } - .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row), - .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column { - padding: @veryCompactCelledVeryRelaxedPadding; + & when (@variationGridRelaxed) and (@variationGridCelled) { + /* Relaxed + Celled */ + .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row), + .ui[class*="very compact"].relaxed.celled.grid > .row > .column { + padding: @veryCompactCelledRelaxedPadding; + } + & when (@variationGridVeryRelaxed) { + .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row), + .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column { + padding: @veryCompactCelledVeryRelaxedPadding; + } + } } } } diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 36dbc2285f..d882977d23 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -271,9 +271,9 @@ } } -/* Pointing */ -.ui.menu .pointing.dropdown.item .menu { - margin-top: @pointingDropdownMenuDistance; + /* Pointing */ + .ui.menu .pointing.dropdown.item .menu { + margin-top: @pointingDropdownMenuDistance; } & when (@variationMenuInverted) { @@ -953,10 +953,11 @@ Floated Menu / Item .ui.vertical.secondary.menu .item > .menu .item { background-color: transparent; } - - /* Inverted */ - .ui.secondary.inverted.menu { - background-color: transparent; + & when (@variationMenuInverted) { + /* Inverted */ + .ui.secondary.inverted.menu { + background-color: transparent; + } } } @@ -1223,51 +1224,59 @@ Floated Menu / Item } } -/*-------------- - Icon Only ----------------*/ +& when (@variationMenuIcon) { + /*-------------- + Icon Only + ---------------*/ -/* Vertical Menu */ -.ui.vertical.icon.menu { - display: inline-block; - width: auto; -} + & when (@variationMenuVertical) { + /* Vertical Menu */ + .ui.vertical.icon.menu { + display: inline-block; + width: auto; + } + } -/* Item */ -.ui.icon.menu .item { - height: auto; - text-align: @iconMenuTextAlign; - color: @iconMenuItemColor; -} + /* Item */ + .ui.icon.menu .item { + height: auto; + text-align: @iconMenuTextAlign; + color: @iconMenuItemColor; + } -/* Icon */ -.ui.icon.menu .item > i.icon:not(.dropdown) { - margin: 0; - opacity: 1; -} + /* Icon */ + .ui.icon.menu .item > i.icon:not(.dropdown) { + margin: 0; + opacity: 1; + } -/* Icon Glyph */ -.ui.icon.menu i.icon:before { - opacity: 1; -} + /* Icon Glyph */ + .ui.icon.menu i.icon:before { + opacity: 1; + } -/* (x) Item Icon */ -.ui.menu .icon.item > i.icon { - width: auto; - margin: 0 auto; -} + /* (x) Item Icon */ + .ui.menu .icon.item > i.icon { + width: auto; + margin: 0 auto; + } -/* Vertical Icon */ -.ui.vertical.icon.menu .item > i.icon:not(.dropdown) { - display: block; - opacity: 1; - margin: 0 auto; - float: none; -} + /* Vertical Icon */ + & when (@variationMenuVertical) { + .ui.vertical.icon.menu .item > i.icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0 auto; + float: none; + } + } -/* Inverted */ -.ui.inverted.icon.menu .item { - color: @iconMenuInvertedItemColor; + /* Inverted */ + & when (@variationMenuInverted) { + .ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; + } + } } & when (@variationMenuLabeled) { @@ -1639,38 +1648,40 @@ each(@colors, { display: none; } -.ui.menu.two.item .item { - width: 50%; -} -.ui.menu.three.item .item { - width: 33.333%; -} -.ui.menu.four.item .item { - width: 25%; -} -.ui.menu.five.item .item { - width: 20%; -} -.ui.menu.six.item .item { - width: 16.666%; -} -.ui.menu.seven.item .item { - width: 14.285%; -} -.ui.menu.eight.item .item { - width: 12.500%; -} -.ui.menu.nine.item .item { - width: 11.11%; -} -.ui.menu.ten.item .item { - width: 10.0%; -} -.ui.menu.eleven.item .item { - width: 9.09%; -} -.ui.menu.twelve.item .item { - width: 8.333%; +& when (@variationMenuEqualWidth) { + .ui.menu.two.item .item { + width: 50%; + } + .ui.menu.three.item .item { + width: 33.333%; + } + .ui.menu.four.item .item { + width: 25%; + } + .ui.menu.five.item .item { + width: 20%; + } + .ui.menu.six.item .item { + width: 16.666%; + } + .ui.menu.seven.item .item { + width: 14.285%; + } + .ui.menu.eight.item .item { + width: 12.500%; + } + .ui.menu.nine.item .item { + width: 11.11%; + } + .ui.menu.ten.item .item { + width: 10.0%; + } + .ui.menu.eleven.item .item { + width: 9.09%; + } + .ui.menu.twelve.item .item { + width: 8.333%; + } } & when (@variationMenuFixed) { @@ -1914,8 +1925,10 @@ each(@colors, { .ui.menu { font-size: @medium; } -.ui.vertical.menu { - width: @mediumWidth; +& when (@variationMenuVertical) { + .ui.vertical.menu { + width: @mediumWidth; + } } & when not (@variationMenuSizes = false) { each(@variationMenuSizes, { @@ -1926,8 +1939,10 @@ each(@colors, { .ui.@{value}.menu .dropdown .menu > .item { font-size: @s; } - .ui.@{value}.vertical.menu:not(.icon) { - width: @@w; + & when (@variationMenuVertical) { + .ui.@{value}.vertical.menu:not(.icon) { + width: @@w; + } } }) } diff --git a/src/definitions/collections/message.less b/src/definitions/collections/message.less index 9d0e7b970f..4728c3940c 100755 --- a/src/definitions/collections/message.less +++ b/src/definitions/collections/message.less @@ -105,13 +105,14 @@ margin-bottom: 0; } - -/* Icon */ -.ui.icon.message > .icons, -.ui.icon.message > i.icon { - margin-right: @iconDistance; - &:last-child { - margin: 0 0 0 @iconDistance; +& when (@variationMessageIcon) { + /* Icon */ + .ui.icon.message > .icons, + .ui.icon.message > i.icon { + margin-right: @iconDistance; + &:last-child { + margin: 0 0 0 @iconDistance; + } } } diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 2adf6481ae..7b9b57a241 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -864,124 +864,128 @@ each(@colors, { }) -/*-------------- - Column Count ----------------*/ +& when (@variationTableEqualWidth) { + /*-------------- + Column Count + ---------------*/ -/* Grid Based */ -.ui.one.column.table td { - width: @oneColumn; -} -.ui.two.column.table td { - width: @twoColumn; -} -.ui.three.column.table td { - width: @threeColumn; -} -.ui.four.column.table td { - width: @fourColumn; -} -.ui.five.column.table td { - width: @fiveColumn; -} -.ui.six.column.table td { - width: @sixColumn; -} -.ui.seven.column.table td { - width: @sevenColumn; -} -.ui.eight.column.table td { - width: @eightColumn; -} -.ui.nine.column.table td { - width: @nineColumn; -} -.ui.ten.column.table td { - width: @tenColumn; -} -.ui.eleven.column.table td { - width: @elevenColumn; -} -.ui.twelve.column.table td { - width: @twelveColumn; -} -.ui.thirteen.column.table td { - width: @thirteenColumn; -} -.ui.fourteen.column.table td { - width: @fourteenColumn; -} -.ui.fifteen.column.table td { - width: @fifteenColumn; -} -.ui.sixteen.column.table td { - width: @sixteenColumn; + /* Grid Based */ + .ui.one.column.table td { + width: @oneColumn; + } + .ui.two.column.table td { + width: @twoColumn; + } + .ui.three.column.table td { + width: @threeColumn; + } + .ui.four.column.table td { + width: @fourColumn; + } + .ui.five.column.table td { + width: @fiveColumn; + } + .ui.six.column.table td { + width: @sixColumn; + } + .ui.seven.column.table td { + width: @sevenColumn; + } + .ui.eight.column.table td { + width: @eightColumn; + } + .ui.nine.column.table td { + width: @nineColumn; + } + .ui.ten.column.table td { + width: @tenColumn; + } + .ui.eleven.column.table td { + width: @elevenColumn; + } + .ui.twelve.column.table td { + width: @twelveColumn; + } + .ui.thirteen.column.table td { + width: @thirteenColumn; + } + .ui.fourteen.column.table td { + width: @fourteenColumn; + } + .ui.fifteen.column.table td { + width: @fifteenColumn; + } + .ui.sixteen.column.table td { + width: @sixteenColumn; + } } -/* Column Width */ -.ui.table th.one.wide, -.ui.table td.one.wide { - width: @oneWide; -} -.ui.table th.two.wide, -.ui.table td.two.wide { - width: @twoWide; -} -.ui.table th.three.wide, -.ui.table td.three.wide { - width: @threeWide; -} -.ui.table th.four.wide, -.ui.table td.four.wide { - width: @fourWide; -} -.ui.table th.five.wide, -.ui.table td.five.wide { - width: @fiveWide; -} -.ui.table th.six.wide, -.ui.table td.six.wide { - width: @sixWide; -} -.ui.table th.seven.wide, -.ui.table td.seven.wide { - width: @sevenWide; -} -.ui.table th.eight.wide, -.ui.table td.eight.wide { - width: @eightWide; -} -.ui.table th.nine.wide, -.ui.table td.nine.wide { - width: @nineWide; -} -.ui.table th.ten.wide, -.ui.table td.ten.wide { - width: @tenWide; -} -.ui.table th.eleven.wide, -.ui.table td.eleven.wide { - width: @elevenWide; -} -.ui.table th.twelve.wide, -.ui.table td.twelve.wide { - width: @twelveWide; -} -.ui.table th.thirteen.wide, -.ui.table td.thirteen.wide { - width: @thirteenWide; -} -.ui.table th.fourteen.wide, -.ui.table td.fourteen.wide { - width: @fourteenWide; -} -.ui.table th.fifteen.wide, -.ui.table td.fifteen.wide { - width: @fifteenWide; -} -.ui.table th.sixteen.wide, -.ui.table td.sixteen.wide { - width: @sixteenWide; +& when (@variationTableWide) { + /* Column Width */ + .ui.table th.one.wide, + .ui.table td.one.wide { + width: @oneWide; + } + .ui.table th.two.wide, + .ui.table td.two.wide { + width: @twoWide; + } + .ui.table th.three.wide, + .ui.table td.three.wide { + width: @threeWide; + } + .ui.table th.four.wide, + .ui.table td.four.wide { + width: @fourWide; + } + .ui.table th.five.wide, + .ui.table td.five.wide { + width: @fiveWide; + } + .ui.table th.six.wide, + .ui.table td.six.wide { + width: @sixWide; + } + .ui.table th.seven.wide, + .ui.table td.seven.wide { + width: @sevenWide; + } + .ui.table th.eight.wide, + .ui.table td.eight.wide { + width: @eightWide; + } + .ui.table th.nine.wide, + .ui.table td.nine.wide { + width: @nineWide; + } + .ui.table th.ten.wide, + .ui.table td.ten.wide { + width: @tenWide; + } + .ui.table th.eleven.wide, + .ui.table td.eleven.wide { + width: @elevenWide; + } + .ui.table th.twelve.wide, + .ui.table td.twelve.wide { + width: @twelveWide; + } + .ui.table th.thirteen.wide, + .ui.table td.thirteen.wide { + width: @thirteenWide; + } + .ui.table th.fourteen.wide, + .ui.table td.fourteen.wide { + width: @fourteenWide; + } + .ui.table th.fifteen.wide, + .ui.table td.fifteen.wide { + width: @fifteenWide; + } + .ui.table th.sixteen.wide, + .ui.table td.sixteen.wide { + width: @sixteenWide; + } } & when (@variationTableSortable) { @@ -1137,7 +1141,7 @@ each(@colors, { } } -& when (@variationTableBasic) { +& when (@variationTableBasic) or (@variationTableVeryBasic){ /*-------------- Basic ---------------*/ @@ -1171,38 +1175,40 @@ each(@colors, { background-color: @basicTableStripedBackground; } } - /* Very Basic */ - .ui[class*="very basic"].table { - border: none; - } - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { - padding: @basicTableCellPadding; - } - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child , - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { - padding-left: 0; - } - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, - .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot >tr > td:last-child { - padding-right: 0; - } - .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { - padding-top: 0; + & when (@variationTableVeryBasic) { + /* Very Basic */ + .ui[class*="very basic"].table { + border: none; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { + padding: @basicTableCellPadding; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { + padding-left: 0; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, + .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child { + padding-right: 0; + } + .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { + padding-top: 0; + } } } @@ -1237,7 +1243,7 @@ each(@colors, { } } -& when (@variationTablePadded) { +& when (@variationTablePadded) or (@variationTableVeryPadded) { /*-------------- Padded ---------------*/ @@ -1259,22 +1265,24 @@ each(@colors, { padding: @paddedVerticalPadding @paddedHorizontalPadding; } - /* Very */ - .ui[class*="very padded"].table > tr > th, - .ui[class*="very padded"].table > thead > tr > th, - .ui[class*="very padded"].table > tbody > tr > th, - .ui[class*="very padded"].table > tfoot > tr > th { - padding-left: @veryPaddedHorizontalPadding; - padding-right: @veryPaddedHorizontalPadding; - } - .ui[class*="very padded"].table > tr > td, - .ui[class*="very padded"].table > tbody > tr > td , - .ui[class*="very padded"].table > tfoot > tr > td { - padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; + & when (@variationTableVeryPadded) { + /* Very */ + .ui[class*="very padded"].table > tr > th, + .ui[class*="very padded"].table > thead > tr > th, + .ui[class*="very padded"].table > tbody > tr > th, + .ui[class*="very padded"].table > tfoot > tr > th { + padding-left: @veryPaddedHorizontalPadding; + padding-right: @veryPaddedHorizontalPadding; + } + .ui[class*="very padded"].table > tr > td, + .ui[class*="very padded"].table > tbody > tr > td, + .ui[class*="very padded"].table > tfoot > tr > td { + padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; + } } } -& when (@variationTableCompact) { +& when (@variationTableCompact) or (@variationTableVeryCompact) { /*-------------- Compact ---------------*/ @@ -1292,18 +1300,20 @@ each(@colors, { padding: @compactVerticalPadding @compactHorizontalPadding; } - /* Very */ - .ui[class*="very compact"].table > tr > th, - .ui[class*="very compact"].table > thead > tr > th, - .ui[class*="very compact"].table > tbody > tr > th, - .ui[class*="very compact"].table > tfoot > tr > th { - padding-left: @veryCompactHorizontalPadding; - padding-right: @veryCompactHorizontalPadding; - } - .ui[class*="very compact"].table > tr > td, - .ui[class*="very compact"].table > tbody > tr > td , - .ui[class*="very compact"].table > tfoot > tr > td { - padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; + & when (@variationTableVeryCompact) { + /* Very */ + .ui[class*="very compact"].table > tr > th, + .ui[class*="very compact"].table > thead > tr > th, + .ui[class*="very compact"].table > tbody > tr > th, + .ui[class*="very compact"].table > tfoot > tr > th { + padding-left: @veryCompactHorizontalPadding; + padding-right: @veryCompactHorizontalPadding; + } + .ui[class*="very compact"].table > tr > td, + .ui[class*="very compact"].table > tbody > tr > td, + .ui[class*="very compact"].table > tfoot > tr > td { + padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; + } } } diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 319bc2eb13..018dc29530 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -123,51 +123,52 @@ background-image: @activeBackgroundImage; } +& when (@variationButtonLoading) { + /*-------------- + Loading + ---------------*/ -/*-------------- - Loading ----------------*/ + /* Specificity hack */ + .ui.loading.loading.loading.loading.loading.loading.button { + position: relative; + cursor: default; + text-shadow: none !important; + color: transparent; + opacity: @loadingOpacity; + pointer-events: @loadingPointerEvents; + transition: @loadingTransition; + } + .ui.loading.button:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; -/* Specificity hack */ -.ui.loading.loading.loading.loading.loading.loading.button { - position: relative; - cursor: default; - text-shadow: none !important; - color: transparent; - opacity: @loadingOpacity; - pointer-events: @loadingPointerEvents; - transition: @loadingTransition; -} -.ui.loading.button:before { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - border-radius: @circularRadius; - border: @loaderLineWidth solid @invertedLoaderFillColor; -} -.ui.loading.button:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @invertedLoaderFillColor; + } + .ui.loading.button:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; - border-radius: @circularRadius; + border-radius: @circularRadius; - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid currentColor; - color: @invertedLoaderLineColor; + animation: loader @loaderSpeed infinite linear; + border: @loaderLineWidth solid currentColor; + color: @invertedLoaderLineColor; - box-shadow: 0 0 0 1px transparent; + box-shadow: 0 0 0 1px transparent; + } } & when (@variationButtonLabeledIcon){ .ui.labeled.icon.loading.button .icon { @@ -730,20 +731,22 @@ }) } -/*-------------- - Icon Only ----------------*/ +& when (@variationButtonIcon) { + /*-------------- + Icon Only + ---------------*/ -.ui.icon.buttons .button, -.ui.icon.button:not(.animated):not(.compact):not(.labeled) { - padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); -} -.ui.animated.icon.button > .content > .icon, -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { - opacity: @iconButtonOpacity; - margin: 0 !important; - vertical-align: top; + .ui.icon.buttons .button, + .ui.icon.button:not(.animated):not(.compact):not(.labeled) { + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); + } + .ui.animated.icon.button > .content > .icon, + .ui.icon.buttons .button > .icon, + .ui.icon.button > .icon { + opacity: @iconButtonOpacity; + margin: 0 !important; + vertical-align: top; + } } .ui.animated.button > .content > .icon { vertical-align: top; @@ -1291,7 +1294,8 @@ .ui.fluid.button { display: block; } - +} +& when (@variationButtonEqualWidth) { .ui.two.buttons { width: 100%; } @@ -1379,57 +1383,63 @@ .ui.twelve.buttons > .button { width: 8.3333%; } +} - /* Fluid Vertical Buttons */ - .ui.fluid.vertical.buttons, - .ui.fluid.vertical.buttons > .button { - display: flex; - width: auto; - justify-content: center; +& when (@variationButtonVertical) { + & when (@variationButtonFluid) { + /* Fluid Vertical Buttons */ + .ui.fluid.vertical.buttons, + .ui.fluid.vertical.buttons > .button { + display: flex; + width: auto; + justify-content: center; + } } - .ui.two.vertical.buttons > .button { - height: 50%; - } + & when (@variationButtonEqualWidth) { + .ui.two.vertical.buttons > .button { + height: 50%; + } - .ui.three.vertical.buttons > .button { - height: 33.333%; - } + .ui.three.vertical.buttons > .button { + height: 33.333%; + } - .ui.four.vertical.buttons > .button { - height: 25%; - } + .ui.four.vertical.buttons > .button { + height: 25%; + } - .ui.five.vertical.buttons > .button { - height: 20%; - } + .ui.five.vertical.buttons > .button { + height: 20%; + } - .ui.six.vertical.buttons > .button { - height: 16.666%; - } + .ui.six.vertical.buttons > .button { + height: 16.666%; + } - .ui.seven.vertical.buttons > .button { - height: 14.285%; - } + .ui.seven.vertical.buttons > .button { + height: 14.285%; + } - .ui.eight.vertical.buttons > .button { - height: 12.500%; - } + .ui.eight.vertical.buttons > .button { + height: 12.500%; + } - .ui.nine.vertical.buttons > .button { - height: 11.11%; - } + .ui.nine.vertical.buttons > .button { + height: 11.11%; + } - .ui.ten.vertical.buttons > .button { - height: 10%; - } + .ui.ten.vertical.buttons > .button { + height: 10%; + } - .ui.eleven.vertical.buttons > .button { - height: 9.09%; - } + .ui.eleven.vertical.buttons > .button { + height: 9.09%; + } - .ui.twelve.vertical.buttons > .button { - height: 8.3333%; + .ui.twelve.vertical.buttons > .button { + height: 8.3333%; + } } } @@ -1874,35 +1884,36 @@ each(@colors, { border-top-right-radius: @borderRadius; border-bottom-right-radius: @borderRadius; } + & when (@variationButtonVertical) { + /* Vertical Style */ + .ui.vertical.buttons { + display: inline-flex; + flex-direction: column; + } - /* Vertical Style */ - .ui.vertical.buttons { - display: inline-flex; - flex-direction: column; - } - - .ui.vertical.buttons .button { - display: block; - float: none; - width: 100%; - margin: @verticalGroupOffset; - box-shadow: @verticalBoxShadow; - border-radius: 0; - } + .ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: @verticalGroupOffset; + box-shadow: @verticalBoxShadow; + border-radius: 0; + } - .ui.vertical.buttons .button:first-child { - border-top-left-radius: @borderRadius; - border-top-right-radius: @borderRadius; - } + .ui.vertical.buttons .button:first-child { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; + } - .ui.vertical.buttons .button:last-child { - margin-bottom: 0; - border-bottom-left-radius: @borderRadius; - border-bottom-right-radius: @borderRadius; - } + .ui.vertical.buttons .button:last-child { + margin-bottom: 0; + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; + } - .ui.vertical.buttons .button:only-child { - border-radius: @borderRadius; + .ui.vertical.buttons .button:only-child { + border-radius: @borderRadius; + } } } .loadUIOverrides(); diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less index 26f1858358..627be8f9e8 100644 --- a/src/definitions/elements/container.less +++ b/src/definitions/elements/container.less @@ -42,8 +42,10 @@ .ui.ui.ui.relaxed.grid.container { width: @mobileRelaxedGridWidth; } - .ui.ui.ui.very.relaxed.grid.container { - width: @mobileVeryRelaxedGridWidth; + & when (@variationContainerVeryRelaxed) { + .ui.ui.ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth; + } } } } @@ -64,8 +66,10 @@ .ui.ui.ui.relaxed.grid.container { width: @tabletRelaxedGridWidth; } - .ui.ui.ui.very.relaxed.grid.container { - width: @tabletVeryRelaxedGridWidth; + & when (@variationContainerVeryRelaxed) { + .ui.ui.ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth; + } } } } @@ -86,8 +90,10 @@ .ui.ui.ui.relaxed.grid.container { width: @computerRelaxedGridWidth; } - .ui.ui.ui.very.relaxed.grid.container { - width: @computerVeryRelaxedGridWidth; + & when (@variationContainerVeryRelaxed) { + .ui.ui.ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth; + } } } } @@ -108,8 +114,10 @@ .ui.ui.ui.relaxed.grid.container { width: @largeMonitorRelaxedGridWidth; } - .ui.ui.ui.very.relaxed.grid.container { - width: @largeMonitorVeryRelaxedGridWidth; + & when (@variationContainerVeryRelaxed) { + .ui.ui.ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth; + } } } } diff --git a/src/definitions/elements/emoji.less b/src/definitions/elements/emoji.less index 6e80621a4b..6b7dee2c64 100644 --- a/src/definitions/elements/emoji.less +++ b/src/definitions/elements/emoji.less @@ -47,8 +47,10 @@ em[data-emoji]:before { States *******************************/ -em[data-emoji].disabled { - opacity: @disabledOpacity; +& when (@variationEmojiDisabled) { + em[data-emoji].disabled { + opacity: @disabledOpacity; + } } @@ -56,17 +58,21 @@ em[data-emoji].disabled { Variations *******************************/ -em[data-emoji].loading:before { - animation: loader @loadingDuration linear infinite; +& when (@variationEmojiLoading) { + em[data-emoji].loading:before { + animation: loader @loadingDuration linear infinite; + } } -/*------------------- - Link ---------------------*/ +& when (@variationEmojiLink) { + /*------------------- + Link + --------------------*/ -em[data-emoji].link:not(.disabled) { - cursor: pointer; + em[data-emoji].link:not(.disabled) { + cursor: pointer; + } } .loadUIOverrides(); diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index 2d7b676453..8c9f42937e 100755 --- a/src/definitions/elements/header.less +++ b/src/definitions/elements/header.less @@ -254,10 +254,12 @@ margin-bottom: 0; } } - .ui.icon.header.aligned { - margin-left: auto; - margin-right: auto; - display: block; + & when (@variationHeaderAligned) { + .ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; + } } } @@ -403,8 +405,10 @@ each(@colors, { padding-bottom: @dividedBorderPadding; border-bottom: @dividedBorder; } - .ui.dividing.header .sub.header { - padding-bottom: @dividedSubHeaderPadding; + & when (@variationHeaderSub) { + .ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; + } } .ui.dividing.header i.icon { margin-bottom: @dividedIconPadding; @@ -454,8 +458,10 @@ each(@colors, { border: @attachedBorder; border-radius: 0; } - .ui.attached.block.header { - background: @blockBackground; + & when (@variationHeaderBlock) { + .ui.attached.block.header { + background: @blockBackground; + } } .ui.attached:not(.top).header { border-top: none; diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index ca1abdcc62..1cda55beae 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -185,22 +185,25 @@ ol.ui.list ol li, margin-left: 0; padding-left: 0; } - -/* Header */ -.ui.list .list > .item .header, -.ui.list > .item .header { - display: block; - margin: 0; - font-family: @itemHeaderFontFamily; - font-weight: @itemHeaderFontWeight; - color: @itemHeaderColor; +& when (@variationListHeader) { + /* Header */ + .ui.list .list > .item .header, + .ui.list > .item .header { + display: block; + margin: 0; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; + } } -/* Description */ -.ui.list .list > .item .description, -.ui.list > .item .description { - display: block; - color: @itemDescriptionColor; +& when (@variationListDescription) { + /* Description */ + .ui.list .list > .item .description, + .ui.list > .item .description { + display: block; + color: @itemDescriptionColor; + } } /* Child Link */ @@ -230,15 +233,17 @@ ol.ui.list ol li, } } -/* Header Link */ -.ui.list .list > .item a.header, -.ui.list > .item a.header { - cursor: pointer; - color: @itemHeaderLinkColor !important; -} -.ui.list .list > .item > a.header:hover, -.ui.list > .item > a.header:hover { - color: @itemHeaderLinkHoverColor !important; +& when (@variationListHeader) { + /* Header Link */ + .ui.list .list > .item a.header, + .ui.list > .item a.header { + cursor: pointer; + color: @itemHeaderLinkColor !important; + } + .ui.list .list > .item > a.header:hover, + .ui.list > .item > a.header:hover { + color: @itemHeaderLinkHoverColor !important; + } } & when (@variationListFloated) { @@ -406,13 +411,17 @@ ol.ui.list ol li, color: @invertedIconLinkColor; } } - .ui.inverted.list .list > .item .header, - .ui.inverted.list > .item .header { - color: @invertedHeaderColor; + & when (@variationListHeader) { + .ui.inverted.list .list > .item .header, + .ui.inverted.list > .item .header { + color: @invertedHeaderColor; + } } - .ui.inverted.list .list > .item .description, - .ui.inverted.list > .item .description { - color: @invertedDescriptionColor; + & when (@variationListDescription) { + .ui.inverted.list .list > .item .description, + .ui.inverted.list > .item .description { + color: @invertedDescriptionColor; + } } .ui.inverted.list .list > .item > .content, .ui.inverted.list > .item > .content { @@ -974,23 +983,24 @@ ol.ui.list ol li, padding-right: @relaxedHorizontalPadding; } } - - /* Very Relaxed */ - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { - padding-top: @veryRelaxedItemVerticalPadding; - } - .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { - padding-bottom: @veryRelaxedItemVerticalPadding; - } - - & when (@variationListHorizontal) { - .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), - .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { - padding-left: @veryRelaxedHorizontalPadding; + & when (@variationListVeryRelaxed) { + /* Very Relaxed */ + .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { + padding-top: @veryRelaxedItemVerticalPadding; + } + .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @veryRelaxedItemVerticalPadding; } - .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), - .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { - padding-right: @veryRelaxedHorizontalPadding; + + & when (@variationListHorizontal) { + .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), + .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { + padding-left: @veryRelaxedHorizontalPadding; + } + .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), + .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { + padding-right: @veryRelaxedHorizontalPadding; + } } } } diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 6f6bb84ba2..e0962106b3 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -299,9 +299,10 @@ .ui.padded.segment { padding: @paddedSegmentPadding; } - - .ui[class*="very padded"].segment { - padding: @veryPaddedSegmentPadding; + & when (@variationSegmentVeryPadded) { + .ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; + } } & when (@variationSegmentVertical) { diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less index fa339e8b46..5c51985b41 100755 --- a/src/definitions/elements/step.less +++ b/src/definitions/elements/step.less @@ -290,8 +290,10 @@ right: 50%; transform: translateY(-50%) translateX(50%) rotate(45deg); } - .ui.vertical.steps .active.step:last-child:after { - display: none; + & when (@variationStepVertical) { + .ui.vertical.steps .active.step:last-child:after { + display: none; + } } /* Content */ .ui.steps:not(.unstackable) .step .content { @@ -493,53 +495,55 @@ } } -/*------------------- - Evenly Divided ---------------------*/ +& when (@variationStepEqualWidth) { + /*------------------- + Evenly Divided + --------------------*/ -.ui.one.steps, -.ui.two.steps, -.ui.three.steps, -.ui.four.steps, -.ui.five.steps, -.ui.six.steps, -.ui.seven.steps, -.ui.eight.steps { - width: 100%; -} -.ui.one.steps > .step, -.ui.two.steps > .step, -.ui.three.steps > .step, -.ui.four.steps > .step, -.ui.five.steps > .step, -.ui.six.steps > .step, -.ui.seven.steps > .step, -.ui.eight.steps > .step { - flex-wrap: nowrap; -} -.ui.one.steps > .step { - width: 100%; -} -.ui.two.steps > .step { - width: 50%; -} -.ui.three.steps > .step { - width: 33.333%; -} -.ui.four.steps > .step { - width: 25%; -} -.ui.five.steps > .step { - width: 20%; -} -.ui.six.steps > .step { - width: 16.666%; -} -.ui.seven.steps > .step { - width: 14.285%; -} -.ui.eight.steps > .step { - width: 12.500%; + .ui.one.steps, + .ui.two.steps, + .ui.three.steps, + .ui.four.steps, + .ui.five.steps, + .ui.six.steps, + .ui.seven.steps, + .ui.eight.steps { + width: 100%; + } + .ui.one.steps > .step, + .ui.two.steps > .step, + .ui.three.steps > .step, + .ui.four.steps > .step, + .ui.five.steps > .step, + .ui.six.steps > .step, + .ui.seven.steps > .step, + .ui.eight.steps > .step { + flex-wrap: nowrap; + } + .ui.one.steps > .step { + width: 100%; + } + .ui.two.steps > .step { + width: 50%; + } + .ui.three.steps > .step { + width: 33.333%; + } + .ui.four.steps > .step { + width: 25%; + } + .ui.five.steps > .step { + width: 20%; + } + .ui.six.steps > .step { + width: 16.666%; + } + .ui.seven.steps > .step { + width: 14.285%; + } + .ui.eight.steps > .step { + width: 12.500%; + } } /*------------------- diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 9f07337d0d..cc1f27e568 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -1395,23 +1395,25 @@ select.ui.dropdown { } } -/*-------------- - Columnar ----------------*/ -.ui.column.dropdown > .menu { - flex-wrap:wrap; -} -.ui.dropdown[class*="two column"] > .menu > .item { - width: 50%; -} -.ui.dropdown[class*="three column"] > .menu > .item { - width: 33%; -} -.ui.dropdown[class*="four column"] > .menu > .item { - width: 25%; -} -.ui.dropdown[class*="five column"] > .menu > .item { - width: 20%; +& when (@variationDropdownColumnar) { + /*-------------- + Columnar + ---------------*/ + .ui.column.dropdown > .menu { + flex-wrap: wrap; + } + .ui.dropdown[class*="two column"] > .menu > .item { + width: 50%; + } + .ui.dropdown[class*="three column"] > .menu > .item { + width: 33%; + } + .ui.dropdown[class*="four column"] > .menu > .item { + width: 25%; + } + .ui.dropdown[class*="five column"] > .menu > .item { + width: 20%; + } } & when (@variationDropdownSimple) { diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index e099ea8251..f9adcbfd5f 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -437,16 +437,20 @@ .ui.search.short > .results { max-height: @scrollingMobileMaxResultsHeight; } - .ui.search[class*="very short"] > .results { - max-height: @scrollingMobileMaxResultsHeight * 0.75; + & when (@variationSearchVeryShort) { + .ui.search[class*="very short"] > .results { + max-height: @scrollingMobileMaxResultsHeight * 0.75; + } } } & when (@variationSearchLong) { .ui.search.long > .results { max-height: @scrollingMobileMaxResultsHeight * 2; } - .ui.search[class*="very long"] > .results { - max-height: @scrollingMobileMaxResultsHeight * 3; + & when (@variationSearchVeryLong) { + .ui.search[class*="very long"] > .results { + max-height: @scrollingMobileMaxResultsHeight * 3; + } } } } @@ -455,16 +459,20 @@ .ui.search.short > .results { max-height: @scrollingTabletMaxResultsHeight; } - .ui.search[class*="very short"] > .results { - max-height: @scrollingTabletMaxResultsHeight * 0.75; + & when (@variationSearchVeryShort) { + .ui.search[class*="very short"] > .results { + max-height: @scrollingTabletMaxResultsHeight * 0.75; + } } } & when (@variationSearchLong) { .ui.search.long > .results { max-height: @scrollingTabletMaxResultsHeight * 2; } - .ui.search[class*="very long"] > .results { - max-height: @scrollingTabletMaxResultsHeight * 3; + & when (@variationSearchVeryLong) { + .ui.search[class*="very long"] > .results { + max-height: @scrollingTabletMaxResultsHeight * 3; + } } } } @@ -473,16 +481,20 @@ .ui.search.short > .results { max-height: @scrollingComputerMaxResultsHeight; } - .ui.search[class*="very short"] > .results { - max-height: @scrollingComputerMaxResultsHeight * 0.75; + & when (@variationSearchVeryShort) { + .ui.search[class*="very short"] > .results { + max-height: @scrollingComputerMaxResultsHeight * 0.75; + } } } & when (@variationSearchLong) { .ui.search.long > .results { max-height: @scrollingComputerMaxResultsHeight * 2; } - .ui.search[class*="very long"] > .results { - max-height: @scrollingComputerMaxResultsHeight * 3; + & when (@variationSearchVeryLong) { + .ui.search[class*="very long"] > .results { + max-height: @scrollingComputerMaxResultsHeight * 3; + } } } } @@ -491,16 +503,20 @@ .ui.search.short > .results { max-height: @scrollingWidescreenMaxResultsHeight; } - .ui.search[class*="very short"] > .results { - max-height: @scrollingWidescreenMaxResultsHeight * 0.75; + & when (@variationSearchVeryShort) { + .ui.search[class*="very short"] > .results { + max-height: @scrollingWidescreenMaxResultsHeight * 0.75; + } } } & when (@variationSearchLong) { .ui.search.long > .results { max-height: @scrollingWidescreenMaxResultsHeight * 2; } - .ui.search[class*="very long"] > .results { - max-height: @scrollingWidescreenMaxResultsHeight * 3; + & when (@variationSearchVeryLong) { + .ui.search[class*="very long"] > .results { + max-height: @scrollingWidescreenMaxResultsHeight * 3; + } } } } diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 54e1400741..b6e7bf77d3 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -281,9 +281,11 @@ body.pushable > .pusher { width: @thinWidth; } - .ui[class*="very thin"].left.sidebar, - .ui[class*="very thin"].right.sidebar { - width: @veryThinWidth; + & when (@variationSidebarVeryThin) { + .ui[class*="very thin"].left.sidebar, + .ui[class*="very thin"].right.sidebar { + width: @veryThinWidth; + } } } @@ -298,9 +300,11 @@ body.pushable > .pusher { width: @wideWidth; } - .ui[class*="very wide"].left.sidebar, - .ui[class*="very wide"].right.sidebar { - width: @veryWideWidth; + & when (@variationSidebarVeryWide) { + .ui[class*="very wide"].left.sidebar, + .ui[class*="very wide"].right.sidebar { + width: @veryWideWidth; + } } } @@ -312,9 +316,11 @@ body.pushable > .pusher { transform: translate3d(@thinWidth, 0, 0); } - .ui.visible[class*="very thin"].left.sidebar ~ .fixed, - .ui.visible[class*="very thin"].left.sidebar ~ .pusher { - transform: translate3d(@veryThinWidth, 0, 0); + & when (@variationSidebarVeryThin) { + .ui.visible[class*="very thin"].left.sidebar ~ .fixed, + .ui.visible[class*="very thin"].left.sidebar ~ .pusher { + transform: translate3d(@veryThinWidth, 0, 0); + } } } @@ -324,9 +330,11 @@ body.pushable > .pusher { transform: translate3d(@wideWidth, 0, 0); } - .ui.visible[class*="very wide"].left.sidebar ~ .fixed, - .ui.visible[class*="very wide"].left.sidebar ~ .pusher { - transform: translate3d(@veryWideWidth, 0, 0); + & when (@variationSidebarVeryWide) { + .ui.visible[class*="very wide"].left.sidebar ~ .fixed, + .ui.visible[class*="very wide"].left.sidebar ~ .pusher { + transform: translate3d(@veryWideWidth, 0, 0); + } } } } @@ -339,9 +347,11 @@ body.pushable > .pusher { transform: translate3d(-@thinWidth, 0, 0); } - .ui.visible[class*="very thin"].right.sidebar ~ .fixed, - .ui.visible[class*="very thin"].right.sidebar ~ .pusher { - transform: translate3d(-@veryThinWidth, 0, 0); + & when (@variationSidebarVeryThin) { + .ui.visible[class*="very thin"].right.sidebar ~ .fixed, + .ui.visible[class*="very thin"].right.sidebar ~ .pusher { + transform: translate3d(-@veryThinWidth, 0, 0); + } } } @@ -351,9 +361,11 @@ body.pushable > .pusher { transform: translate3d(-@wideWidth, 0, 0); } - .ui.visible[class*="very wide"].right.sidebar ~ .fixed, - .ui.visible[class*="very wide"].right.sidebar ~ .pusher { - transform: translate3d(-@veryWideWidth, 0, 0); + & when (@variationSidebarVeryWide) { + .ui.visible[class*="very wide"].right.sidebar ~ .fixed, + .ui.visible[class*="very wide"].right.sidebar ~ .pusher { + transform: translate3d(-@veryWideWidth, 0, 0); + } } } } diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less index 241e5db1cc..2f718a300c 100755 --- a/src/definitions/views/card.less +++ b/src/definitions/views/card.less @@ -114,28 +114,30 @@ border-radius: @borderRadius !important; } -/*-------------- - Images ----------------*/ +& when (@variationCardImage) { + /*-------------- + Images + ---------------*/ -.ui.cards > .card > .image, -.ui.card > .image { - position: relative; - display: block; - flex: 0 0 auto; - padding: @imagePadding; - background: @imageBackground; -} -.ui.cards > .card > .image > img, -.ui.card > .image > img { - display: block; - width: 100%; - height: auto; - border-radius: inherit; -} -.ui.cards > .card > .image:not(.ui) > img, -.ui.card > .image:not(.ui) > img { - border: @imageBorder; + .ui.cards > .card > .image, + .ui.card > .image { + position: relative; + display: block; + flex: 0 0 auto; + padding: @imagePadding; + background: @imageBackground; + } + .ui.cards > .card > .image > img, + .ui.card > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: inherit; + } + .ui.cards > .card > .image:not(.ui) > img, + .ui.card > .image:not(.ui) > img { + border: @imageBorder; + } } /*-------------- @@ -165,89 +167,99 @@ visibility: hidden; } -.ui.cards > .card > .content > .header, -.ui.card > .content > .header { - display: block; - margin: @headerMargin; - font-family: @headerFont; - color: @headerColor; -} +& when (@variationCardHeader) { + .ui.cards > .card > .content > .header, + .ui.card > .content > .header { + display: block; + margin: @headerMargin; + font-family: @headerFont; + color: @headerColor; + } -/* Default Header Size */ -.ui.cards > .card > .content > .header:not(.ui), -.ui.card > .content > .header:not(.ui) { - font-weight: @headerFontWeight; - font-size: @headerFontSize; - margin-top: @headerLineHeightOffset; - line-height: @headerLineHeight; + /* Default Header Size */ + .ui.cards > .card > .content > .header:not(.ui), + .ui.card > .content > .header:not(.ui) { + font-weight: @headerFontWeight; + font-size: @headerFontSize; + margin-top: @headerLineHeightOffset; + line-height: @headerLineHeight; + } } -.ui.cards > .card > .content > .meta + .description, -.ui.cards > .card > .content > .header + .description, -.ui.card > .content > .meta + .description, -.ui.card > .content > .header + .description { - margin-top: @descriptionDistance; +& when (@variationCardDescription) { + .ui.cards > .card > .content > .meta + .description, + .ui.cards > .card > .content > .header + .description, + .ui.card > .content > .meta + .description, + .ui.card > .content > .header + .description { + margin-top: @descriptionDistance; + } } -/*---------------- - Floated Content ------------------*/ +& when (@variationCardFloated) { + /*---------------- + Floated Content + -----------------*/ -.ui.cards > .card [class*="left floated"], -.ui.card [class*="left floated"] { - float: left; -} -.ui.cards > .card [class*="right floated"], -.ui.card [class*="right floated"] { - float: right; + .ui.cards > .card [class*="left floated"], + .ui.card [class*="left floated"] { + float: left; + } + .ui.cards > .card [class*="right floated"], + .ui.card [class*="right floated"] { + float: right; + } } -/*-------------- - Aligned ----------------*/ +& when (@variationCardAligned) { + /*-------------- + Aligned + ---------------*/ -.ui.cards > .card [class*="left aligned"], -.ui.card [class*="left aligned"] { - text-align: left; -} -.ui.cards > .card [class*="center aligned"], -.ui.card [class*="center aligned"] { - text-align: center; -} -.ui.cards > .card [class*="right aligned"], -.ui.card [class*="right aligned"] { - text-align: right; + .ui.cards > .card [class*="left aligned"], + .ui.card [class*="left aligned"] { + text-align: left; + } + .ui.cards > .card [class*="center aligned"], + .ui.card [class*="center aligned"] { + text-align: center; + } + .ui.cards > .card [class*="right aligned"], + .ui.card [class*="right aligned"] { + text-align: right; + } } +& when (@variationCardImage) { + /*-------------- + Content Image + ---------------*/ -/*-------------- - Content Image ----------------*/ - -.ui.cards > .card .content img, -.ui.card .content img { - display: inline-block; - vertical-align: @contentImageVerticalAlign; - width: @contentImageWidth; -} -.ui.cards > .card img.avatar, -.ui.cards > .card .avatar img, -.ui.card img.avatar, -.ui.card .avatar img { - width: @avatarSize; - height: @avatarSize; - border-radius: @avatarBorderRadius; + .ui.cards > .card .content img, + .ui.card .content img { + display: inline-block; + vertical-align: @contentImageVerticalAlign; + width: @contentImageWidth; + } + .ui.cards > .card img.avatar, + .ui.cards > .card .avatar img, + .ui.card img.avatar, + .ui.card .avatar img { + width: @avatarSize; + height: @avatarSize; + border-radius: @avatarBorderRadius; + } } +& when (@variationCardDescription) { + /*-------------- + Description + ---------------*/ -/*-------------- - Description ----------------*/ - -.ui.cards > .card > .content > .description, -.ui.card > .content > .description { - clear: both; - color: @descriptionColor; + .ui.cards > .card > .content > .description, + .ui.card > .content > .description { + clear: both; + color: @descriptionColor; + } } /*-------------- @@ -262,29 +274,32 @@ .ui.card > .content p:last-child { margin-bottom: 0; } +& when (@variationCardMeta) { + /*-------------- + Meta + ---------------*/ -/*-------------- - Meta ----------------*/ - -.ui.cards > .card .meta, -.ui.card .meta { - font-size: @metaFontSize; - color: @metaColor; -} -.ui.cards > .card .meta *, -.ui.card .meta * { - margin-right: @metaSpacing; -} -.ui.cards > .card .meta :last-child, -.ui.card .meta :last-child { - margin-right: 0; -} + .ui.cards > .card .meta, + .ui.card .meta { + font-size: @metaFontSize; + color: @metaColor; + } + .ui.cards > .card .meta *, + .ui.card .meta * { + margin-right: @metaSpacing; + } + .ui.cards > .card .meta :last-child, + .ui.card .meta :last-child { + margin-right: 0; + } -.ui.cards > .card .meta [class*="right floated"], -.ui.card .meta [class*="right floated"] { - margin-right: 0; - margin-left: @metaSpacing; + & when (@variationCardFloated) { + .ui.cards > .card .meta [class*="right floated"], + .ui.card .meta [class*="right floated"] { + margin-right: 0; + margin-left: @metaSpacing; + } + } } /*-------------- @@ -302,38 +317,44 @@ color: @contentLinkHoverColor; } -/* Header */ -.ui.cards > .card > .content > a.header, -.ui.card > .content > a.header { - color: @headerLinkColor; -} -.ui.cards > .card > .content > a.header:hover, -.ui.card > .content > a.header:hover { - color: @headerLinkHoverColor; +& when (@variationCardHeader) { + /* Header */ + .ui.cards > .card > .content > a.header, + .ui.card > .content > a.header { + color: @headerLinkColor; + } + .ui.cards > .card > .content > a.header:hover, + .ui.card > .content > a.header:hover { + color: @headerLinkHoverColor; + } } -/* Meta */ -.ui.cards > .card .meta > a:not(.ui), -.ui.card .meta > a:not(.ui) { - color: @metaLinkColor; -} -.ui.cards > .card .meta > a:not(.ui):hover, -.ui.card .meta > a:not(.ui):hover { - color: @metaLinkHoverColor; +& when (@variationCardMeta) { + /* Meta */ + .ui.cards > .card .meta > a:not(.ui), + .ui.card .meta > a:not(.ui) { + color: @metaLinkColor; + } + .ui.cards > .card .meta > a:not(.ui):hover, + .ui.card .meta > a:not(.ui):hover { + color: @metaLinkHoverColor; + } } -/*-------------- - Buttons ----------------*/ +& when (@variationCardButton) { + /*-------------- + Buttons + ---------------*/ -.ui.cards > .card > .buttons, -.ui.card > .buttons, -.ui.cards > .card > .button, -.ui.card > .button { - margin: @buttonMargin; - width: @buttonWidth; - &:last-child { - margin-bottom: -@borderWidth; + .ui.cards > .card > .buttons, + .ui.card > .buttons, + .ui.cards > .card > .button, + .ui.card > .button { + margin: @buttonMargin; + width: @buttonWidth; + &:last-child { + margin-bottom: -@borderWidth; + } } } @@ -351,72 +372,78 @@ Labels ---------------*/ -/*-----Star----- */ +& when (@variationCardStar) { + /*-----Star----- */ -/* Icon */ -.ui.cards > .card > .content .star.icon, -.ui.card > .content .star.icon { - cursor: pointer; - opacity: @actionOpacity; - transition: @actionTransition; -} -.ui.cards > .card > .content .star.icon:hover, -.ui.card > .content .star.icon:hover { - opacity: @actionHoverOpacity; - color: @starColor; -} -.ui.cards > .card > .content .active.star.icon, -.ui.card > .content .active.star.icon { - color: @starActiveColor; + /* Icon */ + .ui.cards > .card > .content .star.icon, + .ui.card > .content .star.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; + } + .ui.cards > .card > .content .star.icon:hover, + .ui.card > .content .star.icon:hover { + opacity: @actionHoverOpacity; + color: @starColor; + } + .ui.cards > .card > .content .active.star.icon, + .ui.card > .content .active.star.icon { + color: @starActiveColor; + } } -/*-----Like----- */ +& when (@variationCardLike) { + /*-----Like----- */ -/* Icon */ -.ui.cards > .card > .content .like.icon, -.ui.card > .content .like.icon { - cursor: pointer; - opacity: @actionOpacity; - transition: @actionTransition; -} -.ui.cards > .card > .content .like.icon:hover, -.ui.card > .content .like.icon:hover { - opacity: @actionHoverOpacity; - color: @likeColor; -} -.ui.cards > .card > .content .active.like.icon, -.ui.card > .content .active.like.icon { - color: @likeActiveColor; + /* Icon */ + .ui.cards > .card > .content .like.icon, + .ui.card > .content .like.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; + } + .ui.cards > .card > .content .like.icon:hover, + .ui.card > .content .like.icon:hover { + opacity: @actionHoverOpacity; + color: @likeColor; + } + .ui.cards > .card > .content .active.like.icon, + .ui.card > .content .active.like.icon { + color: @likeActiveColor; + } } -/*---------------- - Extra Content ------------------*/ +& when (@variationCardExtra) { + /*---------------- + Extra Content + -----------------*/ -.ui.cards > .card > .extra, -.ui.card > .extra { - max-width: 100%; - min-height: 0 !important; - flex-grow: 0; - border-top: @extraDivider !important; - position: @extraPosition; - background: @extraBackground; - width: @extraWidth; - margin: @extraMargin; - padding: @extraPadding; - top: @extraTop; - left: @extraLeft; - color: @extraColor; - box-shadow: @extraBoxShadow; - transition: @extraTransition; -} -.ui.cards > .card > .extra a:not(.ui), -.ui.card > .extra a:not(.ui) { - color: @extraLinkColor; -} -.ui.cards > .card > .extra a:not(.ui):hover, -.ui.card > .extra a:not(.ui):hover { - color: @extraLinkHoverColor; + .ui.cards > .card > .extra, + .ui.card > .extra { + max-width: 100%; + min-height: 0 !important; + flex-grow: 0; + border-top: @extraDivider !important; + position: @extraPosition; + background: @extraBackground; + width: @extraWidth; + margin: @extraMargin; + padding: @extraPadding; + top: @extraTop; + left: @extraLeft; + color: @extraColor; + box-shadow: @extraBoxShadow; + transition: @extraTransition; + } + .ui.cards > .card > .extra a:not(.ui), + .ui.card > .extra a:not(.ui) { + color: @extraLinkColor; + } + .ui.cards > .card > .extra a:not(.ui):hover, + .ui.card > .extra a:not(.ui):hover { + color: @extraLinkHoverColor; + } } /******************************* @@ -646,108 +673,110 @@ each(@colors,{ } }) -/*-------------- - Card Count ----------------*/ +& when (@variationCardEqualWidth) { + /*-------------- + Card Count + ---------------*/ -.ui.one.cards { - margin-left: @oneCardOffset; - margin-right: @oneCardOffset; -} -.ui.one.cards > .card { - width: @oneCard; -} + .ui.one.cards { + margin-left: @oneCardOffset; + margin-right: @oneCardOffset; + } + .ui.one.cards > .card { + width: @oneCard; + } -.ui.two.cards { - margin-left: @twoCardOffset; - margin-right: @twoCardOffset; -} -.ui.two.cards > .card { - width: @twoCard; - margin-left: @twoCardSpacing; - margin-right: @twoCardSpacing; -} + .ui.two.cards { + margin-left: @twoCardOffset; + margin-right: @twoCardOffset; + } + .ui.two.cards > .card { + width: @twoCard; + margin-left: @twoCardSpacing; + margin-right: @twoCardSpacing; + } -.ui.three.cards { - margin-left: @threeCardOffset; - margin-right: @threeCardOffset; -} -.ui.three.cards > .card { - width: @threeCard; - margin-left: @threeCardSpacing; - margin-right: @threeCardSpacing; -} + .ui.three.cards { + margin-left: @threeCardOffset; + margin-right: @threeCardOffset; + } + .ui.three.cards > .card { + width: @threeCard; + margin-left: @threeCardSpacing; + margin-right: @threeCardSpacing; + } -.ui.four.cards { - margin-left: @fourCardOffset; - margin-right: @fourCardOffset; -} -.ui.four.cards > .card { - width: @fourCard; - margin-left: @fourCardSpacing; - margin-right: @fourCardSpacing; -} + .ui.four.cards { + margin-left: @fourCardOffset; + margin-right: @fourCardOffset; + } + .ui.four.cards > .card { + width: @fourCard; + margin-left: @fourCardSpacing; + margin-right: @fourCardSpacing; + } -.ui.five.cards { - margin-left: @fiveCardOffset; - margin-right: @fiveCardOffset; -} -.ui.five.cards > .card { - width: @fiveCard; - margin-left: @fiveCardSpacing; - margin-right: @fiveCardSpacing; -} + .ui.five.cards { + margin-left: @fiveCardOffset; + margin-right: @fiveCardOffset; + } + .ui.five.cards > .card { + width: @fiveCard; + margin-left: @fiveCardSpacing; + margin-right: @fiveCardSpacing; + } -.ui.six.cards { - margin-left: @sixCardOffset; - margin-right: @sixCardOffset; -} -.ui.six.cards > .card { - width: @sixCard; - margin-left: @sixCardSpacing; - margin-right: @sixCardSpacing; -} + .ui.six.cards { + margin-left: @sixCardOffset; + margin-right: @sixCardOffset; + } + .ui.six.cards > .card { + width: @sixCard; + margin-left: @sixCardSpacing; + margin-right: @sixCardSpacing; + } -.ui.seven.cards { - margin-left: @sevenCardOffset; - margin-right: @sevenCardOffset; -} -.ui.seven.cards > .card { - width: @sevenCard; - margin-left: @sevenCardSpacing; - margin-right: @sevenCardSpacing; -} + .ui.seven.cards { + margin-left: @sevenCardOffset; + margin-right: @sevenCardOffset; + } + .ui.seven.cards > .card { + width: @sevenCard; + margin-left: @sevenCardSpacing; + margin-right: @sevenCardSpacing; + } -.ui.eight.cards { - margin-left: @eightCardOffset; - margin-right: @eightCardOffset; -} -.ui.eight.cards > .card { - width: @eightCard; - margin-left: @eightCardSpacing; - margin-right: @eightCardSpacing; - font-size: 11px; -} + .ui.eight.cards { + margin-left: @eightCardOffset; + margin-right: @eightCardOffset; + } + .ui.eight.cards > .card { + width: @eightCard; + margin-left: @eightCardSpacing; + margin-right: @eightCardSpacing; + font-size: 11px; + } -.ui.nine.cards { - margin-left: @nineCardOffset; - margin-right: @nineCardOffset; -} -.ui.nine.cards > .card { - width: @nineCard; - margin-left: @nineCardSpacing; - margin-right: @nineCardSpacing; - font-size: 10px; -} + .ui.nine.cards { + margin-left: @nineCardOffset; + margin-right: @nineCardOffset; + } + .ui.nine.cards > .card { + width: @nineCard; + margin-left: @nineCardSpacing; + margin-right: @nineCardSpacing; + font-size: 10px; + } -.ui.ten.cards { - margin-left: @tenCardOffset; - margin-right: @tenCardOffset; -} -.ui.ten.cards > .card { - width: @tenCard; - margin-left: @tenCardSpacing; - margin-right: @tenCardSpacing; + .ui.ten.cards { + margin-left: @tenCardOffset; + margin-right: @tenCardOffset; + } + .ui.ten.cards > .card { + width: @tenCard; + margin-left: @tenCardSpacing; + margin-right: @tenCardSpacing; + } } & when (@variationCardDoubling) { @@ -958,6 +987,7 @@ each(@colors,{ & when not (@variationCardSizes = false) { each(@variationCardSizes, { @s: @@value; + .ui.@{value}.card, .ui.@{value}.cards .card { font-size: @s; } @@ -981,60 +1011,70 @@ each(@colors,{ border-top: @invertedContentDivider; } - /* Header */ - .ui.inverted.cards > .card > .content > .header, - .ui.inverted.card > .content > .header { - color: @invertedHeaderColor; - } - .ui.inverted.cards > .card > .content > a.header, - .ui.inverted.card > .content > a.header { - color: @invertedHeaderLinkColor; - &:hover { - color: @invertedHeaderLinkHoverColor; + & when (@variationCardHeader) { + /* Header */ + .ui.inverted.cards > .card > .content > .header, + .ui.inverted.card > .content > .header { + color: @invertedHeaderColor; + } + .ui.inverted.cards > .card > .content > a.header, + .ui.inverted.card > .content > a.header { + color: @invertedHeaderLinkColor; + &:hover { + color: @invertedHeaderLinkHoverColor; + } } } - /* Description */ - .ui.inverted.cards > .card > .content > .description, - .ui.inverted.card > .content > .description { - color: @invertedDescriptionColor; + & when (@variationCardDescription) { + /* Description */ + .ui.inverted.cards > .card > .content > .description, + .ui.inverted.card > .content > .description { + color: @invertedDescriptionColor; + } } - /* Meta */ - .ui.inverted.cards > .card .meta, - .ui.inverted.card .meta { - color: @invertedMetaColor; - } - .ui.inverted.cards > .card .meta > a:not(.ui), - .ui.inverted.card .meta > a:not(.ui) { - color: @invertedMetaLinkColor; - } - .ui.inverted.cards > .card .meta > a:not(.ui):hover, - .ui.inverted.card .meta > a:not(.ui):hover { - color: @invertedMetaLinkHoverColor; + & when (@variationCardMeta) { + /* Meta */ + .ui.inverted.cards > .card .meta, + .ui.inverted.card .meta { + color: @invertedMetaColor; + } + .ui.inverted.cards > .card .meta > a:not(.ui), + .ui.inverted.card .meta > a:not(.ui) { + color: @invertedMetaLinkColor; + } + .ui.inverted.cards > .card .meta > a:not(.ui):hover, + .ui.inverted.card .meta > a:not(.ui):hover { + color: @invertedMetaLinkHoverColor; + } } - /* Extra */ - .ui.inverted.cards > .card > .extra, - .ui.inverted.card > .extra { - border-top: @invertedExtraDivider !important; - color: @invertedExtraColor; - } - .ui.inverted.cards > .card > .extra a:not(.ui), - .ui.inverted.card > .extra a:not(.ui) { - color: @invertedExtraLinkColor; - } - .ui.inverted.cards > .card > .extra a:not(.ui):hover, - .ui.inverted.card > .extra a:not(.ui):hover { - color: @extraLinkHoverColor; + & when (@variationCardExtra) { + /* Extra */ + .ui.inverted.cards > .card > .extra, + .ui.inverted.card > .extra { + border-top: @invertedExtraDivider !important; + color: @invertedExtraColor; + } + .ui.inverted.cards > .card > .extra a:not(.ui), + .ui.inverted.card > .extra a:not(.ui) { + color: @invertedExtraLinkColor; + } + .ui.inverted.cards > .card > .extra a:not(.ui):hover, + .ui.inverted.card > .extra a:not(.ui):hover { + color: @extraLinkHoverColor; + } } - /* Link card(s) */ - .ui.inverted.cards a.card:hover, - .ui.inverted.link.cards .card:not(.icon):hover, - a.inverted.ui.card:hover, - .ui.inverted.link.card:hover { - background: @invertedLinkHoverBackground; + & when (@variationCardLink) { + /* Link card(s) */ + .ui.inverted.cards a.card:hover, + .ui.inverted.link.cards .card:not(.icon):hover, + a.inverted.ui.card:hover, + .ui.inverted.link.card:hover { + background: @invertedLinkHoverBackground; + } } & when (@variationCardLoading) { diff --git a/src/definitions/views/comment.less b/src/definitions/views/comment.less index fedf40ed69..07b8c6fc09 100755 --- a/src/definitions/views/comment.less +++ b/src/definitions/views/comment.less @@ -76,25 +76,26 @@ border-top: @nestedCommentDivider; background: @nestedCommentBackground; } - -/*-------------- - Avatar ----------------*/ - -.ui.comments .comment .avatar { - display: @avatarDisplay; - width: @avatarWidth; - height: @avatarHeight; - float: @avatarFloat; - margin: @avatarMargin; -} -.ui.comments .comment img.avatar, -.ui.comments .comment .avatar img { - display: block; - margin: 0 auto; - width: 100%; - height: 100%; - border-radius: @avatarBorderRadius; +& when (@variationCommentAvatar) { + /*-------------- + Avatar + ---------------*/ + + .ui.comments .comment .avatar { + display: @avatarDisplay; + width: @avatarWidth; + height: @avatarHeight; + float: @avatarFloat; + margin: @avatarMargin; + } + .ui.comments .comment img.avatar, + .ui.comments .comment .avatar img { + display: block; + margin: 0 auto; + width: 100%; + height: 100%; + border-radius: @avatarBorderRadius; + } } /*-------------- @@ -104,43 +105,49 @@ .ui.comments .comment > .content { display: block; } -/* If there is an avatar move content over */ -.ui.comments .comment > .avatar ~ .content { - margin-left: @contentMargin; +& when (@variationCommentAvatar) { + /* If there is an avatar move content over */ + .ui.comments .comment > .avatar ~ .content { + margin-left: @contentMargin; + } } -/*-------------- - Author ----------------*/ +& when (@variationCommentAuthor) { + /*-------------- + Author + ---------------*/ -.ui.comments .comment .author { - font-size: @authorFontSize; - color: @authorColor; - font-weight: @authorFontWeight; -} -.ui.comments .comment a.author { - cursor: pointer; -} -.ui.comments .comment a.author:hover { - color: @authorHoverColor; + .ui.comments .comment .author { + font-size: @authorFontSize; + color: @authorColor; + font-weight: @authorFontWeight; + } + .ui.comments .comment a.author { + cursor: pointer; + } + .ui.comments .comment a.author:hover { + color: @authorHoverColor; + } } -/*-------------- - Metadata ----------------*/ +& when (@variationCommentMeta) { + /*-------------- + Metadata + ---------------*/ -.ui.comments .comment .metadata { - display: @metadataDisplay; - margin-left: @metadataSpacing; - color: @metadataColor; - font-size: @metadataFontSize; -} -.ui.comments .comment .metadata > * { - display: inline-block; - margin: 0 @metadataContentSpacing 0 0; -} -.ui.comments .comment .metadata > :last-child { - margin-right: 0; + .ui.comments .comment .metadata { + display: @metadataDisplay; + margin-left: @metadataSpacing; + color: @metadataColor; + font-size: @metadataFontSize; + } + .ui.comments .comment .metadata > * { + display: inline-block; + margin: 0 @metadataContentSpacing 0 0; + } + .ui.comments .comment .metadata > :last-child { + margin-right: 0; + } } /*-------------------- @@ -156,41 +163,45 @@ } -/*-------------------- - User Actions ----------------------*/ +& when (@variationCommentActions) { + /*-------------------- + User Actions + ---------------------*/ -.ui.comments .comment .actions { - font-size: @actionFontSize; -} -.ui.comments .comment .actions a { - cursor: pointer; - display: inline-block; - margin: 0 @actionContentDistance 0 0; - color: @actionLinkColor; -} -.ui.comments .comment .actions a:last-child { - margin-right: 0; -} -.ui.comments .comment .actions a.active, -.ui.comments .comment .actions a:hover { - color: @actionLinkHoverColor; + .ui.comments .comment .actions { + font-size: @actionFontSize; + } + .ui.comments .comment .actions a { + cursor: pointer; + display: inline-block; + margin: 0 @actionContentDistance 0 0; + color: @actionLinkColor; + } + .ui.comments .comment .actions a:last-child { + margin-right: 0; + } + .ui.comments .comment .actions a.active, + .ui.comments .comment .actions a:hover { + color: @actionLinkHoverColor; + } } -/*-------------------- - Reply Form ----------------------*/ +& when (@variationCommentReply) { + /*-------------------- + Reply Form + ---------------------*/ -.ui.comments > .reply.form { - margin-top: @replyDistance; -} -.ui.comments .comment .reply.form { - width: 100%; - margin-top: @commentReplyDistance; -} -.ui.comments .reply.form textarea { - font-size: @replyFontSize; - height: @replyHeight; + .ui.comments > .reply.form { + margin-top: @replyDistance; + } + .ui.comments .comment .reply.form { + width: 100%; + margin-top: @commentReplyDistance; + } + .ui.comments .reply.form textarea { + font-size: @replyFontSize; + height: @replyHeight; + } } /******************************* diff --git a/src/definitions/views/feed.less b/src/definitions/views/feed.less index 20efe8fb09..00734e6fc6 100755 --- a/src/definitions/views/feed.less +++ b/src/definitions/views/feed.less @@ -103,159 +103,173 @@ cursor: pointer; } -/*-------------- - Date ----------------*/ - -.ui.feed > .event > .content .date { - margin: @dateMargin; - padding: @datePadding; - color: @dateColor; - font-weight: @dateFontWeight; - font-size: @dateFontSize; - font-style: @dateFontStyle; +& when (@variationFeedDate) { + /*-------------- + Date + ---------------*/ + + .ui.feed > .event > .content .date { + margin: @dateMargin; + padding: @datePadding; + color: @dateColor; + font-weight: @dateFontWeight; + font-size: @dateFontSize; + font-style: @dateFontStyle; + } } -/*-------------- - Summary ----------------*/ - -.ui.feed > .event > .content .summary { - margin: @summaryMargin; - font-size: @summaryFontSize; - font-weight: @summaryFontWeight; - color: @summaryColor; -} +& when (@variationFeedSummary) { + /*-------------- + Summary + ---------------*/ -/* Summary Image */ -.ui.feed > .event > .content .summary img { - display: inline-block; - width: @summaryImageWidth; - height: @summaryImageHeight; - margin: @summaryImageMargin; - border-radius: @summaryImageBorderRadius; - vertical-align: @summaryImageVerticalAlign; -} -/*-------------- - User ----------------*/ + .ui.feed > .event > .content .summary { + margin: @summaryMargin; + font-size: @summaryFontSize; + font-weight: @summaryFontWeight; + color: @summaryColor; + } -.ui.feed > .event > .content .user { - display: inline-block; - font-weight: @userFontWeight; - margin-right: @userDistance; - vertical-align: baseline; -} -.ui.feed > .event > .content .user img { - margin: @userImageMargin; - width: @userImageWidth; - height: @userImageHeight; - vertical-align: @userImageVerticalAlign; + /* Summary Image */ + .ui.feed > .event > .content .summary img { + display: inline-block; + width: @summaryImageWidth; + height: @summaryImageHeight; + margin: @summaryImageMargin; + border-radius: @summaryImageBorderRadius; + vertical-align: @summaryImageVerticalAlign; + } + & when (@variationFeedDate) { + /*-------------- + Inline Date + ---------------*/ + + /* Date inside Summary */ + .ui.feed > .event > .content .summary > .date { + display: @summaryDateDisplay; + float: @summaryDateFloat; + font-weight: @summaryDateFontWeight; + font-size: @summaryDateFontSize; + font-style: @summaryDateFontStyle; + margin: @summaryDateMargin; + padding: @summaryDatePadding; + color: @summaryDateColor; + } + } } -/*-------------- - Inline Date ----------------*/ +& when (@variationFeedUser) { + /*-------------- + User + ---------------*/ -/* Date inside Summary */ -.ui.feed > .event > .content .summary > .date { - display: @summaryDateDisplay; - float: @summaryDateFloat; - font-weight: @summaryDateFontWeight; - font-size: @summaryDateFontSize; - font-style: @summaryDateFontStyle; - margin: @summaryDateMargin; - padding: @summaryDatePadding; - color: @summaryDateColor; + .ui.feed > .event > .content .user { + display: inline-block; + font-weight: @userFontWeight; + margin-right: @userDistance; + vertical-align: baseline; + } + .ui.feed > .event > .content .user img { + margin: @userImageMargin; + width: @userImageWidth; + height: @userImageHeight; + vertical-align: @userImageVerticalAlign; + } } -/*-------------- - Extra Summary ----------------*/ +& when (@variationFeedExtra) { + /*-------------- + Extra Summary + ---------------*/ -.ui.feed > .event > .content .extra { - margin: @extraMargin; - background: @extraBackground; - padding: @extraPadding; - color: @extraColor; -} + .ui.feed > .event > .content .extra { + margin: @extraMargin; + background: @extraBackground; + padding: @extraPadding; + color: @extraColor; + } -/* Images */ -.ui.feed > .event > .content .extra.images img { - display: inline-block; - margin: @extraImageMargin; - width: @extraImageWidth; -} + /* Images */ + .ui.feed > .event > .content .extra.images img { + display: inline-block; + margin: @extraImageMargin; + width: @extraImageWidth; + } -/* Text */ -.ui.feed > .event > .content .extra.text { - padding: @extraTextPadding; - border-left: @extraTextPointer; - font-size: @extraTextFontSize; - max-width: @extraTextMaxWidth; - line-height: @extraTextLineHeight; + /* Text */ + .ui.feed > .event > .content .extra.text { + padding: @extraTextPadding; + border-left: @extraTextPointer; + font-size: @extraTextFontSize; + max-width: @extraTextMaxWidth; + line-height: @extraTextLineHeight; + } } -/*-------------- - Meta ----------------*/ - -.ui.feed > .event > .content .meta { - display: @metadataDisplay; - font-size: @metadataFontSize; - margin: @metadataMargin; - background: @metadataBackground; - border: @metadataBorder; - border-radius: @metadataBorderRadius; - box-shadow: @metadataBoxShadow; - padding: @metadataPadding; - color: @metadataColor; -} +& when (@variationFeedMeta) { + /*-------------- + Meta + ---------------*/ + + .ui.feed > .event > .content .meta { + display: @metadataDisplay; + font-size: @metadataFontSize; + margin: @metadataMargin; + background: @metadataBackground; + border: @metadataBorder; + border-radius: @metadataBorderRadius; + box-shadow: @metadataBoxShadow; + padding: @metadataPadding; + color: @metadataColor; + } -.ui.feed > .event > .content .meta > * { - position: relative; - margin-left: @metadataElementSpacing; -} -.ui.feed > .event > .content .meta > *:after { - content: @metadataDivider; - color: @metadataDividerColor; - top: 0; - left: @metadataDividerOffset; - opacity: 1; - position: absolute; - vertical-align: top; -} + .ui.feed > .event > .content .meta > * { + position: relative; + margin-left: @metadataElementSpacing; + } + .ui.feed > .event > .content .meta > *:after { + content: @metadataDivider; + color: @metadataDividerColor; + top: 0; + left: @metadataDividerOffset; + opacity: 1; + position: absolute; + vertical-align: top; + } -.ui.feed > .event > .content .meta .like { - color: @likeColor; - transition: @likeTransition; -} -.ui.feed > .event > .content .meta .like:hover i.icon { - color: @likeHoverColor; -} -.ui.feed > .event > .content .meta .active.like i.icon { - color: @likeActiveColor; -} + & when (@variationFeedLike) { + .ui.feed > .event > .content .meta .like { + color: @likeColor; + transition: @likeTransition; + } + .ui.feed > .event > .content .meta .like:hover i.icon { + color: @likeHoverColor; + } + .ui.feed > .event > .content .meta .active.like i.icon { + color: @likeActiveColor; + } + } -/* First element */ -.ui.feed > .event > .content .meta > :first-child { - margin-left: 0; -} -.ui.feed > .event > .content .meta > :first-child::after { - display: none; -} + /* First element */ + .ui.feed > .event > .content .meta > :first-child { + margin-left: 0; + } + .ui.feed > .event > .content .meta > :first-child::after { + display: none; + } -/* Action */ -.ui.feed > .event > .content .meta a, -.ui.feed > .event > .content .meta > i.icon { - cursor: @metadataActionCursor; - opacity: @metadataActionOpacity; - color: @metadataActionColor; - transition: @metadataActionTransition; -} -.ui.feed > .event > .content .meta a:hover, -.ui.feed > .event > .content .meta a:hover i.icon, -.ui.feed > .event > .content .meta > i.icon:hover { - color: @metadataActionHoverColor; + /* Action */ + .ui.feed > .event > .content .meta a, + .ui.feed > .event > .content .meta > i.icon { + cursor: @metadataActionCursor; + opacity: @metadataActionOpacity; + color: @metadataActionColor; + transition: @metadataActionTransition; + } + .ui.feed > .event > .content .meta a:hover, + .ui.feed > .event > .content .meta a:hover i.icon, + .ui.feed > .event > .content .meta > i.icon:hover { + color: @metadataActionHoverColor; + } } @@ -285,18 +299,24 @@ background: @black; } - .ui.inverted.feed > .event > .content .date, - .ui.inverted.feed > .event > .content .meta .like { - color: @invertedLightTextColor; + & when (@variationFeedDate) or (@variationFeedLike) { + .ui.inverted.feed > .event > .content .date, + .ui.inverted.feed > .event > .content .meta .like { + color: @invertedLightTextColor; + } } - .ui.inverted.feed > .event > .content .summary, - .ui.inverted.feed > .event > .content .extra.text { - color: @invertedTextColor; + & when (@variationFeedSummary) or (@variationFeedExtra) { + .ui.inverted.feed > .event > .content .summary, + .ui.inverted.feed > .event > .content .extra.text { + color: @invertedTextColor; + } } - .ui.inverted.feed > .event > .content .meta .like:hover { - color: @invertedSelectedTextColor; + & when (@variationFeedLike) { + .ui.inverted.feed > .event > .content .meta .like:hover { + color: @invertedSelectedTextColor; + } } } diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less index 2c9ed2e786..994de5a3db 100755 --- a/src/definitions/views/item.less +++ b/src/definitions/views/item.less @@ -78,31 +78,32 @@ } +& when (@variationItemImage) { + /*-------------- + Images + ---------------*/ -/*-------------- - Images ----------------*/ - -.ui.items > .item > .image { - position: relative; - flex: 0 0 auto; - display: @imageDisplay; - float: @imageFloat; - margin: @imageMargin; - padding: @imagePadding; - max-height: @imageMaxHeight; - align-self: @imageVerticalAlign; -} -.ui.items > .item > .image > img { - display: block; - width: 100%; - height: auto; - border-radius: @imageBorderRadius; - border: @imageBorder; -} + .ui.items > .item > .image { + position: relative; + flex: 0 0 auto; + display: @imageDisplay; + float: @imageFloat; + margin: @imageMargin; + padding: @imagePadding; + max-height: @imageMaxHeight; + align-self: @imageVerticalAlign; + } + .ui.items > .item > .image > img { + display: block; + width: 100%; + height: auto; + border-radius: @imageBorderRadius; + border: @imageBorder; + } -.ui.items > .item > .image:only-child > img { - border-radius: @borderRadius; + .ui.items > .item > .image:only-child > img { + border-radius: @borderRadius; + } } @@ -140,56 +141,64 @@ padding-left: @contentImageDistance; } -.ui.items > .item > .content > .header { - display: inline-block; - margin: @headerMargin; - font-family: @headerFont; - font-weight: @headerFontWeight; - color: @headerColor; -} -/* Default Header Size */ -.ui.items > .item > .content > .header:not(.ui) { - font-size: @headerFontSize; +& when (@variationItemHeader) { + .ui.items > .item > .content > .header { + display: inline-block; + margin: @headerMargin; + font-family: @headerFont; + font-weight: @headerFontWeight; + color: @headerColor; + } + /* Default Header Size */ + .ui.items > .item > .content > .header:not(.ui) { + font-size: @headerFontSize; + } } -/*-------------- - Floated ----------------*/ +& when (@variationItemFloated) { + /*-------------- + Floated + ---------------*/ -.ui.items > .item [class*="left floated"] { - float: left; -} -.ui.items > .item [class*="right floated"] { - float: right; + .ui.items > .item [class*="left floated"] { + float: left; + } + .ui.items > .item [class*="right floated"] { + float: right; + } } -/*-------------- - Content Image ----------------*/ +& when (@variationItemImage) { + /*-------------- + Content Image + ---------------*/ -.ui.items > .item .content img { - align-self: @contentImageVerticalAlign; - width: @contentImageWidth; -} -.ui.items > .item img.avatar, -.ui.items > .item .avatar img { - width: @avatarSize; - height: @avatarSize; - border-radius: @avatarBorderRadius; + .ui.items > .item .content img { + align-self: @contentImageVerticalAlign; + width: @contentImageWidth; + } + .ui.items > .item img.avatar, + .ui.items > .item .avatar img { + width: @avatarSize; + height: @avatarSize; + border-radius: @avatarBorderRadius; + } } -/*-------------- - Description ----------------*/ +& when (@variationItemDescription) { + /*-------------- + Description + ---------------*/ -.ui.items > .item > .content > .description { - margin-top: @descriptionDistance; - max-width: @descriptionMaxWidth; - font-size: @descriptionFontSize; - line-height: @descriptionLineHeight; - color: @descriptionColor; + .ui.items > .item > .content > .description { + margin-top: @descriptionDistance; + max-width: @descriptionMaxWidth; + font-size: @descriptionFontSize; + line-height: @descriptionLineHeight; + color: @descriptionColor; + } } /*-------------- @@ -203,26 +212,30 @@ margin-bottom: 0; } -/*-------------- - Meta ----------------*/ +& when (@variationItemMeta) { + /*-------------- + Meta + ---------------*/ -.ui.items > .item .meta { - margin: @metaMargin; - font-size: @metaFontSize; - line-height: @metaLineHeight; - color: @metaColor; -} -.ui.items > .item .meta * { - margin-right: @metaSpacing; -} -.ui.items > .item .meta :last-child { - margin-right: 0; -} + .ui.items > .item .meta { + margin: @metaMargin; + font-size: @metaFontSize; + line-height: @metaLineHeight; + color: @metaColor; + } + .ui.items > .item .meta * { + margin-right: @metaSpacing; + } + .ui.items > .item .meta :last-child { + margin-right: 0; + } -.ui.items > .item .meta [class*="right floated"] { - margin-right: 0; - margin-left: @metaSpacing; + & when (@variationItemFloated) { + .ui.items > .item .meta [class*="right floated"] { + margin-right: 0; + margin-left: @metaSpacing; + } + } } /*-------------- @@ -238,20 +251,24 @@ color: @contentLinkHoverColor; } -/* Header */ -.ui.items > .item > .content > a.header { - color: @headerLinkColor; -} -.ui.items > .item > .content > a.header:hover { - color: @headerLinkHoverColor; +& when (@variationItemHeader) { + /* Header */ + .ui.items > .item > .content > a.header { + color: @headerLinkColor; + } + .ui.items > .item > .content > a.header:hover { + color: @headerLinkHoverColor; + } } -/* Meta */ -.ui.items > .item .meta > a:not(.ui) { - color: @metaLinkColor; -} -.ui.items > .item .meta > a:not(.ui):hover { - color: @metaLinkHoverColor; +& when (@variationItemMeta) { + /* Meta */ + .ui.items > .item .meta > a:not(.ui) { + color: @metaLinkColor; + } + .ui.items > .item .meta > a:not(.ui):hover { + color: @metaLinkHoverColor; + } } @@ -262,68 +279,76 @@ /*-----Star----- */ -/* Icon */ -.ui.items > .item > .content .favorite.icon { - cursor: pointer; - opacity: @actionOpacity; - transition: @actionTransition; -} -.ui.items > .item > .content .favorite.icon:hover { - opacity: @actionHoverOpacity; - color: @favoriteColor; -} -.ui.items > .item > .content .active.favorite.icon { - color: @favoriteActiveColor; -} - -/*-----Like----- */ - -/* Icon */ -.ui.items > .item > .content .like.icon { - cursor: pointer; - opacity: @actionOpacity; - transition: @actionTransition; -} -.ui.items > .item > .content .like.icon:hover { - opacity: @actionHoverOpacity; - color: @likeColor; -} -.ui.items > .item > .content .active.like.icon { - color: @likeActiveColor; +& when (@variationItemFavorite) { + /* Icon */ + .ui.items > .item > .content .favorite.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; + } + .ui.items > .item > .content .favorite.icon:hover { + opacity: @actionHoverOpacity; + color: @favoriteColor; + } + .ui.items > .item > .content .active.favorite.icon { + color: @favoriteActiveColor; + } } -/*---------------- - Extra Content ------------------*/ +& when (@variationItemLike) { + /*-----Like----- */ -.ui.items > .item .extra { - display: @extraDisplay; - position: @extraPosition; - background: @extraBackground; - margin: @extraMargin; - width: @extraWidth; - padding: @extraPadding; - top: @extraTop; - left: @extraLeft; - color: @extraColor; - box-shadow: @extraBoxShadow; - transition: @extraTransition; - border-top: @extraDivider; -} -.ui.items > .item .extra > * { - margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0; -} -.ui.items > .item .extra > [class*="right floated"] { - margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing; -} + /* Icon */ + .ui.items > .item > .content .like.icon { + cursor: pointer; + opacity: @actionOpacity; + transition: @actionTransition; + } + .ui.items > .item > .content .like.icon:hover { + opacity: @actionHoverOpacity; + color: @likeColor; + } + .ui.items > .item > .content .active.like.icon { + color: @likeActiveColor; + } +} + +& when (@variationItemExtra) { + /*---------------- + Extra Content + -----------------*/ + + .ui.items > .item .extra { + display: @extraDisplay; + position: @extraPosition; + background: @extraBackground; + margin: @extraMargin; + width: @extraWidth; + padding: @extraPadding; + top: @extraTop; + left: @extraLeft; + color: @extraColor; + box-shadow: @extraBoxShadow; + transition: @extraTransition; + border-top: @extraDivider; + } + .ui.items > .item .extra > * { + margin: (@extraRowSpacing / 2) @extraHorizontalSpacing (@extraRowSpacing / 2) 0; + } + & when (@variationItemFloated) { + .ui.items > .item .extra > [class*="right floated"] { + margin: (@extraRowSpacing / 2) 0 (@extraRowSpacing / 2) @extraHorizontalSpacing; + } + } -.ui.items > .item .extra:after { - display: block; - content: ' '; - height: 0; - clear: both; - overflow: hidden; - visibility: hidden; + .ui.items > .item .extra:after { + display: block; + content: ' '; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } } @@ -404,8 +429,10 @@ .ui.relaxed.items > .item { margin: @relaxedItemSpacing 0; } - .ui[class*="very relaxed"].items > .item { - margin: @veryRelaxedItemSpacing 0; + & when (@variationItemVeryRelaxed) { + .ui[class*="very relaxed"].items > .item { + margin: @veryRelaxedItemSpacing 0; + } } } @@ -434,9 +461,11 @@ margin: 0; padding: @relaxedItemSpacing 0; } - .ui[class*="very relaxed"].divided.items > .item { - margin: 0; - padding: @veryRelaxedItemSpacing 0; + & when (@variationItemVeryRelaxed) { + .ui[class*="very relaxed"].divided.items > .item { + margin: 0; + padding: @veryRelaxedItemSpacing 0; + } } } } @@ -451,9 +480,11 @@ cursor: pointer; } - .ui.items a.item:hover .content .header, - .ui.link.items > .item:hover .content .header { - color: @headerLinkHoverColor; + & when (@variationItemHeader) { + .ui.items a.item:hover .content .header, + .ui.link.items > .item:hover .content .header { + color: @headerLinkHoverColor; + } } } @@ -499,17 +530,25 @@ background: @invertedContentBackground; color: @invertedContentColor; } - .ui.inverted.items > .item .extra { - background: @invertedExtraBackground; + & when (@variationItemExtra) { + .ui.inverted.items > .item .extra { + background: @invertedExtraBackground; + } } - .ui.inverted.items > .item > .content > .header { - color: @invertedHeaderColor; + & when (@variationItemHeader) { + .ui.inverted.items > .item > .content > .header { + color: @invertedHeaderColor; + } } - .ui.inverted.items > .item > .content > .description { - color: @invertedDescriptionColor; + & when (@variationItemDescription) { + .ui.inverted.items > .item > .content > .description { + color: @invertedDescriptionColor; + } } - .ui.inverted.items > .item .meta { - color: @invertedMetaColor; + & when (@variationItemMeta) { + .ui.inverted.items > .item .meta { + color: @invertedMetaColor; + } } .ui.inverted.items > .item > .content a:not(.ui) { color: @invertedContentLinkColor; @@ -517,42 +556,56 @@ .ui.inverted.items > .item > .content a:not(.ui):hover { color: @invertedContentLinkHoverColor; } - .ui.inverted.items > .item > .content > a.header { - color: @invertedHeaderLinkColor; - } - .ui.inverted.items > .item > .content > a.header:hover { - color: @invertedHeaderLinkHoverColor; - } - .ui.inverted.items > .item .meta > a:not(.ui) { - color: @invertedMetaLinkColor; - } - .ui.inverted.items > .item .meta > a:not(.ui):hover { - color: @invertedMetaLinkHoverColor; - } - .ui.inverted.items > .item > .content .favorite.icon:hover { - color: @invertedFavoriteColor; - } - .ui.inverted.items > .item > .content .active.favorite.icon { - color: @invertedFavoriteActiveColor; + & when (@variationItemHeader) { + .ui.inverted.items > .item > .content > a.header { + color: @invertedHeaderLinkColor; + } + .ui.inverted.items > .item > .content > a.header:hover { + color: @invertedHeaderLinkHoverColor; + } } - .ui.inverted.items > .item > .content .like.icon:hover { - color: @invertedLikeColor; + & when (@variationItemMeta) { + .ui.inverted.items > .item .meta > a:not(.ui) { + color: @invertedMetaLinkColor; + } + .ui.inverted.items > .item .meta > a:not(.ui):hover { + color: @invertedMetaLinkHoverColor; + } } - .ui.inverted.items > .item > .content .active.like.icon { - color: @invertedLikeActiveColor; + & when (@variationItemFavorite) { + .ui.inverted.items > .item > .content .favorite.icon:hover { + color: @invertedFavoriteColor; + } + .ui.inverted.items > .item > .content .active.favorite.icon { + color: @invertedFavoriteActiveColor; + } } - .ui.inverted.items > .item .extra { - color: @invertedExtraColor; + & when (@variationItemLike) { + .ui.inverted.items > .item > .content .like.icon:hover { + color: @invertedLikeColor; + } + .ui.inverted.items > .item > .content .active.like.icon { + color: @invertedLikeActiveColor; + } } - .ui.inverted.items a.item:hover .content .header, - .ui.inverted.link.items > .item:hover .content .header { - color: @invertedHeaderLinkHoverColor; + & when (@variationItemExtra) { + .ui.inverted.items > .item .extra { + color: @invertedExtraColor; + } } - .ui.inverted.divided.items > .item { - border-top: @invertedDividedBorder; + & when (@variationItemHeader) { + .ui.inverted.items a.item:hover .content .header, + .ui.inverted.link.items > .item:hover .content .header { + color: @invertedHeaderLinkHoverColor; + } } - .ui.inverted.divided.items > .item:first-child { - border-top: none; + & when (@variationItemDivided) { + .ui.inverted.divided.items > .item { + border-top: @invertedDividedBorder; + } + .ui.inverted.divided.items > .item:first-child { + border-top: none; + } } } diff --git a/src/definitions/views/statistic.less b/src/definitions/views/statistic.less index 9145aeb10e..936c92e629 100755 --- a/src/definitions/views/statistic.less +++ b/src/definitions/views/statistic.less @@ -179,85 +179,86 @@ Count ---------------*/ +& when (@variationStatisticEqualWidth) { + .ui.ten.statistics { + margin: @itemGroupMargin; + } + .ui.ten.statistics .statistic { + min-width: @tenColumn; + margin: @itemMargin; + } -.ui.ten.statistics { - margin: @itemGroupMargin; -} -.ui.ten.statistics .statistic { - min-width: @tenColumn; - margin: @itemMargin; -} - -.ui.nine.statistics { - margin: @itemGroupMargin; -} -.ui.nine.statistics .statistic { - min-width: @nineColumn; - margin: @itemMargin; -} + .ui.nine.statistics { + margin: @itemGroupMargin; + } + .ui.nine.statistics .statistic { + min-width: @nineColumn; + margin: @itemMargin; + } -.ui.eight.statistics { - margin: @itemGroupMargin; -} -.ui.eight.statistics .statistic { - min-width: @eightColumn; - margin: @itemMargin; -} + .ui.eight.statistics { + margin: @itemGroupMargin; + } + .ui.eight.statistics .statistic { + min-width: @eightColumn; + margin: @itemMargin; + } -.ui.seven.statistics { - margin: @itemGroupMargin; -} -.ui.seven.statistics .statistic { - min-width: @sevenColumn; - margin: @itemMargin; -} + .ui.seven.statistics { + margin: @itemGroupMargin; + } + .ui.seven.statistics .statistic { + min-width: @sevenColumn; + margin: @itemMargin; + } -.ui.six.statistics { - margin: @itemGroupMargin; -} -.ui.six.statistics .statistic { - min-width: @sixColumn; - margin: @itemMargin; -} + .ui.six.statistics { + margin: @itemGroupMargin; + } + .ui.six.statistics .statistic { + min-width: @sixColumn; + margin: @itemMargin; + } -.ui.five.statistics { - margin: @itemGroupMargin; -} -.ui.five.statistics .statistic { - min-width: @fiveColumn; - margin: @itemMargin; -} + .ui.five.statistics { + margin: @itemGroupMargin; + } + .ui.five.statistics .statistic { + min-width: @fiveColumn; + margin: @itemMargin; + } -.ui.four.statistics { - margin: @itemGroupMargin; -} -.ui.four.statistics .statistic { - min-width: @fourColumn; - margin: @itemMargin; -} + .ui.four.statistics { + margin: @itemGroupMargin; + } + .ui.four.statistics .statistic { + min-width: @fourColumn; + margin: @itemMargin; + } -.ui.three.statistics { - margin: @itemGroupMargin; -} -.ui.three.statistics .statistic { - min-width: @threeColumn; - margin: @itemMargin; -} + .ui.three.statistics { + margin: @itemGroupMargin; + } + .ui.three.statistics .statistic { + min-width: @threeColumn; + margin: @itemMargin; + } -.ui.two.statistics { - margin: @itemGroupMargin; -} -.ui.two.statistics .statistic { - min-width: @twoColumn; - margin: @itemMargin; -} + .ui.two.statistics { + margin: @itemGroupMargin; + } + .ui.two.statistics .statistic { + min-width: @twoColumn; + margin: @itemMargin; + } -.ui.one.statistics { - margin: @itemGroupMargin; -} -.ui.one.statistics .statistic { - min-width: @oneColumn; - margin: @itemMargin; + .ui.one.statistics { + margin: @itemGroupMargin; + } + .ui.one.statistics .statistic { + min-width: @oneColumn; + margin: @itemMargin; + } } diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables index d3fdc95b45..21764f4f89 100644 --- a/src/themes/default/globals/variation.variables +++ b/src/themes/default/globals/variation.variables @@ -16,6 +16,8 @@ @variationButtonSocial: true; @variationButtonFloated: true; @variationButtonCompact: true; +@variationButtonIcon: true; +@variationButtonLoading: true; @variationButtonBasic: true; @variationButtonTertiary: true; @variationButtonLabeled: true; @@ -24,6 +26,8 @@ @variationButtonOr: true; @variationButtonAttached: true; @variationButtonFluid: true; +@variationButtonEqualWidth: true; +@variationButtonVertical: true; @variationButtonCircular: true; @variationButtonGroups: true; @variationButtonStackable: true; @@ -32,6 +36,7 @@ /* Container */ @variationContainerGrid: true; @variationContainerRelaxed: true; +@variationContainerVeryRelaxed: true; @variationContainerText: true; @variationContainerFluid: true; @variationContainerAligned: true; @@ -145,6 +150,9 @@ @variationListDivided: true; @variationListCelled: true; @variationListRelaxed: true; +@variationListVeryRelaxed: true; +@variationListHeader: true; +@variationListDescription: true; @variationListSizes: @variationAllSizes; /* Loader */ @@ -187,6 +195,7 @@ @variationSegmentPiled: true; @variationSegmentStacked: true; @variationSegmentPadded: true; +@variationSegmentVeryPadded: true; @variationSegmentCircular: true; @variationSegmentCompact: true; @variationSegmentRaised: true; @@ -210,6 +219,7 @@ @variationStepOrdered: true; @variationStepFluid: true; @variationStepAttached: true; +@variationStepEqualWidth: true; @variationStepSizes: @variationAllSizes; /* Text */ @@ -236,6 +246,8 @@ @variationFormRequired: true; @variationFormInline: true; @variationFormGrouped: true; +@variationFormEqualWidth: true; +@variationFormWide: true; @variationFormSizes: @variationAllSizes; /* Grid */ @@ -244,9 +256,11 @@ @variationGridCelled: true; @variationGridCentered: true; @variationGridRelaxed: true; +@variationGridVeryRelaxed: true; @variationGridPadded: true; @variationGridFloated: true; @variationGridDivided: true; +@variationGridVertical: true; @variationGridAligned: true; @variationGridStretched: true; @variationGridJustified: true; @@ -254,6 +268,9 @@ @variationGridDoubling: true; @variationGridStackable: true; @variationGridCompact: true; +@variationGridVeryCompact: true; +@variationGridWide: true; +@variationGridEqualWidth: true; /* Menu */ @variationMenuInverted: true; @@ -273,6 +290,8 @@ @variationMenuCompact: true; @variationMenuFixed: true; @variationMenuAttached: true; +@variationMenuIcon: true; +@variationMenuEqualWidth: true; @variationMenuSizes: @variationAllSizes; /* Message */ @@ -305,10 +324,15 @@ @variationTableSortable: true; @variationTableCollapsing: true; @variationTableBasic: true; +@variationTableVeryBasic: true; @variationTableCelled: true; @variationTablePadded: true; +@variationTableVeryPadded: true; @variationTableCompact: true; +@variationTableVeryCompact: true; @variationTableMarked: true; +@variationTableEqualWidth: true; +@variationTableWide: true; @variationTableSizes: @variationAllSizes; @@ -341,22 +365,53 @@ @variationCardLink: true; @variationCardDoubling: true; @variationCardStackable: true; +@variationCardFloated: true; +@variationCardAligned: true; +@variationCardImage: true; +@variationCardHeader: true; +@variationCardDescription: true; +@variationCardMeta: true; +@variationCardExtra: true; +@variationCardButton: true; +@variationCardStar: true; +@variationCardLike: true; +@variationCardEqualWidth: true; @variationCardSizes: @variationAllSizes; /* Comment */ @variationCommentInverted: true; @variationCommentThreaded: true; @variationCommentMinimal: true; +@variationCommentAvatar: true; +@variationCommentAuthor: true; +@variationCommentMeta: true; +@variationCommentActions: true; +@variationCommentReply: true; @variationCommentSizes: @variationAllSizes; /* Feed */ @variationFeedInverted: true; +@variationFeedMeta: true; +@variationFeedSummary: true; +@variationFeedUser: true; +@variationFeedExtra: true; +@variationFeedDate: true; +@variationFeedLike: true; @variationFeedSizes: @variationAllSizes; /* Item */ @variationItemInverted: true; +@variationItemImage: true; +@variationItemHeader: true; +@variationItemDescription: true; +@variationItemMeta: true; +@variationItemExtra: true; +@variationItemFavorite: true; +@variationItemLike: true; +@variationItemFloated: true; @variationItemAligned: true; @variationItemRelaxed: true; +@variationItemVeryRelaxed: true; @variationItemDivided: true; @variationItemLink: true; @variationItemUnstackable: true; @@ -367,6 +422,7 @@ @variationStatisticStackable: true; @variationStatisticFloated: true; @variationStatisticHorizontal: true; +@variationStatisticEqualWidth: true; @variationStatisticSizes: @variationAllSizes; @@ -430,6 +486,7 @@ @variationDropdownFluid: true; @variationDropdownFloating: true; @variationDropdownPointing: true; +@variationDropdownColumnar: true; @variationDropdownScrollhint: true; @variationDropdownSizes: @variationAllSizes; @@ -503,7 +560,9 @@ @variationSearchAligned: true; @variationSearchFluid: true; @variationSearchShort: true; +@variationSearchVeryShort: true; @variationSearchLong: true; +@variationSearchVeryLong: true; @variationSearchScrolling: true; @variationSearchSizes: @variationAllSizes; @@ -514,7 +573,9 @@ /* Sidebar */ @variationSidebarThin: true; +@variationSidebarVeryThin: true; @variationSidebarWide: true; +@variationSidebarVeryWide: true; @variationSidebarTop: true; @variationSidebarBottom: true; @variationSidebarLeft: true; @@ -588,3 +649,6 @@ /* Emojis */ @variationEmojiColons: true; @variationEmojiNoColons: true; +@variationEmojiDisabled: true; +@variationEmojiLoading: true; +@variationEmojiLink: true;