diff options
Diffstat (limited to 'semantic/src/definitions/collections')
| -rw-r--r-- | semantic/src/definitions/collections/breadcrumb.less | 122 | ||||
| -rw-r--r-- | semantic/src/definitions/collections/form.less | 1112 | ||||
| -rw-r--r-- | semantic/src/definitions/collections/grid.less | 1947 | ||||
| -rw-r--r-- | semantic/src/definitions/collections/menu.less | 1939 | ||||
| -rw-r--r-- | semantic/src/definitions/collections/message.less | 414 | ||||
| -rw-r--r-- | semantic/src/definitions/collections/table.less | 1322 |
6 files changed, 0 insertions, 6856 deletions
diff --git a/semantic/src/definitions/collections/breadcrumb.less b/semantic/src/definitions/collections/breadcrumb.less deleted file mode 100644 index df6f979..0000000 --- a/semantic/src/definitions/collections/breadcrumb.less +++ /dev/null @@ -1,122 +0,0 @@ -/*! - * # Fomantic-UI - Breadcrumb - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'breadcrumb'; - -@import (multiple) '../../theme.config'; - - -/******************************* - Breadcrumb -*******************************/ - -.ui.breadcrumb { - line-height: @lineHeight; - display: @display; - margin: @verticalMargin 0; - vertical-align: @verticalAlign; -} -.ui.breadcrumb:first-child { - margin-top: 0; -} -.ui.breadcrumb:last-child { - margin-bottom: 0; -} - -/******************************* - Content -*******************************/ - -/* Divider */ -.ui.breadcrumb .divider { - display: inline-block; - opacity: @dividerOpacity; - margin: 0 @dividerSpacing 0; - - font-size: @dividerSize; - color: @dividerColor; - vertical-align: @dividerVerticalAlign; -} - -/* Link */ -.ui.breadcrumb a { - color: @linkColor; -} -.ui.breadcrumb a:hover { - color: @linkHoverColor; -} - - -/* Icon Divider */ -.ui.breadcrumb .icon.divider { - font-size: @iconDividerSize; - vertical-align: @iconDividerVerticalAlign; -} - -/* Section */ -.ui.breadcrumb a.section { - cursor: pointer; -} -.ui.breadcrumb .section { - display: inline-block; - margin: @sectionMargin; - padding: @sectionPadding; -} - -/* Loose Coupling */ -.ui.breadcrumb.segment { - display: inline-block; - padding: @segmentPadding; -} - -& when (@variationBreadcrumbInverted) { - /* Inverted */ - .ui.inverted.breadcrumb { - color: @invertedColor; - } - .ui.inverted.breadcrumb > .active.section { - color: @invertedActiveColor; - } - .ui.inverted.breadcrumb > .divider { - color: @invertedDividerColor; - } -} - -/******************************* - States -*******************************/ - -.ui.breadcrumb .active.section { - font-weight: @activeFontWeight; -} - - -/******************************* - Variations -*******************************/ - -.ui.breadcrumb { - font-size: @medium; -} -& when not (@variationBreadcrumbSizes = false) { - each(@variationBreadcrumbSizes, { - @s: @@value; - .ui.@{value}.breadcrumb { - font-size: @s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/form.less b/semantic/src/definitions/collections/form.less deleted file mode 100644 index 3cde7f1..0000000 --- a/semantic/src/definitions/collections/form.less +++ /dev/null @@ -1,1112 +0,0 @@ -/*! - * # Fomantic-UI - Form - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'form'; - -@import (multiple) '../../theme.config'; - -/******************************* - Elements -*******************************/ - -/*-------------------- - Form ----------------------*/ - -.ui.form { - position: relative; - max-width: 100%; -} - -/*-------------------- - Content ----------------------*/ - -.ui.form > p { - margin: @paragraphMargin; -} - -/*-------------------- - Field ----------------------*/ - -.ui.form .field { - clear: both; - margin: @fieldMargin; -} - -.ui.form .fields .fields, -.ui.form .field:last-child, -.ui.form .fields:last-child .field { - margin-bottom: 0; -} - -.ui.form .fields .field { - clear: both; - margin: 0; -} - - -/*-------------------- - Labels ----------------------*/ - -.ui.form .field > label { - display: block; - margin: @labelMargin; - color: @labelColor; - font-size: @labelFontSize; - font-weight: @labelFontWeight; - text-transform: @labelTextTransform; -} - -/*-------------------- - Standard Inputs ----------------------*/ - - -.ui.form textarea, -.ui.form input:not([type]), -.ui.form input[type="date"], -.ui.form input[type="datetime-local"], -.ui.form input[type="email"], -.ui.form input[type="number"], -.ui.form input[type="password"], -.ui.form input[type="search"], -.ui.form input[type="tel"], -.ui.form input[type="time"], -.ui.form input[type="text"], -.ui.form input[type="file"], -.ui.form input[type="url"] { - width: @inputWidth; - vertical-align: top; -} - -/* Set max height on unusual input */ -.ui.form ::-webkit-datetime-edit, -.ui.form ::-webkit-inner-spin-button { - height: @inputLineHeight; -} - -.ui.form input:not([type]), -.ui.form input[type="date"], -.ui.form input[type="datetime-local"], -.ui.form input[type="email"], -.ui.form input[type="number"], -.ui.form input[type="password"], -.ui.form input[type="search"], -.ui.form input[type="tel"], -.ui.form input[type="time"], -.ui.form input[type="text"], -.ui.form input[type="file"], -.ui.form input[type="url"] { - font-family: @inputFont; - margin: 0; - outline: none; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - line-height: @inputLineHeight; - padding: @inputPadding; - font-size: @inputFontSize; - - background: @inputBackground; - border: @inputBorder; - color: @inputColor; - border-radius: @inputBorderRadius; - box-shadow: @inputBoxShadow; - transition: @inputTransition; -} - -/* Text Area */ -.ui.input textarea, -.ui.form textarea { - margin: 0; - -webkit-appearance: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - - padding: @textAreaPadding; - background: @textAreaBackground; - border: @textAreaBorder; - outline: none; - color: @inputColor; - border-radius: @inputBorderRadius; - box-shadow: @inputBoxShadow; - transition: @textAreaTransition; - font-size: @textAreaFontSize; - font-family: @inputFont; - line-height: @textAreaLineHeight; - resize: @textAreaResize; -} -.ui.form textarea:not([rows]) { - height: @textAreaHeight; - min-height: @textAreaMinHeight; - max-height: @textAreaMaxHeight; -} - -.ui.form textarea, -.ui.form input[type="checkbox"] { - vertical-align: @checkboxVerticalAlign; -} - -/*-------------------- - Checkbox margin ----------------------*/ - -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { - margin-top: @checkboxLabelFieldTopMargin; -} -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { - margin-top: @inputLineHeight + @checkboxFieldTopMargin; -} -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { - margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin; -} -.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { - margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin; -} -.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { - margin-top: @checkboxFieldTopMargin / 2; -} -.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { - margin-top: @checkboxToggleFieldTopMargin / 2; -} -.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { - margin-top: @checkboxSliderFieldTopMargin / 2; -} - -& when (@variationFormTransparent) { - /*-------------------- - Transparent - ---------------------*/ - - .ui.form .field .transparent.input:not(.icon) input, - .ui.form .field input.transparent, - .ui.form .field textarea.transparent { - padding: @transparentPadding; - } - - .ui.form .field input.transparent, - .ui.form .field textarea.transparent { - border-color: transparent !important; - background-color: transparent !important; - box-shadow: none !important; - } -} -/*-------------------------- - Input w/ attached Button ----------------------------*/ - -.ui.form input.attached { - width: auto; -} - - -/*-------------------- - Basic Select ----------------------*/ - -.ui.form select { - display: block; - height: auto; - width: 100%; - background: @selectBackground; - border: @selectBorder; - border-radius: @selectBorderRadius; - box-shadow: @selectBoxShadow; - padding: @selectPadding; - color: @selectColor; - transition: @selectTransition; -} - -/*-------------------- - Dropdown ----------------------*/ - -/* Block */ -.ui.form .field > .selection.dropdown { - min-width: auto; - width: 100%; -} -.ui.form .field > .selection.dropdown > .dropdown.icon { - float: right; -} - -& when (@variationFormInline) { - /* Inline */ - .ui.form .inline.fields .field > .selection.dropdown, - .ui.form .inline.field > .selection.dropdown { - width: auto; - } - .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, - .ui.form .inline.field > .selection.dropdown > .dropdown.icon { - float: none; - } -} - -/*-------------------- - UI Input ----------------------*/ - -/* Block */ -.ui.form .field .ui.input, -.ui.form .fields .field .ui.input, -.ui.form .wide.field .ui.input { - width: 100%; -} - -& when (@variationFormInline) { - /* Inline */ - .ui.form .inline.fields .field:not(.wide) .ui.input, - .ui.form .inline.field:not(.wide) .ui.input { - width: auto; - vertical-align: middle; - } -} - -/* Auto Input */ -.ui.form .fields .field .ui.input input, -.ui.form .field .ui.input input { - 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; -} - - -/*-------------------- - Types of Messages ----------------------*/ -& when (@variationFormStates) { - each(@formStates, { - @state: replace(@key, '@', ''); - .ui.form .@{state}.message, - .ui.form .@{state}.message:empty { - display: none; - } - }) -} - -/* Assumptions */ -.ui.form .message:first-child { - margin-top: 0; -} - -/*-------------------- - Validation Prompt ----------------------*/ - -.ui.form .field .prompt.label { - white-space: normal; - background: @promptBackground !important; - border: @promptBorder !important; - color: @promptTextColor !important; -} -& when (@variationFormInline) { - .ui.form .inline.fields .field .prompt, - .ui.form .inline.field .prompt { - vertical-align: top; - margin: @inlinePromptMargin; - } - .ui.form .inline.fields .field .prompt:before, - .ui.form .inline.field .prompt:before { - border-width: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth; - bottom: auto; - right: auto; - top: 50%; - left: 0; - } -} - - -/******************************* - States -*******************************/ - -/*-------------------- - Autofilled ----------------------*/ - -.ui.form .field.field input:-webkit-autofill { - box-shadow: 0 0 0 100px @inputAutoFillBackground inset !important; - border-color: @inputAutoFillBorder !important; -} - -/* Focus */ -.ui.form .field.field input:-webkit-autofill:focus { - box-shadow: 0 0 0 100px @inputAutoFillFocusBackground inset !important; - border-color: @inputAutoFillFocusBorder !important; -} - - - -/*-------------------- - Placeholder ----------------------*/ - -/* browsers require these rules separate */ -.ui.form ::-webkit-input-placeholder { - color: @inputPlaceholderColor; -} -.ui.form :-ms-input-placeholder { - color: @inputPlaceholderColor !important; -} -.ui.form ::-moz-placeholder { - color: @inputPlaceholderColor; -} - -.ui.form :focus::-webkit-input-placeholder { - color: @inputPlaceholderFocusColor; -} -.ui.form :focus:-ms-input-placeholder { - color: @inputPlaceholderFocusColor !important; -} -.ui.form :focus::-moz-placeholder { - color: @inputPlaceholderFocusColor; -} - - - -/*-------------------- - Focus ----------------------*/ - -.ui.form input:not([type]):focus, -.ui.form input[type="date"]:focus, -.ui.form input[type="datetime-local"]:focus, -.ui.form input[type="email"]:focus, -.ui.form input[type="number"]:focus, -.ui.form input[type="password"]:focus, -.ui.form input[type="search"]:focus, -.ui.form input[type="tel"]:focus, -.ui.form input[type="time"]:focus, -.ui.form input[type="text"]:focus, -.ui.form input[type="file"]:focus, -.ui.form input[type="url"]:focus { - color: @inputFocusColor; - border-color: @inputFocusBorderColor; - border-radius: @inputFocusBorderRadius; - background: @inputFocusBackground; - box-shadow: @inputFocusBoxShadow; -} -& when (@variationInputAction) { - .ui.form .ui.action.input:not([class*="left action"]) { - & input:not([type]):focus, - input[type="date"]:focus, - input[type="datetime-local"]:focus, - input[type="email"]:focus, - input[type="number"]:focus, - input[type="password"]:focus, - input[type="search"]:focus, - input[type="tel"]:focus, - input[type="time"]:focus, - input[type="text"]:focus, - input[type="file"]:focus, - input[type="url"]:focus { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - .ui.form .ui[class*="left action"].input { - & input:not([type]), - input[type="date"], - input[type="datetime-local"], - input[type="email"], - input[type="number"], - input[type="password"], - input[type="search"], - input[type="tel"], - input[type="time"], - input[type="text"], - input[type="file"], - input[type="url"] { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } -} -.ui.form textarea:focus { - color: @textAreaFocusColor; - border-color: @textAreaFocusBorderColor; - border-radius: @textAreaFocusBorderRadius; - background: @textAreaFocusBackground; - box-shadow: @textAreaFocusBoxShadow; - -webkit-appearance: none; -} - -& when (@variationFormStates) { - /*-------------------- - States - ---------------------*/ - each(@formStates, { - @state: replace(@key, '@', ''); - @c: @formStates[@@state][color]; - @bg: @formStates[@@state][background]; - @bdc: @formStates[@@state][borderColor]; - - /* On Form */ - .ui.form.@{state} .@{state}.message:not(:empty) { - display: block; - } - .ui.form.@{state} .compact.@{state}.message:not(:empty) { - display: inline-block; - } - .ui.form.@{state} .icon.@{state}.message:not(:empty) { - display: flex; - } - - /* On Field(s) */ - .ui.form .fields.@{state} .@{state}.message:not(:empty), - .ui.form .field.@{state} .@{state}.message:not(:empty) { - display: block; - } - .ui.form .fields.@{state} .compact.@{state}.message:not(:empty), - .ui.form .field.@{state} .compact.@{state}.message:not(:empty) { - display: inline-block; - } - .ui.form .fields.@{state} .icon.@{state}.message:not(:empty), - .ui.form .field.@{state} .icon.@{state}.message:not(:empty) { - display: flex; - } - - .ui.ui.form .fields.@{state} .field label, - .ui.ui.form .field.@{state} label, - .ui.ui.form .fields.@{state} .field .input, - .ui.ui.form .field.@{state} .input { - color: @c; - } - - .ui.form .fields.@{state} .field .corner.label, - .ui.form .field.@{state} .corner.label { - border-color: @c; - color: @formStates[@@state][cornerLabelColor]; - } - - .ui.form .fields.@{state} .field textarea, - .ui.form .fields.@{state} .field select, - .ui.form .fields.@{state} .field input:not([type]), - .ui.form .fields.@{state} .field input[type="date"], - .ui.form .fields.@{state} .field input[type="datetime-local"], - .ui.form .fields.@{state} .field input[type="email"], - .ui.form .fields.@{state} .field input[type="number"], - .ui.form .fields.@{state} .field input[type="password"], - .ui.form .fields.@{state} .field input[type="search"], - .ui.form .fields.@{state} .field input[type="tel"], - .ui.form .fields.@{state} .field input[type="time"], - .ui.form .fields.@{state} .field input[type="text"], - .ui.form .fields.@{state} .field input[type="file"], - .ui.form .fields.@{state} .field input[type="url"], - .ui.form .field.@{state} textarea, - .ui.form .field.@{state} select, - .ui.form .field.@{state} input:not([type]), - .ui.form .field.@{state} input[type="date"], - .ui.form .field.@{state} input[type="datetime-local"], - .ui.form .field.@{state} input[type="email"], - .ui.form .field.@{state} input[type="number"], - .ui.form .field.@{state} input[type="password"], - .ui.form .field.@{state} input[type="search"], - .ui.form .field.@{state} input[type="tel"], - .ui.form .field.@{state} input[type="time"], - .ui.form .field.@{state} input[type="text"], - .ui.form .field.@{state} input[type="file"], - .ui.form .field.@{state} input[type="url"] { - color: @c; - background: @bg; - border-color: @formStates[@@state][borderColor]; - border-radius: @formStates[@@state][borderRadius]; - box-shadow: @formStates[@@state][boxShadow]; - } - - .ui.form .field.@{state} textarea:focus, - .ui.form .field.@{state} select:focus, - .ui.form .field.@{state} input:not([type]):focus, - .ui.form .field.@{state} input[type="date"]:focus, - .ui.form .field.@{state} input[type="datetime-local"]:focus, - .ui.form .field.@{state} input[type="email"]:focus, - .ui.form .field.@{state} input[type="number"]:focus, - .ui.form .field.@{state} input[type="password"]:focus, - .ui.form .field.@{state} input[type="search"]:focus, - .ui.form .field.@{state} input[type="tel"]:focus, - .ui.form .field.@{state} input[type="time"]:focus, - .ui.form .field.@{state} input[type="text"]:focus, - .ui.form .field.@{state} input[type="file"]:focus, - .ui.form .field.@{state} input[type="url"]:focus { - background: @formStates[@@state][inputFocusBackground]; - border-color: @formStates[@@state][inputFocusBorderColor]; - color: @formStates[@@state][inputFocusColor]; - - box-shadow: @formStates[@@state][inputFocusBoxShadow]; - } - - /* Preserve Native Select Stylings */ - .ui.form .field.@{state} select { - -webkit-appearance: menulist-button; - } - - /*------------------ - 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; - } - - /* Autofilled */ - .ui.form .@{state}.@{state} input:-webkit-autofill { - box-shadow: 0 0 0 100px @formStates[@@state][inputAutoFillBackground] inset !important; - border-color: @formStates[@@state][inputAutoFillBorderColor] !important; - } - - /* Placeholder */ - .ui.form .@{state} ::-webkit-input-placeholder { - color: @formStates[@@state][inputPlaceholderColor]; - } - .ui.form .@{state} :-ms-input-placeholder { - color: @formStates[@@state][inputPlaceholderColor] !important; - } - .ui.form .@{state} ::-moz-placeholder { - color: @formStates[@@state][inputPlaceholderColor]; - } - - .ui.form .@{state} :focus::-webkit-input-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor]; - } - .ui.form .@{state} :focus:-ms-input-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor] !important; - } - .ui.form .@{state} :focus::-moz-placeholder { - color: @formStates[@@state][inputPlaceholderFocusColor]; - } - - /*------------------ - Dropdown State - --------------------*/ - - .ui.form .fields.@{state} .field .ui.dropdown, - .ui.form .fields.@{state} .field .ui.dropdown .item, - .ui.form .field.@{state} .ui.dropdown, - .ui.form .field.@{state} .ui.dropdown .text, - .ui.form .field.@{state} .ui.dropdown .item { - background: @bg; - color: @c; - } - .ui.form .fields.@{state} .field .ui.dropdown, - .ui.form .field.@{state} .ui.dropdown { - border-color: @bdc !important; - } - .ui.form .fields.@{state} .field .ui.dropdown:hover, - .ui.form .field.@{state} .ui.dropdown:hover { - border-color: @bdc !important; - } - .ui.form .fields.@{state} .field .ui.dropdown:hover .menu, - .ui.form .field.@{state} .ui.dropdown:hover .menu { - border-color: @bdc; - } - .ui.form .fields.@{state} .field .ui.multiple.selection.dropdown > .label, - .ui.form .field.@{state} .ui.multiple.selection.dropdown > .label { - background-color: @formStates[@@state][dropdownLabelBackground]; - color: @formStates[@@state][dropdownLabelColor]; - } - - /* Hover */ - .ui.form .fields.@{state} .field .ui.dropdown .menu .item:hover, - .ui.form .field.@{state} .ui.dropdown .menu .item:hover { - background-color: @formStates[@@state][dropdownHoverBackground]; - } - - /* Selected */ - .ui.form .fields.@{state} .field .ui.dropdown .menu .selected.item, - .ui.form .field.@{state} .ui.dropdown .menu .selected.item { - background-color: @formStates[@@state][dropdownSelectedBackground]; - } - - /* Active */ - .ui.form .fields.@{state} .field .ui.dropdown .menu .active.item, - .ui.form .field.@{state} .ui.dropdown .menu .active.item { - background-color: @formStates[@@state][dropdownActiveBackground] !important; - } - - /*-------------------- - Checkbox State - ---------------------*/ - .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label, - .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label, - .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box, - .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box { - color: @c; - } - .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before, - .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before, - .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) .box:before, - .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) .box:before { - background: @bg; - border-color: @bdc; - } - .ui.form .fields.@{state} .field .checkbox label:after, - .ui.form .field.@{state} .checkbox label:after, - .ui.form .fields.@{state} .field .checkbox .box:after, - .ui.form .field.@{state} .checkbox .box:after { - color: @c; - } - }) -} - -& when (@variationFormDisabled) { - /*-------------------- - Disabled - ---------------------*/ - - .ui.form .disabled.fields .field, - .ui.form .disabled.field, - .ui.form .field :disabled { - pointer-events: none; - opacity: @disabledOpacity; - } - .ui.form .field.disabled > label, - .ui.form .fields.disabled > label { - opacity: @disabledLabelOpacity; - } - .ui.form .field.disabled :disabled { - opacity: 1; - } -} - -& when (@variationFormLoading) { - /*-------------- - Loading - ---------------*/ - - .ui.loading.form { - position: relative; - cursor: default; - pointer-events: none; - } - .ui.loading.form:before { - position: absolute; - content: ''; - top: 0; - left: 0; - background: @loaderDimmerColor; - width: 100%; - height: 100%; - z-index: @loaderDimmerZIndex; - } - - .ui.loading.form.segments:before { - border-radius: @defaultBorderRadius; - } - - .ui.loading.form:after { - position: absolute; - content: ''; - top: 50%; - left: 50%; - - margin: @loaderMargin; - width: @loaderSize; - height: @loaderSize; - - animation: loader @loaderSpeed infinite linear; - border: @loaderLineWidth solid @loaderLineColor; - border-radius: @circularRadius; - - box-shadow: 0 0 0 1px transparent; - visibility: visible; - z-index: @loaderLineZIndex; - } -} - -/******************************* - Element Types -*******************************/ - -& when (@variationFormRequired) { - /*-------------------- - Required Field - ---------------------*/ - - .ui.form .required.fields:not(.grouped) > .field > label:after, - .ui.form .required.fields.grouped > label:after, - .ui.form .required.field > label:after, - .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, - .ui.form .required.field > .checkbox:after, - .ui.form label.required:after { - margin: @requiredMargin; - content: @requiredContent; - color: @requiredColor; - } - - .ui.form .required.fields:not(.grouped) > .field > label:after, - .ui.form .required.fields.grouped > label:after, - .ui.form .required.field > label:after, - .ui.form label.required:after { - display: inline-block; - vertical-align: top; - } - - .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, - .ui.form .required.field > .checkbox:after { - position: absolute; - top: 0; - left: 100%; - } -} - - -/******************************* - Variations -*******************************/ - -& when (@variationFormInverted) { - /*-------------------- - Inverted Colors - ---------------------*/ - - .ui.inverted.form label, - .ui.form .inverted.segment label, - .ui.form .inverted.segment .ui.checkbox label, - .ui.form .inverted.segment .ui.checkbox .box, - .ui.inverted.form .ui.checkbox label, - .ui.inverted.form .ui.checkbox .box, - .ui.inverted.form .inline.fields > label, - .ui.inverted.form .inline.fields .field > label, - .ui.inverted.form .inline.fields .field > p, - .ui.inverted.form .inline.field > label, - .ui.inverted.form .inline.field > p { - color: @invertedLabelColor; - } - .ui.inverted.loading.form { - color: @invertedLoaderLineColor; - } - .ui.inverted.loading.form:before { - background: @loaderInvertedDimmerColor; - } - /* Inverted Field */ - .ui.inverted.form input:not([type]), - .ui.inverted.form input[type="date"], - .ui.inverted.form input[type="datetime-local"], - .ui.inverted.form input[type="email"], - .ui.inverted.form input[type="number"], - .ui.inverted.form input[type="password"], - .ui.inverted.form input[type="search"], - .ui.inverted.form input[type="tel"], - .ui.inverted.form input[type="time"], - .ui.inverted.form input[type="text"], - .ui.inverted.form input[type="file"], - .ui.inverted.form input[type="url"] { - background: @invertedInputBackground; - border-color: @invertedInputBorderColor; - color: @invertedInputColor; - box-shadow: @invertedInputBoxShadow; - } -} - -& when (@variationFormGrouped) { - /*-------------------- - Field Groups - ---------------------*/ - - /* Grouped Vertically */ - - .ui.form .grouped.fields { - display: block; - margin: @groupedMargin; - } - - .ui.form .grouped.fields:last-child { - margin-bottom: 0; - } - - .ui.form .grouped.fields > label { - margin: @groupedLabelMargin; - color: @groupedLabelColor; - font-size: @groupedLabelFontSize; - font-weight: @groupedLabelFontWeight; - text-transform: @groupedLabelTextTransform; - } - - .ui.form .grouped.fields .field, - .ui.form .grouped.inline.fields .field { - display: block; - margin: @groupedFieldMargin; - padding: 0; - } - .ui.form .grouped.inline.fields .ui.checkbox { - margin-bottom: @groupedInlineCheckboxBottomMargin; - } -} - -/*-------------------- - Fields ----------------------*/ - -/* Split fields */ -.ui.form .fields { - display: flex; - flex-direction: row; - margin: @fieldsMargin; -} -.ui.form .fields > .field { - flex: 0 1 auto; - padding-left: (@gutterWidth / 2); - padding-right: (@gutterWidth / 2); -} -.ui.form .fields > .field:first-child { - border-left: none; - 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; -} - -/* Swap to full width on mobile */ -@media only screen and (max-width : @largestMobileScreen) { - .ui.form .fields { - flex-wrap: wrap; - margin-bottom: 0; - } - - .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, - .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { - width: @oneColumn; - margin: 0 0 @rowDistance; - } -} - - -/* 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; -} - - -/*-------------------- - Equal Width ----------------------*/ - -.ui[class*="equal width"].form .fields > .field, -.ui.form [class*="equal width"].fields > .field { - width: 100%; - flex: 1 1 auto; -} - -& when (@variationFormInline) { - /*-------------------- - Inline Fields - ---------------------*/ - - .ui.form .inline.fields { - margin: @fieldMargin; - align-items: center; - } - .ui.form .inline.fields .field { - margin: 0; - padding: @inlineFieldsMargin; - } - - /* Inline Label */ - .ui.form .inline.fields > label, - .ui.form .inline.fields .field > label, - .ui.form .inline.fields .field > p, - .ui.form .inline.field > label, - .ui.form .inline.field > p { - display: inline-block; - width: auto; - margin-top: 0; - margin-bottom: 0; - vertical-align: baseline; - font-size: @inlineLabelFontSize; - font-weight: @inlineLabelFontWeight; - color: @inlineLabelColor; - text-transform: @inlineLabelTextTransform; - } - - /* Grouped Inline Label */ - .ui.form .inline.fields > label { - margin: @groupedInlineLabelMargin; - } - - /* Inline Input */ - .ui.form .inline.fields .field > input, - .ui.form .inline.fields .field > select, - .ui.form .inline.field > input, - .ui.form .inline.field > select { - display: inline-block; - width: auto; - - margin-top: 0; - margin-bottom: 0; - - vertical-align: middle; - font-size: @inlineInputSize; - } - - .ui.form .inline.fields .field .calendar:not(.popup), - .ui.form .inline.field .calendar:not(.popup) { - display:inline-block; - } - - .ui.form .inline.fields .field .calendar:not(.popup) > .input > input, - .ui.form .inline.field .calendar:not(.popup) > .input > input { - width: @inlineCalendarWidth; - } - - /* Label */ - .ui.form .inline.fields .field > :first-child, - .ui.form .inline.field > :first-child { - margin: 0 @inlineLabelDistance 0 0; - } - .ui.form .inline.fields .field > :only-child, - .ui.form .inline.field > :only-child { - margin: 0; - } - - /* Wide */ - .ui.form .inline.fields .wide.field { - display: flex; - align-items: center; - } - .ui.form .inline.fields .wide.field > input, - .ui.form .inline.fields .wide.field > select { - width: 100%; - } -} - - -/*-------------------- - Sizes ----------------------*/ - -.ui.form, -.ui.form .field .dropdown, -.ui.form .field .dropdown .menu > .item { - font-size: @medium; -} -& when not (@variationFormSizes = false) { - each(@variationFormSizes, { - @s: @@value; - .ui.@{value}.form, - .ui.@{value}.form .field .dropdown, - .ui.@{value}.form .field .dropdown .menu > .item { - font-size: @s; - } - }) -} - - -.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/grid.less b/semantic/src/definitions/collections/grid.less deleted file mode 100644 index 1b5e252..0000000 --- a/semantic/src/definitions/collections/grid.less +++ /dev/null @@ -1,1947 +0,0 @@ -/*! - * # Fomantic-UI - Grid - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'grid'; - -@import (multiple) '../../theme.config'; - -/******************************* - Standard -*******************************/ - -.ui.grid { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - padding: 0; -} - -/*---------------------- - Remove Gutters ------------------------*/ - -.ui.grid { - margin-top: -(@rowSpacing / 2); - margin-bottom: -(@rowSpacing / 2); - 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); -} - - -/* Preserve Rows Spacing on Consecutive Grids */ -.ui.grid + .grid { - margin-top: @consecutiveGridDistance; -} - -/*------------------- - Columns ---------------------*/ - -/* Standard 16 column */ -.ui.grid > .column:not(.row), -.ui.grid > .row > .column { - position: relative; - display: inline-block; - - width: @oneWide; - padding-left: (@gutterWidth / 2); - padding-right: (@gutterWidth / 2); - vertical-align: top; -} - -.ui.grid > * { - padding-left: (@gutterWidth / 2); - padding-right: (@gutterWidth / 2); -} - -/*------------------- - Rows ---------------------*/ - -.ui.grid > .row { - position: relative; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: inherit; - align-items: stretch; - width: 100% !important; - padding: 0; - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} - -/*------------------- - Columns ---------------------*/ - -/* Vertical padding when no rows */ -.ui.grid > .column:not(.row) { - padding-top: (@rowSpacing / 2); - padding-bottom: (@rowSpacing / 2); -} -.ui.grid > .row > .column { - margin-top: 0; - margin-bottom: 0; -} - -/*------------------- - Content ---------------------*/ - -.ui.grid > .row > img, -.ui.grid > .row > .column > img { - max-width: @columnMaxImageWidth; -} - -/*------------------- - Loose Coupling ---------------------*/ - -/* Collapse Margin on Consecutive Grid */ -.ui.grid > .ui.grid:first-child { - margin-top: 0; -} -.ui.grid > .ui.grid:last-child { - margin-bottom: 0; -} - -/* Segment inside Aligned Grid */ -.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), -.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { - width: 100%; -} - -/* Align Dividers with Gutter */ -.ui.grid .row + .ui.divider { - flex-grow: 1; - margin: (@rowSpacing / 2) (@gutterWidth / 2); -} -.ui.grid .column + .ui.vertical.divider { - height: e(%("calc(50%% - %d)", @rowSpacing / 2)); -} - -/* Remove Border on Last Horizontal Segment */ -.ui.grid > .row > .column:last-child > .horizontal.segment, -.ui.grid > .column:last-child > .horizontal.segment { - box-shadow: none; -} - -/******************************* - Variations -*******************************/ - -& when (@variationGridPage) { - /*----------------------- - Page Grid - -------------------------*/ - - @media only screen and (max-width: @largestMobileScreen) { - .ui.page.grid { - width: @mobileWidth; - padding-left: @mobileGutter; - padding-right: @mobileGutter; - margin-left: 0; - margin-right: 0; - } - } - @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui.page.grid { - width: @tabletWidth; - margin-left: @tabletMargin; - margin-right: @tabletMargin; - padding-left: @tabletGutter; - padding-right: @tabletGutter; - } - } - @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { - .ui.page.grid { - width: @computerWidth; - margin-left: @computerMargin; - margin-right: @computerMargin; - padding-left: @computerGutter; - padding-right: @computerGutter; - } - } - @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { - .ui.page.grid { - width: @largeMonitorWidth; - margin-left: @largeMonitorMargin; - margin-right: @largeMonitorMargin; - padding-left: @largeMonitorGutter; - padding-right: @largeMonitorGutter; - } - } - @media only screen and (min-width: @widescreenMonitorBreakpoint) { - .ui.page.grid { - width: @widescreenMonitorWidth; - margin-left: @widescreenMargin; - margin-right: @widescreenMargin; - padding-left: @widescreenMonitorGutter; - padding-right: @widescreenMonitorGutter; - } - } -} - - -/*------------------- - Column Count ---------------------*/ - -/* Assume full width with one column */ -.ui.grid > .column:only-child, -.ui.grid > .row > .column:only-child { - width: @oneColumn; -} - -/* Grid Based */ -.ui[class*="one column"].grid > .row > .column, -.ui[class*="one column"].grid > .column:not(.row) { - width: @oneColumn; -} -.ui[class*="two column"].grid > .row > .column, -.ui[class*="two column"].grid > .column:not(.row) { - width: @twoColumn; -} -.ui[class*="three column"].grid > .row > .column, -.ui[class*="three column"].grid > .column:not(.row) { - width: @threeColumn; -} -.ui[class*="four column"].grid > .row > .column, -.ui[class*="four column"].grid > .column:not(.row) { - width: @fourColumn; -} -.ui[class*="five column"].grid > .row > .column, -.ui[class*="five column"].grid > .column:not(.row) { - width: @fiveColumn; -} -.ui[class*="six column"].grid > .row > .column, -.ui[class*="six column"].grid > .column:not(.row) { - width: @sixColumn; -} -.ui[class*="seven column"].grid > .row > .column, -.ui[class*="seven column"].grid > .column:not(.row) { - width: @sevenColumn; -} -.ui[class*="eight column"].grid > .row > .column, -.ui[class*="eight column"].grid > .column:not(.row) { - width: @eightColumn; -} -.ui[class*="nine column"].grid > .row > .column, -.ui[class*="nine column"].grid > .column:not(.row) { - width: @nineColumn; -} -.ui[class*="ten column"].grid > .row > .column, -.ui[class*="ten column"].grid > .column:not(.row) { - width: @tenColumn; -} -.ui[class*="eleven column"].grid > .row > .column, -.ui[class*="eleven column"].grid > .column:not(.row) { - width: @elevenColumn; -} -.ui[class*="twelve column"].grid > .row > .column, -.ui[class*="twelve column"].grid > .column:not(.row) { - width: @twelveColumn; -} -.ui[class*="thirteen column"].grid > .row > .column, -.ui[class*="thirteen column"].grid > .column:not(.row) { - width: @thirteenColumn; -} -.ui[class*="fourteen column"].grid > .row > .column, -.ui[class*="fourteen column"].grid > .column:not(.row) { - width: @fourteenColumn; -} -.ui[class*="fifteen column"].grid > .row > .column, -.ui[class*="fifteen column"].grid > .column:not(.row) { - width: @fifteenColumn; -} -.ui[class*="sixteen column"].grid > .row > .column, -.ui[class*="sixteen column"].grid > .column:not(.row) { - width: @sixteenColumn; -} - -/* Row Based Overrides */ -.ui.grid > [class*="one column"].row > .column { - width: @oneColumn !important; -} -.ui.grid > [class*="two column"].row > .column { - width: @twoColumn !important; -} -.ui.grid > [class*="three column"].row > .column { - width: @threeColumn !important; -} -.ui.grid > [class*="four column"].row > .column { - width: @fourColumn !important; -} -.ui.grid > [class*="five column"].row > .column { - width: @fiveColumn !important; -} -.ui.grid > [class*="six column"].row > .column { - width: @sixColumn !important; -} -.ui.grid > [class*="seven column"].row > .column { - width: @sevenColumn !important; -} -.ui.grid > [class*="eight column"].row > .column { - width: @eightColumn !important; -} -.ui.grid > [class*="nine column"].row > .column { - width: @nineColumn !important; -} -.ui.grid > [class*="ten column"].row > .column { - width: @tenColumn !important; -} -.ui.grid > [class*="eleven column"].row > .column { - width: @elevenColumn !important; -} -.ui.grid > [class*="twelve column"].row > .column { - width: @twelveColumn !important; -} -.ui.grid > [class*="thirteen column"].row > .column { - width: @thirteenColumn !important; -} -.ui.grid > [class*="fourteen column"].row > .column { - width: @fourteenColumn !important; -} -.ui.grid > [class*="fifteen column"].row > .column { - width: @fifteenColumn !important; -} -.ui.grid > [class*="sixteen column"].row > .column { - width: @sixteenColumn !important; -} - -& when (@variationGridCelled) and (@variationGridPage){ - /* Celled Page */ - .ui.celled.page.grid { - box-shadow: none; - } -} - -/*------------------- - 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 ------------------------*/ - -/* 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; - } -} - -& when (@variationGridCentered) { - /*---------------------- - Centered - -----------------------*/ - - .ui.centered.grid, - .ui.centered.grid > .row, - .ui.grid > .centered.row { - text-align: center; - justify-content: center; - } - .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), - .ui.centered.grid > .row > .column:not(.aligned):not(.justified), - .ui.grid .centered.row > .column:not(.aligned):not(.justified) { - text-align: left; - } - - .ui.grid > .centered.column, - .ui.grid > .row > .centered.column { - display: block; - margin-left: auto; - margin-right: auto; - } -} - -& when (@variationGridRelaxed) { - /*---------------------- - Relaxed - -----------------------*/ - - .ui.relaxed.grid > .column:not(.row), - .ui.relaxed.grid > .row > .column, - .ui.grid > .relaxed.row > .column { - padding-left: (@relaxedGutterWidth / 2); - 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); - } - - /* Coupling with UI Divider */ - .ui.relaxed.grid .row + .ui.divider, - .ui.grid .relaxed.row + .ui.divider { - 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 (@variationGridPadded) { - /*---------------------- - Padded - -----------------------*/ - - .ui.padded.grid:not(.vertically):not(.horizontally) { - margin: 0 !important; - } - [class*="horizontally padded"].ui.grid { - margin-left: 0 !important; - margin-right: 0 !important; - } - [class*="vertically padded"].ui.grid { - margin-top: 0 !important; - margin-bottom: 0 !important; - } -} - -& when (@variationGridFloated) { - /*---------------------- - "Floated" - -----------------------*/ - - .ui.grid [class*="left floated"].column { - margin-right: auto; - } - .ui.grid [class*="right floated"].column { - margin-left: auto; - } -} - -& when (@variationGridDivided) { - /*---------------------- - Divided - -----------------------*/ - - .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), - .ui.divided.grid:not([class*="vertically divided"]) > .row > .column { - 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; - } - - - - /* No divider on first column on row */ - .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: none; - } - - /* No space on top of first row */ - .ui[class*="vertically divided"].grid > .row:first-child > .column { - margin-top: 0; - } - - - /* Divided Row */ - .ui.grid > .divided.row > .column { - box-shadow: @dividedBorder; - } - .ui.grid > .divided.row > .column:first-child { - 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; - - width: e(%("calc(100%% - %d)", @gutterWidth)); - height: 1px; - - margin: 0 (@gutterWidth / 2); - box-shadow: @verticallyDividedBorder; - } - - & when (@variationGridPadded) { - /* Padded Horizontally Divided */ - [class*="horizontally padded"].ui.divided.grid, - .ui.padded.divided.grid:not(.vertically):not(.horizontally) { - width: 100%; - } - } - /* First Row Vertically Divided */ - .ui[class*="vertically divided"].grid > .row:first-child:before { - box-shadow: none; - } - & when (@variationGridInverted) { - /* Inverted Divided */ - .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), - .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { - box-shadow: @dividedInvertedBorder; - } - .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, - .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 (@variationGridRelaxed) { - /* 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 (@variationGridCelled) { - /*---------------------- - Celled - -----------------------*/ - - .ui.celled.grid { - width: 100%; - margin: @celledMargin; - box-shadow: @celledGridDivider; - } - - .ui.celled.grid > .row { - width: 100% !important; - margin: 0; - padding: 0; - box-shadow: @celledRowDivider; - } - .ui.celled.grid > .column:not(.row), - .ui.celled.grid > .row > .column { - box-shadow: @celledColumnDivider; - } - - .ui.celled.grid > .column:first-child, - .ui.celled.grid > .row > .column:first-child { - box-shadow: none; - } - - .ui.celled.grid > .column:not(.row), - .ui.celled.grid > .row > .column { - padding: @celledPadding; - } - & when (@variationGridRelaxed) { - .ui.relaxed.celled.grid > .column:not(.row), - .ui.relaxed.celled.grid > .row > .column { - padding: @celledRelaxedPadding; - } - .ui[class*="very relaxed"].celled.grid > .column:not(.row), - .ui[class*="very relaxed"].celled.grid > .row > .column { - padding: @celledVeryRelaxedPadding; - } - } - /* Internally Celled */ - .ui[class*="internally celled"].grid { - box-shadow: none; - margin: 0; - } - .ui[class*="internally celled"].grid > .row:first-child { - box-shadow: none; - } - .ui[class*="internally celled"].grid > .row > .column:first-child { - box-shadow: none; - } -} - -& when (@variationGridAligned) { - /*---------------------- - Vertically Aligned - -----------------------*/ - - /* Top Aligned */ - .ui[class*="top aligned"].grid > .column:not(.row), - .ui[class*="top aligned"].grid > .row > .column, - .ui.grid > [class*="top aligned"].row > .column, - .ui.grid > [class*="top aligned"].column:not(.row), - .ui.grid > .row > [class*="top aligned"].column { - flex-direction: column; - vertical-align: top; - align-self: flex-start !important; - } - - /* Middle Aligned */ - .ui[class*="middle aligned"].grid > .column:not(.row), - .ui[class*="middle aligned"].grid > .row > .column, - .ui.grid > [class*="middle aligned"].row > .column, - .ui.grid > [class*="middle aligned"].column:not(.row), - .ui.grid > .row > [class*="middle aligned"].column { - flex-direction: column; - vertical-align: middle; - align-self: center !important; - } - - /* Bottom Aligned */ - .ui[class*="bottom aligned"].grid > .column:not(.row), - .ui[class*="bottom aligned"].grid > .row > .column, - .ui.grid > [class*="bottom aligned"].row > .column, - .ui.grid > [class*="bottom aligned"].column:not(.row), - .ui.grid > .row > [class*="bottom aligned"].column { - flex-direction: column; - vertical-align: bottom; - align-self: flex-end !important; - } -} - -& when (@variationGridStretched) { - /* Stretched */ - .ui.stretched.grid > .row > .column, - .ui.stretched.grid > .column, - .ui.grid > .stretched.row > .column, - .ui.grid > .stretched.column:not(.row), - .ui.grid > .row > .stretched.column { - display: inline-flex !important; - align-self: stretch; - flex-direction: column; - } - - .ui.stretched.grid > .row > .column > *, - .ui.stretched.grid > .column > *, - .ui.grid > .stretched.row > .column > *, - .ui.grid > .stretched.column:not(.row) > *, - .ui.grid > .row > .stretched.column > * { - flex-grow: 1; - } -} - -& when (@variationGridAligned) { - /*---------------------- - Horizontally Centered - -----------------------*/ - - /* Left Aligned */ - - .ui[class*="left aligned"].grid > .column, - .ui[class*="left aligned"].grid > .row > .column, - .ui.grid > [class*="left aligned"].row > .column, - .ui.grid > [class*="left aligned"].column.column, - .ui.grid > .row > [class*="left aligned"].column.column { - text-align: left; - align-self: inherit; - } - - /* Center Aligned */ - - .ui[class*="center aligned"].grid > .column, - .ui[class*="center aligned"].grid > .row > .column, - .ui.grid > [class*="center aligned"].row > .column, - .ui.grid > [class*="center aligned"].column.column, - .ui.grid > .row > [class*="center aligned"].column.column { - text-align: center; - align-self: inherit; - } - - .ui[class*="center aligned"].grid { - justify-content: center; - } - - /* Right Aligned */ - - .ui[class*="right aligned"].grid > .column, - .ui[class*="right aligned"].grid > .row > .column, - .ui.grid > [class*="right aligned"].row > .column, - .ui.grid > [class*="right aligned"].column.column, - .ui.grid > .row > [class*="right aligned"].column.column { - text-align: right; - align-self: inherit; - } -} - -& when (@variationGridJustified) { - /* Justified */ - .ui.justified.grid > .column, - .ui.justified.grid > .row > .column, - .ui.grid > .justified.row > .column, - .ui.grid > .justified.column.column, - .ui.grid > .row > .justified.column.column { - text-align: justify; - hyphens: auto; - } -} - -/*---------------------- - Colored ------------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - - .ui.grid > .@{color}.row, - .ui.grid > .@{color}.column, - .ui.grid > .row > .@{color}.column { - background-color: @c; - color: @white; - } -}) - - -/*---------------------- - 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; -} - -& when (@variationGridReversed) { - /*---------------------- - Reverse - -----------------------*/ - - - /* Mobile */ - @media only screen and (max-width: @largestMobileScreen) { - .ui[class*="mobile reversed"].grid, - .ui[class*="mobile reversed"].grid > .row, - .ui.grid > [class*="mobile reversed"].row { - flex-direction: row-reverse; - } - .ui[class*="mobile vertically reversed"].grid, - .ui.stackable[class*="mobile reversed"] { - flex-direction: column-reverse; - } - & when (@variationGridDivided) { - /* Divided Reversed */ - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: @dividedBorder; - } - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - /* Vertically Divided Reversed */ - .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { - box-shadow: @verticallyDividedBorder; - } - .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { - box-shadow: none; - } - } - & when (@variationGridCelled) { - /* Celled Reversed */ - .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { - box-shadow: @celledColumnDivider; - } - .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } - } - } - - /* Tablet */ - @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui[class*="tablet reversed"].grid, - .ui[class*="tablet reversed"].grid > .row, - .ui.grid > [class*="tablet reversed"].row { - flex-direction: row-reverse; - } - .ui[class*="tablet vertically reversed"].grid { - flex-direction: column-reverse; - } - & when (@variationGridDivided) { - /* Divided Reversed */ - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: @dividedBorder; - } - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - /* Vertically Divided Reversed */ - .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { - box-shadow: @verticallyDividedBorder; - } - .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { - box-shadow: none; - } - } - & when (@variationGridCelled) { - /* Celled Reversed */ - .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { - box-shadow: @celledColumnDivider; - } - .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } - } - } - - /* Computer */ - @media only screen and (min-width: @computerBreakpoint) { - .ui[class*="computer reversed"].grid, - .ui[class*="computer reversed"].grid > .row, - .ui.grid > [class*="computer reversed"].row { - flex-direction: row-reverse; - } - .ui[class*="computer vertically reversed"].grid { - flex-direction: column-reverse; - } - & when (@variationGridDivided) { - /* Divided Reversed */ - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { - box-shadow: @dividedBorder; - } - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, - .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { - box-shadow: none; - } - /* Vertically Divided Reversed */ - .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { - box-shadow: @verticallyDividedBorder; - } - .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { - box-shadow: none; - } - } - & when (@variationGridCelled) { - /* Celled Reversed */ - .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { - box-shadow: @celledColumnDivider; - } - .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { - box-shadow: none; - } - } - } -} - -& when (@variationGridDoubling) { - /*------------------- - Doubling - --------------------*/ - - /* Tablet Only */ - @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui.doubling.grid { - width: auto; - } - .ui.grid > .doubling.row, - .ui.doubling.grid > .row { - margin: 0 !important; - padding: 0 !important; - } - .ui.grid > .doubling.row > .column, - .ui.doubling.grid > .row > .column { - display: inline-block !important; - padding-top: (@rowSpacing / 2) !important; - padding-bottom: (@rowSpacing / 2) !important; - box-shadow: none !important; - margin: 0; - } - .ui[class*="two column"].doubling.grid > .row > .column, - .ui[class*="two column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="two column"].doubling.row.row > .column { - width: @oneColumn !important; - } - .ui[class*="three column"].doubling.grid > .row > .column, - .ui[class*="three column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="three column"].doubling.row.row > .column { - width: @twoColumn !important; - } - .ui[class*="four column"].doubling.grid > .row > .column, - .ui[class*="four column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="four column"].doubling.row.row > .column { - width: @twoColumn !important; - } - .ui[class*="five column"].doubling.grid > .row > .column, - .ui[class*="five column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="five column"].doubling.row.row > .column { - width: @threeColumn !important; - } - .ui[class*="six column"].doubling.grid > .row > .column, - .ui[class*="six column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="six column"].doubling.row.row > .column { - width: @threeColumn !important; - } - .ui[class*="seven column"].doubling.grid > .row > .column, - .ui[class*="seven column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="seven column"].doubling.row.row > .column { - width: @threeColumn !important; - } - .ui[class*="eight column"].doubling.grid > .row > .column, - .ui[class*="eight column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="eight column"].doubling.row.row > .column { - width: @fourColumn !important; - } - .ui[class*="nine column"].doubling.grid > .row > .column, - .ui[class*="nine column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="nine column"].doubling.row.row > .column { - width: @fourColumn !important; - } - .ui[class*="ten column"].doubling.grid > .row > .column, - .ui[class*="ten column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="ten column"].doubling.row.row > .column { - width: @fiveColumn !important; - } - .ui[class*="eleven column"].doubling.grid > .row > .column, - .ui[class*="eleven column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="eleven column"].doubling.row.row > .column { - width: @fiveColumn !important; - } - .ui[class*="twelve column"].doubling.grid > .row > .column, - .ui[class*="twelve column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="twelve column"].doubling.row.row > .column { - width: @sixColumn !important; - } - .ui[class*="thirteen column"].doubling.grid > .row > .column, - .ui[class*="thirteen column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="thirteen column"].doubling.row.row > .column { - width: @sixColumn !important; - } - .ui[class*="fourteen column"].doubling.grid > .row > .column, - .ui[class*="fourteen column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="fourteen column"].doubling.row.row > .column { - width: @sevenColumn !important; - } - .ui[class*="fifteen column"].doubling.grid > .row > .column, - .ui[class*="fifteen column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="fifteen column"].doubling.row.row > .column { - width: @sevenColumn !important; - } - .ui[class*="sixteen column"].doubling.grid > .row > .column, - .ui[class*="sixteen column"].doubling.grid > .column:not(.row), - .ui.grid > [class*="sixteen column"].doubling.row.row > .column { - width: @eightColumn !important; - } - } - - /* Mobile Only */ - @media only screen and (max-width: @largestMobileScreen) { - .ui.grid > .doubling.row, - .ui.doubling.grid > .row { - margin: 0 !important; - padding: 0 !important; - } - .ui.grid > .doubling.row > .column, - .ui.doubling.grid > .row > .column { - padding-top: (@rowSpacing / 2) !important; - padding-bottom: (@rowSpacing / 2) !important; - margin: 0 !important; - box-shadow: none !important; - } - .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { - width: @oneColumn !important; - } - .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { - width: @twoColumn !important; - } - .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { - width: @threeColumn !important; - } - .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { - width: @threeColumn !important; - } - .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { - width: @threeColumn !important; - } - .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { - width: @threeColumn !important; - } - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { - width: @threeColumn !important; - } - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { - width: @fourColumn !important; - } - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { - width: @fourColumn !important; - } - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, - .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), - .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { - width: @fourColumn !important; - } - } -} - -& when (@variationGridStackable) { - /*------------------- - Stackable - --------------------*/ - - @media only screen and (max-width: @largestMobileScreen) { - .ui.stackable.grid { - width: auto; - margin-left: 0 !important; - margin-right: 0 !important; - } - .ui.stackable.grid > .row > .wide.column, - .ui.stackable.grid > .wide.column, - .ui.stackable.grid > .column.grid > .column, - .ui.stackable.grid > .column.row > .column, - .ui.stackable.grid > .row > .column, - .ui.stackable.grid > .column:not(.row), - .ui.grid > .stackable.stackable.stackable.row > .column { - width: 100% !important; - margin: 0 0 !important; - box-shadow: none !important; - padding: (@stackableRowSpacing / 2) (@stackableGutter / 2); - } - .ui.stackable.grid:not(.vertically) > .row { - margin: 0; - padding: 0; - } - - /* Coupling */ - .ui.container > .ui.stackable.grid > .column, - .ui.container > .ui.stackable.grid > .row > .column { - padding-left: 0 !important; - padding-right: 0 !important; - } - - /* Don't pad inside segment or nested grid */ - .ui.grid .ui.stackable.grid, - .ui.segment:not(.vertical) .ui.stackable.page.grid { - margin-left: -(@stackableGutter / 2) !important; - margin-right: -(@stackableGutter / 2) !important; - } - - /* Divided Stackable */ - .ui.stackable.divided.grid > .row:first-child > .column:first-child, - .ui.stackable.celled.grid > .row:first-child > .column:first-child, - .ui.stackable.divided.grid > .column:not(.row):first-child, - .ui.stackable.celled.grid > .column:not(.row):first-child { - border-top: none !important; - } - & when (@variationGridInverted) { - .ui.inverted.stackable.celled.grid > .column:not(.row), - .ui.inverted.stackable.divided.grid > .column:not(.row), - .ui.inverted.stackable.celled.grid > .row > .column, - .ui.inverted.stackable.divided.grid > .row > .column { - border-top: @stackableInvertedMobileBorder; - } - } - .ui.stackable.celled.grid > .column:not(.row), - .ui.stackable.divided:not(.vertically).grid > .column:not(.row), - .ui.stackable.celled.grid > .row > .column, - .ui.stackable.divided:not(.vertically).grid > .row > .column { - border-top: @stackableMobileBorder; - box-shadow: none !important; - padding-top: @stackableRowSpacing !important; - padding-bottom: @stackableRowSpacing !important; - } - & when (@variationGridCelled) { - .ui.stackable.celled.grid > .row { - box-shadow: none !important; - } - } - & when (@variationGridDivided) { - .ui.stackable.divided:not(.vertically).grid > .column:not(.row), - .ui.stackable.divided:not(.vertically).grid > .row > .column { - padding-left: 0 !important; - padding-right: 0 !important; - } - } - } - -} - -/*---------------------- - Only (Device) ------------------------*/ - - -/* These include arbitrary class repetitions for forced specificity */ - -/* Mobile Only Hide */ -@media only screen and (max-width: @largestMobileScreen) { - .ui[class*="tablet only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="computer only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="large screen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} -/* Tablet Only Hide */ -@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { - .ui[class*="mobile only"].grid.grid.grid:not(.tablet), - .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), - .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), - .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { - display: none !important; - } - .ui[class*="computer only"].grid.grid.grid:not(.tablet), - .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), - .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), - .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { - display: none !important; - } - .ui[class*="large screen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Computer Only Hide */ -@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { - .ui[class*="mobile only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - .ui[class*="tablet only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } - .ui[class*="large screen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { - display: none !important; - } - .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Large Screen Only Hide */ -@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { - .ui[class*="mobile only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - .ui[class*="tablet only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } - .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), - .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), - .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { - display: none !important; - } -} - -/* Widescreen Only Hide */ -@media only screen and (min-width: @widescreenMonitorBreakpoint) { - .ui[class*="mobile only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), - .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { - display: none !important; - } - .ui[class*="tablet only"].grid.grid.grid:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), - .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), - .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { - display: none !important; - } -} - -& when (@variationGridCompact) { - /*----------------- - Compact - -----------------*/ - - .ui.ui.ui.compact.grid > .column:not(.row), - .ui.ui.ui.compact.grid > .row > .column { - padding-left: (@compactGutterWidth / 2); - padding-right: (@compactGutterWidth / 2); - } - - .ui.ui.ui.compact.grid > * { - padding-left: (@compactGutterWidth / 2); - padding-right: (@compactGutterWidth / 2); - } - - /* Row */ - .ui.ui.ui.compact.grid > .row { - padding-top: (@compactRowSpacing / 2); - padding-bottom: (@compactRowSpacing / 2); - } - - /* Columns */ - .ui.ui.ui.compact.grid > .column:not(.row) { - padding-top: (@compactRowSpacing / 2); - padding-bottom: (@compactRowSpacing / 2); - } - & when (@variationGridRelaxed) and (@variationGridCelled) { - /* Relaxed + Celled */ - .ui.compact.relaxed.celled.grid > .column:not(.row), - .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; - } - } - - /*----------------- - Very compact - -----------------*/ - - .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); - } - - /* Row */ - .ui.ui.ui[class*="very compact"].grid > .row { - padding-top: (@veryCompactRowSpacing / 2); - padding-bottom: (@veryCompactRowSpacing / 2); - padding-left: (@veryCompactGutterWidth * 1.5); - padding-right: (@veryCompactGutterWidth * 1.5); - } - - /* 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; - } - .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; - } - } -} - - -.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/menu.less b/semantic/src/definitions/collections/menu.less deleted file mode 100644 index 3d712ed..0000000 --- a/semantic/src/definitions/collections/menu.less +++ /dev/null @@ -1,1939 +0,0 @@ -/* - * # Fomantic - Menu - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Copyright 2015 Contributor - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'menu'; - -@import (multiple) '../../theme.config'; - -/******************************* - Standard -*******************************/ - -/*-------------- - Menu ----------------*/ - -.ui.menu { - display: flex; - margin: @margin; - font-family: @fontFamily; - background: @background; - font-weight: @fontWeight; - border: @border; - box-shadow: @boxShadow; - border-radius: @borderRadius; - min-height: @minHeight; -} - -.ui.menu:after { - content: ''; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - -.ui.menu:first-child { - margin-top: 0; -} -.ui.menu:last-child { - margin-bottom: 0; -} - - -/*-------------- - Sub-Menu ----------------*/ - -.ui.menu .menu { - margin: 0; -} - -.ui.menu:not(.vertical) > .menu { - display: flex; -} - -/*-------------- - Item ----------------*/ - -.ui.menu:not(.vertical) .item { - display: flex; - align-items: center; -} - -.ui.menu .item { - position: relative; - vertical-align: middle; - line-height: 1; - text-decoration: none; - -webkit-tap-highlight-color: transparent; - flex: 0 0 auto; - user-select: none; - - background: @itemBackground; - padding: @itemVerticalPadding @itemHorizontalPadding; - text-transform: @itemTextTransform; - color: @itemTextColor; - font-weight: @itemFontWeight; - transition: @itemTransition; -} - -.ui.menu > .item:first-child { - border-radius: @borderRadius 0 0 @borderRadius; -} - -/* Border */ -.ui.menu .item:before { - position: absolute; - content: ''; - top: 0; - right: 0; - height: 100%; - - width: @dividerSize; - background: @dividerBackground; -} - -/*-------------- - Text Content ----------------*/ - -.ui.menu .text.item > *, -.ui.menu .item > a:not(.ui), -.ui.menu .item > p:only-child { - user-select: text; - line-height: @textLineHeight; -} -.ui.menu .item > p:first-child { - margin-top: 0; -} -.ui.menu .item > p:last-child { - margin-bottom: 0; -} - -/*-------------- - Icons ----------------*/ - -.ui.menu .item > i.icon { - opacity: @iconOpacity; - float: @iconFloat; - margin: @iconMargin; -} - -/*-------------- - Button ----------------*/ - -.ui.menu:not(.vertical) .item > .button { - position: relative; - top: @buttonOffset; - margin: @buttonMargin; - padding-bottom: @buttonVerticalPadding; - padding-top: @buttonVerticalPadding; - font-size: @buttonSize; -} - -/*---------------- - Grid / Container ------------------*/ - -.ui.menu > .grid, -.ui.menu > .container { - display: flex; - align-items: inherit; - flex-direction: inherit; -} - -/*-------------- - Inputs ----------------*/ - -.ui.menu .item > .input { - width: 100%; -} -.ui.menu:not(.vertical) .item > .input { - position: relative; - top: @inputOffset; - margin: @inputVerticalMargin 0; -} -.ui.menu .item > .input input { - font-size: @inputSize; - padding-top: @inputVerticalPadding; - padding-bottom: @inputVerticalPadding; -} - - -/*-------------- - Header ----------------*/ - -.ui.menu .header.item, -.ui.vertical.menu .header.item { - margin: 0; - background: @headerBackground; - text-transform: @headerTextTransform; - font-weight: @headerWeight; -} - -& when (@variationMenuVertical) { - .ui.vertical.menu .item > .header:not(.ui) { - margin: @verticalHeaderMargin; - font-size: @verticalHeaderFontSize; - font-weight: @verticalHeaderFontWeight; - } -} - -/*-------------- - Dropdowns ----------------*/ - - -/* Dropdown Icon */ -.ui.menu .item > i.dropdown.icon { - padding: 0; - float: @dropdownIconFloat; - margin: 0 0 0 @dropdownIconDistance; -} - -/* Menu */ -.ui.menu .dropdown.item .menu { - min-width: e("calc(100% - 1px)"); - border-radius: 0 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius; - background: @dropdownBackground; - margin: @dropdownMenuDistance 0 0; - box-shadow: @dropdownMenuBoxShadow; - flex-direction: column !important; -} - - -/* Menu Items */ -.ui.menu .ui.dropdown .menu > .item { - margin: 0; - text-align: left; - font-size: @dropdownItemFontSize !important; - padding: @dropdownItemPadding !important; - background: @dropdownItemBackground !important; - color: @dropdownItemColor !important; - text-transform: @dropdownItemTextTransform !important; - font-weight: @dropdownItemFontWeight !important; - box-shadow: @dropdownItemBoxShadow !important; - transition: @dropdownItemTransition !important; -} -.ui.menu .ui.dropdown .menu > .item:hover { - background: @dropdownHoveredItemBackground !important; - color: @dropdownHoveredItemColor !important; -} -.ui.menu .ui.dropdown .menu > .selected.item { - background: @dropdownSelectedItemBackground !important; - color: @dropdownSelectedItemColor !important; -} -.ui.menu .ui.dropdown .menu > .active.item { - background: @dropdownActiveItemBackground !important; - font-weight: @dropdownActiveItemFontWeight !important; - color: @dropdownActiveItemColor !important; -} - -.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { - display: block; -} -.ui.menu .ui.dropdown .menu > .item > .icons, -.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { - display: inline-block; - font-size: @dropdownItemIconFontSize !important; - float: @dropdownItemIconFloat; - margin: @dropdownItemIconMargin !important; -} - -& when (@variationMenuSecondary) or (@variationMenuText) { - /* Secondary */ - .ui.secondary.menu .dropdown.item > .menu, - .ui.text.menu .dropdown.item > .menu { - border-radius: @dropdownMenuBorderRadius; - margin-top: @secondaryDropdownMenuDistance; - } -} - -/* Pointing */ -.ui.menu .pointing.dropdown.item .menu { - margin-top: @pointingDropdownMenuDistance; -} - -& when (@variationMenuInverted) { - /* Inverted */ - .ui.inverted.menu .search.dropdown.item > .search, - .ui.inverted.menu .search.dropdown.item > .text { - color: @invertedSelectionDropdownColor; - } -} - -& when (@variationMenuVertical) { - /* Vertical */ - .ui.vertical.menu .dropdown.item > i.icon { - float: right; - content: "\f0da"; - margin-left: 1em; - } - .ui.vertical.menu .dropdown.item .menu { - left: 100%; - /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ - min-width: 0; - min-width: max-content; - margin: 0 0 0 @dropdownMenuDistance; - box-shadow: @dropdownVerticalMenuBoxShadow; - border-radius: 0 @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius; - } - .ui.vertical.menu .dropdown.item.upward .menu { - bottom: 0; - } - .ui.vertical.menu .dropdown.item:not(.upward) .menu { - top: 0; - } - .ui.vertical.menu .active.dropdown.item { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - .ui.vertical.menu .dropdown.active.item { - box-shadow: none; - } -} - -/* Evenly Divided */ -.ui.item.menu .dropdown .menu .item { - width: 100%; -} - -/*-------------- - Labels ----------------*/ - -.ui.menu .item > .label:not(.floating) { - margin-left: @labelTextMargin; - padding: @labelVerticalPadding @labelHorizontalPadding; -} -& when (@variationMenuVertical) { - .ui.vertical.menu .item > .label { - margin-top: @labelOffset; - margin-bottom: @labelOffset; - padding: @labelVerticalPadding @labelHorizontalPadding; - } -} -.ui.menu .item > .floating.label { - padding: @labelVerticalPadding @labelHorizontalPadding; -} -.ui.menu .item > .label { - background: @labelBackground; - color: @labelTextColor; -} -.ui.menu .item > .image.label img { - margin: @imageLabelImageMargin; - height: @imageLabelHeight; -} -/*-------------- - Images ----------------*/ - -.ui.menu .item > img:not(.ui) { - display: inline-block; - vertical-align: middle; - margin: @imageMargin; - width: @imageWidth; -} -& when (@variationMenuVertical) { - .ui.vertical.menu .item > img:not(.ui):only-child { - display: block; - max-width: 100%; - width: @verticalImageWidth; - } -} - -/******************************* - Coupling -*******************************/ - -/*-------------- - List ----------------*/ - -/* Menu divider shouldnt apply */ -.ui.menu .list .item:before { - background: none !important; -} - -& when (@variationMenuVertical) { - /*-------------- - Sidebar - ---------------*/ - - /* Show vertical dividers below last */ - - .ui.vertical.sidebar.menu > .item:first-child:before { - display: block !important; - } - .ui.vertical.sidebar.menu > .item::before { - top: auto; - bottom: 0; - } -} - -/*-------------- - Container ----------------*/ - -@media only screen and (max-width: @largestMobileScreen) { - .ui.menu > .ui.container { - width: 100% !important; - margin-left: 0 !important; - margin-right: 0 !important; - } -} -@media only screen and (min-width: @tabletBreakpoint) { - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { - border-left: @dividerSize solid @dividerBackground; - } - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, - .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { - border-right: @dividerSize solid @dividerBackground; - } -} - - -/******************************* - States -*******************************/ - -/*-------------- - Hover ----------------*/ - - -.ui.link.menu .item:hover, -.ui.menu .dropdown.item:hover, -.ui.menu .link.item:hover, -.ui.menu a.item:hover { - cursor: pointer; - background: @hoverItemBackground; - color: @hoverItemTextColor; -} - - -/*-------------- - Pressed ----------------*/ - -.ui.link.menu .item:active, -.ui.menu .link.item:active, -.ui.menu a.item:active { - background: @pressedItemBackground; - color: @pressedItemTextColor; -} - - -/*-------------- - Active ----------------*/ - -.ui.menu .active.item { - background: @activeItemBackground; - color: @activeItemTextColor; - font-weight: @activeItemFontWeight; - box-shadow: @activeItemBoxShadow; -} -.ui.menu .active.item > i.icon { - opacity: @activeIconOpacity; -} - -/*-------------- - Active Hover ----------------*/ - -.ui.menu .active.item:hover, -.ui.vertical.menu .active.item:hover { - background-color: @activeHoverItemBackground; - color: @activeHoverItemColor; -} - - -/*-------------- - Disabled ----------------*/ - -.ui.ui.menu .item.disabled { - cursor: default; - background-color: transparent; - color: @disabledTextColor; - pointer-events: none; -} - - -/******************************* - Types -*******************************/ - -/*------------------ -Floated Menu / Item --------------------*/ - -/* Left Floated */ -.ui.menu:not(.vertical) .left.item, -.ui.menu:not(.vertical) .left.menu { - display: flex; - margin-right: auto !important; -} -/* Right Floated */ -.ui.menu:not(.vertical) .right.item, -.ui.menu:not(.vertical) .right.menu { - display: flex; - margin-left: auto !important; -} - -.ui.menu:not(.vertical) :not(.dropdown) > .left.menu, -.ui.menu:not(.vertical) :not(.dropdown) > .right.menu { - display: inherit; -} - -/* Center */ -.ui.menu:not(.vertical) .center.item, -.ui.menu:not(.vertical) .center.menu { - display: flex; - margin-left: auto !important; - margin-right: auto !important; -} - -/* Swapped Borders */ -.ui.menu .right.item::before, -.ui.menu .right.menu > .item::before { - right: auto; - left: 0; -} - -/* Remove Outer Borders */ -.ui.menu .center.item:last-child::before, -.ui.menu .center.menu > .item:last-child::before { - display: none; -} - -& when (@variationMenuVertical) { - /*-------------- - Vertical - ---------------*/ - - .ui.vertical.menu { - display: block; - flex-direction: column; - background: @verticalBackground; - box-shadow: @verticalBoxShadow; - } - - /*--- Item ---*/ - .ui.vertical.menu .item { - display: block; - background: @verticalItemBackground; - border-top: none; - border-right: none; - } - .ui.vertical.menu > .item:first-child { - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.vertical.menu > .item:last-child { - border-radius: 0 0 @borderRadius @borderRadius; - } - - /*--- Label ---*/ - .ui.vertical.menu .item > .label { - float: right; - text-align: center; - } - - /*--- Icon ---*/ - .ui.vertical.menu .item > i.icon, - .ui.vertical.menu .item > i.icons { - width: @iconWidth; - float: @verticalIconFloat; - margin: @verticalIconMargin; - } - .ui.vertical.menu .item > .label + i.icon { - float: @labelAndIconFloat; - margin: @labelAndIconMargin; - } - - - /*--- Border ---*/ - .ui.vertical.menu .item:before { - position: absolute; - content: ''; - top: 0; - left: 0; - width: 100%; - height: @dividerSize; - background: @verticalDividerBackground; - } - - .ui.vertical.menu .item:first-child:before { - display: none !important; - } - - - /*--- Sub Menu ---*/ - .ui.vertical.menu .item > .menu { - margin: @subMenuMargin; - } - .ui.vertical.menu .menu .item { - background: none; - padding: @subMenuVerticalPadding @subMenuHorizontalPadding; - font-size: @subMenuFontSize; - color: @subMenuTextColor; - } - .ui.vertical.menu .item .menu a.item:hover, - .ui.vertical.menu .item .menu .link.item:hover { - color: @darkTextColor; - } - .ui.vertical.menu .menu .item:before { - display: none; - } - - /* Vertical Active */ - .ui.vertical.menu .active.item { - background: @activeItemBackground; - border-radius: 0; - box-shadow: @verticalActiveBoxShadow; - } - .ui.vertical.menu > .active.item:first-child { - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.vertical.menu > .active.item:last-child { - border-radius: 0 0 @borderRadius @borderRadius; - } - .ui.vertical.menu > .active.item:only-child { - border-radius: @borderRadius; - } - .ui.vertical.menu .active.item .menu .active.item { - border-left: none; - } - .ui.vertical.menu .item .menu .active.item { - background-color: @subMenuActiveBackground; - font-weight: @subMenuActiveFontWeight; - color: @subMenuActiveTextColor; - } -} - -& when (@variationMenuTabular) { - /*-------------- - Tabular - ---------------*/ - - .ui.tabular.menu { - border-radius: 0; - box-shadow: none !important; - border: none; - background: @tabularBackground; - border-bottom: @tabularBorderWidth solid @tabularBorderColor; - } - .ui.tabular.fluid.menu { - width: @tabularFluidWidth !important; - } - .ui.tabular.menu .item { - background: transparent; - border-bottom: none; - - border-left: @tabularBorderWidth solid transparent; - border-right: @tabularBorderWidth solid transparent; - border-top: @tabularOppositeBorderWidth solid transparent; - padding: @tabularVerticalPadding @tabularHorizontalPadding; - color: @tabularTextColor; - } - .ui.tabular.menu .item:before { - display: none; - } - - /* Hover */ - .ui.tabular.menu .item:hover { - background-color: transparent; - color: @tabularHoveredTextColor; - } - - /* Active */ - .ui.tabular.menu .active.item { - background: @tabularActiveBackground; - color: @tabularActiveColor; - border-top-width: @tabularBorderWidth; - border-color: @tabularBorderColor; - font-weight: @tabularActiveWeight; - margin-bottom: -@tabularBorderWidth; - box-shadow: @tabularActiveBoxShadow; - border-radius: @tabularBorderRadius @tabularBorderRadius 0 0 !important; - } - - /* Coupling with segment for attachment */ - .ui.tabular.menu + .attached:not(.top).segment, - .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { - border-top: none; - margin-left: 0; - margin-top: 0; - margin-right: 0; - width: 100%; - } - .top.attached.segment + .ui.bottom.tabular.menu { - position: relative; - width: @tabularFluidWidth; - left: -@tabularFluidOffset; - } - - /* Bottom Vertical Tabular */ - .ui.bottom.tabular.menu { - background: @tabularBackground; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-top: @tabularBorderWidth solid @tabularBorderColor; - } - .ui.bottom.tabular.menu .item { - background: none; - border-left: @tabularBorderWidth solid transparent; - border-right: @tabularBorderWidth solid transparent; - border-bottom: @tabularBorderWidth solid transparent; - border-top: none; - } - .ui.bottom.tabular.menu .active.item { - background: @tabularActiveBackground; - color: @tabularActiveColor; - border-color: @tabularBorderColor; - margin: -@tabularBorderWidth 0 0 0; - border-radius: 0 0 @tabularBorderRadius @tabularBorderRadius !important; - } - & when (@variationMenuVertical) { - /* Vertical Tabular (Left) */ - .ui.vertical.tabular.menu { - background: @tabularVerticalBackground; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: @tabularBorderWidth solid @tabularBorderColor; - } - .ui.vertical.tabular.menu .item { - background: none; - border-left: @tabularBorderWidth solid transparent; - border-bottom: @tabularBorderWidth solid transparent; - border-top: @tabularBorderWidth solid transparent; - border-right: none; - } - .ui.vertical.tabular.menu .active.item { - background: @tabularActiveBackground; - color: @tabularActiveColor; - border-color: @tabularBorderColor; - margin: 0 -@tabularBorderWidth 0 0; - border-radius: @tabularBorderRadius 0 0 @tabularBorderRadius !important; - } - - /* Vertical Right Tabular */ - .ui.vertical.right.tabular.menu { - background: @tabularVerticalBackground; - border-radius: 0; - box-shadow: none !important; - border-bottom: none; - border-right: none; - border-left: @tabularBorderWidth solid @tabularBorderColor; - } - .ui.vertical.right.tabular.menu .item { - background: none; - border-right: @tabularBorderWidth solid transparent; - border-bottom: @tabularBorderWidth solid transparent; - border-top: @tabularBorderWidth solid transparent; - border-left: none; - } - .ui.vertical.right.tabular.menu .active.item { - background: @tabularActiveBackground; - color: @tabularActiveColor; - border-color: @tabularBorderColor; - margin: 0 0 0 -@tabularBorderWidth; - border-radius: 0 @tabularBorderRadius @tabularBorderRadius 0 !important; - } - } - /* Dropdown */ - .ui.tabular.menu .active.dropdown.item { - margin-bottom: 0; - border-left: @tabularBorderWidth solid transparent; - border-right: @tabularBorderWidth solid transparent; - border-top: @tabularOppositeBorderWidth solid transparent; - border-bottom: none; - } -} - - -& when (@variationMenuPagination) { - /*-------------- - Pagination - ---------------*/ - - .ui.pagination.menu { - margin: 0; - display: inline-flex; - vertical-align: middle; - } - .ui.pagination.menu .item:last-child { - border-radius: 0 @borderRadius @borderRadius 0; - } - .ui.compact.menu .item:last-child { - border-radius: 0 @borderRadius @borderRadius 0; - } - .ui.pagination.menu .item:last-child:before { - display: none; - } - - .ui.pagination.menu .item { - min-width: @paginationMinWidth; - text-align: center; - } - .ui.pagination.menu .icon.item i.icon { - vertical-align: top; - } - - /* Active */ - .ui.pagination.menu .active.item { - border-top: none; - padding-top: @itemVerticalPadding; - background-color: @paginationActiveBackground; - color: @paginationActiveTextColor; - box-shadow: none; - } -} - -& when (@variationMenuSecondary) { - /*-------------- - Secondary - ---------------*/ - - .ui.secondary.menu { - background: @secondaryBackground; - margin-left: -@secondaryItemSpacing; - margin-right: -@secondaryItemSpacing; - border-radius: 0; - border: none; - box-shadow: none; - } - - /* Item */ - .ui.secondary.menu .item { - align-self: center; - box-shadow: none; - border: none; - padding: @secondaryItemPadding; - margin: @secondaryItemMargin; - background: @secondaryItemBackground; - transition: @secondaryItemTransition; - border-radius: @secondaryItemBorderRadius; - } - - /* No Divider */ - .ui.secondary.menu .item:before { - display: none !important; - } - - /* Header */ - .ui.secondary.menu .header.item { - border-radius: 0; - border-right: @secondaryHeaderBorder; - background: @secondaryHeaderBackground; - } - - /* Image */ - .ui.secondary.menu .item > img:not(.ui) { - margin: 0; - } - - /* Hover */ - .ui.secondary.menu .dropdown.item:hover, - .ui.secondary.menu .link.item:hover, - .ui.secondary.menu a.item:hover { - background: @secondaryHoverItemBackground; - color: @secondaryHoverItemColor; - } - - /* Active */ - .ui.secondary.menu .active.item { - box-shadow: none; - background: @secondaryActiveItemBackground; - color: @secondaryActiveItemColor; - border-radius: @secondaryItemBorderRadius; - } - - /* Active Hover */ - .ui.secondary.menu .active.item:hover { - box-shadow: none; - background: @secondaryActiveHoverItemBackground; - color: @secondaryActiveHoverItemColor; - } - - & when (@variationMenuInverted) { - /* Inverted */ - .ui.secondary.inverted.menu .link.item:not(.disabled), - .ui.secondary.inverted.menu a.item:not(.disabled) { - color: @secondaryInvertedColor; - } - .ui.secondary.inverted.menu .dropdown.item:hover, - .ui.secondary.inverted.menu .link.item:hover, - .ui.secondary.inverted.menu a.item:hover { - background: @secondaryInvertedHoverBackground; - color: @secondaryInvertedHoverColor; - } - .ui.secondary.inverted.menu .active.item { - background: @secondaryInvertedActiveBackground; - color: @secondaryInvertedActiveColor; - } - } - /* Fix item margins */ - .ui.secondary.item.menu { - margin-left: 0; - margin-right: 0; - } - .ui.secondary.item.menu .item:last-child { - margin-right: 0; - } - & when (@variationMenuAttached) { - .ui.secondary.attached.menu { - box-shadow: none; - } - } - & when (@variationMenuVertical) { - /*--------------------- - Secondary Vertical - -----------------------*/ - - /* Sub Menu */ - .ui.vertical.secondary.menu .item:not(.dropdown) > .menu { - margin: @secondaryMenuSubMenuMargin; - } - .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { - margin: @secondaryMenuSubMenuItemMargin; - padding: @secondaryMenuSubMenuItemPadding; - } - - - .ui.secondary.vertical.menu > .item { - border: none; - margin: @secondaryVerticalItemMargin; - border-radius: @secondaryVerticalItemBorderRadius !important; - } - .ui.secondary.vertical.menu > .header.item { - border-radius: 0; - } - - /* Sub Menu */ - .ui.vertical.secondary.menu .item > .menu .item { - background-color: transparent; - } - - /* Inverted */ - .ui.secondary.inverted.menu { - background-color: transparent; - } - } - - & when (@variationMenuPointing) { - /*--------------------- - Secondary Pointing - -----------------------*/ - - .ui.secondary.pointing.menu { - margin-left: 0; - margin-right: 0; - border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; - } - - .ui.secondary.pointing.menu .item { - border-bottom-color: transparent; - border-bottom-style: solid; - border-radius: 0; - align-self: flex-end; - - margin: 0 0 -@secondaryPointingBorderWidth; - padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; - border-bottom-width: @secondaryPointingBorderWidth; - transition: @secondaryItemTransition; - } - .ui.secondary.pointing.menu .ui.dropdown .menu .item { - border-bottom-width: 0; - } - - .ui.secondary.pointing.menu .item > .label:not(.floating) { - margin-top: -@labelVerticalPadding; - margin-bottom: -@labelVerticalPadding; - } - .ui.secondary.pointing.menu .item > .circular.label { - margin-top: -@circularLabelVerticalPadding; - margin-bottom: -@circularLabelVerticalPadding; - } - - /* Item Types */ - .ui.secondary.pointing.menu .header.item { - color: @secondaryPointingHeaderColor !important; - } - .ui.secondary.pointing.menu .text.item { - box-shadow: none !important; - } - .ui.secondary.pointing.menu .item:after { - display: none; - } - - /* Hover */ - .ui.secondary.pointing.menu .dropdown.item:hover, - .ui.secondary.pointing.menu .link.item:hover, - .ui.secondary.pointing.menu a.item:hover { - background-color: transparent; - color: @secondaryPointingHoverTextColor; - } - - /* Pressed */ - .ui.secondary.pointing.menu .dropdown.item:active, - .ui.secondary.pointing.menu .link.item:active, - .ui.secondary.pointing.menu a.item:active { - background-color: transparent; - border-color: @secondaryPointingBorderColor; - } - - /* Active */ - .ui.secondary.pointing.menu .active.item { - background-color: transparent; - box-shadow: none; - border-color: @secondaryPointingActiveBorderColor; - font-weight: @secondaryPointingActiveFontWeight; - color: @secondaryPointingActiveTextColor; - } - - /* Active Hover */ - .ui.secondary.pointing.menu .active.item:hover { - border-color: @secondaryPointingActiveHoverBorderColor; - color: @secondaryPointingActiveHoverTextColor; - } - - /* Active Dropdown */ - .ui.secondary.pointing.menu .active.dropdown.item { - border-color: @secondaryPointingActiveDropdownBorderColor; - } - & when (@variationMenuVertical) { - /* Vertical Pointing */ - .ui.secondary.vertical.pointing.menu { - border-bottom-width: 0; - border-right-width: @secondaryPointingBorderWidth; - border-right-style: solid; - border-right-color: @secondaryPointingBorderColor; - } - .ui.secondary.vertical.pointing.menu .item { - border-bottom: none; - border-right-style: solid; - border-right-color: transparent; - border-radius: 0 !important; - margin: @secondaryVerticalPointingItemMargin; - border-right-width: @secondaryPointingBorderWidth; - } - - /* Vertical Active */ - .ui.secondary.vertical.pointing.menu .active.item { - border-color: @secondaryPointingActiveBorderColor; - } - } - & when (@variationMenuInverted) { - /* Inverted */ - .ui.secondary.inverted.pointing.menu { - border-color: @secondaryPointingInvertedBorderColor; - } - - .ui.secondary.inverted.pointing.menu .item:not(.disabled) { - color: @secondaryPointingInvertedItemTextColor; - } - .ui.secondary.inverted.pointing.menu .header.item { - color: @secondaryPointingInvertedItemHeaderColor !important; - } - - /* Hover */ - .ui.secondary.inverted.pointing.menu .link.item:hover, - .ui.secondary.inverted.pointing.menu a.item:hover { - color: @secondaryPointingInvertedItemHoverTextColor; - } - - - /* Active */ - .ui.ui.secondary.inverted.pointing.menu .active.item { - border-color: @secondaryPointingInvertedActiveBorderColor; - color: @secondaryPointingInvertedActiveColor; - background-color: transparent; - } - } - } -} - -& when (@variationMenuText) { - /*-------------- - Text Menu - ---------------*/ - - .ui.text.menu { - background: none transparent; - border-radius: 0; - box-shadow: none; - border: none; - - margin: @textMenuMargin; - } - .ui.text.menu .item { - border-radius: 0; - box-shadow: none; - align-self: center; - margin: @textMenuItemMargin; - padding: @textMenuItemPadding; - font-weight: @textMenuItemFontWeight; - color: @textMenuItemColor; - transition: @textMenuItemTransition; - } - - /* Border */ - .ui.text.menu .item:before, - .ui.text.menu .menu .item:before { - display: none !important; - } - - /* Header */ - .ui.text.menu .header.item { - background-color: transparent; - opacity: 1; - color: @textMenuHeaderColor; - font-size: @textMenuHeaderSize; - text-transform: @textMenuHeaderTextTransform; - font-weight: @textMenuHeaderFontWeight; - } - - /* Image */ - .ui.text.menu .item > img:not(.ui) { - margin: 0; - } - - /*--- fluid text ---*/ - .ui.text.item.menu .item { - margin: 0; - } - & when (@variationMenuVertical) { - /*--- vertical text ---*/ - .ui.vertical.text.menu { - margin: @textVerticalMenuMargin; - } - .ui.vertical.text.menu:first-child { - margin-top: 0; - } - .ui.vertical.text.menu:last-child { - margin-bottom: 0; - } - .ui.vertical.text.menu .item { - margin: @textVerticalMenuItemMargin; - padding-left: 0; - padding-right: 0; - } - .ui.vertical.text.menu .item > i.icon { - float: @textVerticalMenuIconFloat; - margin: @iconMargin; - } - .ui.vertical.text.menu .header.item { - margin: @textVerticalMenuHeaderMargin; - } - - /* Vertical Sub Menu */ - .ui.vertical.text.menu .item:not(.dropdown) > .menu { - margin: @textMenuSubMenuMargin; - } - .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { - margin: @textMenuSubMenuItemMargin; - padding: @textMenuSubMenuItemPadding; - } - } - /*--- hover ---*/ - .ui.text.menu .item:hover { - opacity: 1; - background-color: transparent; - } - - /*--- active ---*/ - .ui.text.menu .active.item { - background-color: transparent; - border: none; - box-shadow: none; - font-weight: @textMenuActiveItemFontWeight; - color: @textMenuActiveItemColor; - } - - /*--- active hover ---*/ - .ui.text.menu .active.item:hover { - background-color: transparent; - } - & when (@variationMenuPointing) { - /* Disable Bariations */ - .ui.text.pointing.menu .active.item:after { - box-shadow: none; - } - } - & when (@variationMenuAttached) { - .ui.text.attached.menu { - box-shadow: none; - } - } - & when (@variationMenuInverted) { - /* Inverted */ - .ui.inverted.text.menu, - .ui.inverted.text.menu .item, - .ui.inverted.text.menu .item:hover, - .ui.inverted.text.menu .active.item { - background-color: transparent; - } - } - & when (@variationMenuFluid) { - /* Fluid */ - .ui.fluid.text.menu { - margin-left: 0; - margin-right: 0; - } - } -} - -/*-------------- - Icon Only ----------------*/ - -/* Vertical Menu */ -.ui.vertical.icon.menu { - display: inline-block; - width: auto; -} - -/* 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 Gylph */ -.ui.icon.menu i.icon:before { - opacity: 1; -} - -/* (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; -} - -/* Inverted */ -.ui.inverted.icon.menu .item { - color: @iconMenuInvertedItemColor; -} - -& when (@variationMenuLabeled) { - /*-------------- - Labeled Icon - ---------------*/ - - /* Menu */ - .ui.labeled.icon.menu { - text-align: center; - } - - /* Item */ - .ui.labeled.icon.menu .item { - min-width: @labeledIconMinWidth; - flex-direction: column; - } - - /* Icon */ - .ui.labeled.icon.menu > .item > i.icon:not(.dropdown) { - height: 1em; - display: block; - font-size: @labeledIconSize !important; - margin: 0 auto @labeledIconTextMargin !important; - } - & when (@variationMenuFluid) { - /* Fluid */ - .ui.fluid.labeled.icon.menu > .item { - min-width: 0; - } - } -} - - -/******************************* - Variations -*******************************/ - -& when (@variationMenuStackable) { - /*-------------- - Stackable - ---------------*/ - - @media only screen and (max-width: @largestMobileScreen) { - .ui.stackable.menu { - flex-direction: column; - } - .ui.stackable.menu .item { - width: 100% !important; - } - .ui.stackable.menu .item:before { - position: absolute; - content: ''; - top: auto; - bottom: 0; - left: 0; - width: 100%; - height: @dividerSize; - background: @verticalDividerBackground; - } - - .ui.stackable.menu .left.menu, - .ui.stackable.menu .left.item { - margin-right: 0 !important; - } - .ui.stackable.menu .right.menu, - .ui.stackable.menu .right.item { - margin-left: 0 !important; - } - .ui.stackable.menu .center.menu, - .ui.stackable.menu .center.item { - margin-left: 0 !important; - margin-right: 0 !important; - } - - .ui.stackable.menu .right.menu, - .ui.stackable.menu .center.menu, - .ui.stackable.menu .left.menu { - flex-direction: column; - } - } -} - -/*-------------- - Colors ----------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - - & when not (@color=secondary) { - .ui.ui.ui.menu .@{color}.active.item, - .ui.ui.@{color}.menu .active.item:hover, - .ui.ui.@{color}.menu .active.item { - & when not (@secondaryPointingActiveBorderColor = currentColor) { - border-color: @c; - } - color: @c; - } - } -}) - -& when (@variationMenuInverted) { - /*-------------- - Inverted - ---------------*/ - - .ui.inverted.menu { - border: @invertedBorder; - background: @invertedBackground; - box-shadow: @invertedBoxShadow; - } - - /* Menu Item */ - .ui.inverted.menu .item, - .ui.inverted.menu .item > a:not(.ui) { - background: @invertedItemBackground; - color: @invertedItemTextColor; - } - .ui.inverted.menu .item.menu { - background: @invertedSubMenuBackground; - } - - /*--- Border ---*/ - .ui.inverted.menu .item:before { - background: @invertedDividerBackground; - } - & when (@variationMenuVertical) { - .ui.vertical.inverted.menu .item:before { - background: @invertedVerticalDividerBackground; - } - /* Sub Menu */ - .ui.vertical.inverted.menu .menu .item, - .ui.vertical.inverted.menu .menu .item a:not(.ui) { - color: @invertedSubMenuColor; - } - } - /* Header */ - .ui.inverted.menu .header.item { - margin: 0; - background: @invertedHeaderBackground; - box-shadow: none; - } - - /* Disabled */ - .ui.ui.inverted.menu .item.disabled { - color: @invertedDisabledTextColor; - } - - /*--- Hover ---*/ - .ui.link.inverted.menu .item:hover, - .ui.inverted.menu .dropdown.item:hover, - .ui.inverted.menu .link.item:hover, - .ui.inverted.menu a.item:hover { - background: @invertedHoverBackground; - color: @invertedHoverColor; - } - & when (@variationMenuVertical) { - .ui.vertical.inverted.menu .item .menu a.item:hover, - .ui.vertical.inverted.menu .item .menu .link.item:hover { - background: @invertedSubMenuBackground; - color: @invertedSubMenuHoverColor; - } - } - /*--- Pressed ---*/ - .ui.inverted.menu a.item:active, - .ui.inverted.menu .link.item:active{ - background: @invertedMenuPressedBackground; - color: @invertedMenuPressedColor; - } - - /*--- Active ---*/ - .ui.inverted.menu .active.item { - background: @invertedActiveBackground; - color: @invertedActiveColor !important; - } - & when (@variationMenuVertical) { - .ui.inverted.vertical.menu .item .menu .active.item { - background: @invertedSubMenuActiveBackground; - color: @invertedSubMenuActiveColor; - } - } - & when (@variationMenuPointing) { - .ui.inverted.pointing.menu .active.item:after { - background: @invertedArrowActiveColor; - margin: 0 !important; - box-shadow: none !important; - border: none !important; - } - } - - /*--- Active Hover ---*/ - .ui.inverted.menu .active.item:hover { - background: @invertedActiveHoverBackground; - color: @invertedActiveHoverColor !important; - } - & when (@variationMenuPointing) { - .ui.inverted.pointing.menu .active.item:hover:after { - background: @invertedArrowActiveHoverColor; - } - } -} - -& when (@variationMenuFloated) { - /*-------------- - Floated - ---------------*/ - - .ui.floated.menu { - float: left; - margin: 0 @floatedDistance 0 0; - } - .ui.floated.menu .item:last-child:before { - display: none; - } - - .ui.right.floated.menu { - float: right; - margin: 0 0 0 @floatedDistance; - } -} - -& when (@variationMenuInverted) { - /*-------------- - Inverted - ---------------*/ - - each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @h: @colors[@@color][hover]; - - & when not (@color=secondary) { - .ui.ui.ui.inverted.menu .@{color}.active.item, - .ui.ui.inverted.@{color}.menu { - background-color: @c; - } - .ui.inverted.@{color}.menu .item:before { - background-color: @invertedColoredDividerBackground; - } - .ui.ui.inverted.@{color}.menu .active.item { - background-color: @invertedColoredActiveBackground; - } - & when (@variationMenuPointing) { - .ui.inverted.pointing.@{color}.menu .active.item { - background-color: @h; - } - } - } - }) - - & when (@variationMenuPointing) { - .ui.ui.ui.inverted.pointing.menu .active.item:after { - background-color: inherit; - } - } -} - -& when (@variationMenuFitted) { - /*-------------- - Fitted - ---------------*/ - - .ui.fitted.menu .item, - .ui.fitted.menu .item .menu .item, - .ui.menu .fitted.item { - padding: 0; - } - .ui.horizontally.fitted.menu .item, - .ui.horizontally.fitted.menu .item .menu .item, - .ui.menu .horizontally.fitted.item { - padding-top: @itemVerticalPadding; - padding-bottom: @itemVerticalPadding; - } - .ui.vertically.fitted.menu .item, - .ui.vertically.fitted.menu .item .menu .item, - .ui.menu .vertically.fitted.item { - padding-left: @itemHorizontalPadding; - padding-right: @itemHorizontalPadding; - } -} - -& when (@variationMenuBorderless) { - /*-------------- - Borderless - ---------------*/ - - .ui.borderless.menu .item:before, - .ui.borderless.menu .item .menu .item:before, - .ui.menu .borderless.item:before { - background: none !important; - } -} - -& when (@variationMenuCompact) { - /*------------------- - Compact - --------------------*/ - - .ui.compact.menu { - display: inline-flex; - margin: 0; - vertical-align: middle; - } - & when (@variationMenuVertical) { - .ui.compact.vertical.menu { - /* IE hack to make dropdown icons appear inline */ - display: -ms-inline-flexbox !important; - display: inline-block; - } - } - .ui.compact.menu:not(.secondary) .item:last-child { - border-radius: 0 @borderRadius @borderRadius 0; - } - .ui.compact.menu .item:last-child:before { - display: none; - } - & when (@variationMenuVertical) { - .ui.compact.vertical.menu { - width: auto !important; - } - .ui.compact.vertical.menu .item:last-child::before { - display: block; - } - } -} - -& when (@variationMenuFluid) { - /*------------------- - Fluid - --------------------*/ - - .ui.menu.fluid, - .ui.vertical.menu.fluid { - width: 100% !important; - } -} - - -/*------------------- - Evenly Sized ---------------------*/ - -.ui.item.menu, -.ui.item.menu .item { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; - text-align: center; - justify-content: center; -} -.ui.attached.item.menu:not(.tabular) { - margin: 0 @attachedHorizontalOffset !important; -} - -.ui.item.menu .item:last-child:before { - 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 (@variationMenuFixed) { - /*-------------- - Fixed - ---------------*/ - - .ui.menu.fixed { - position: fixed; - z-index: 101; - margin: 0; - width: 100%; - } - .ui.menu.fixed, - .ui.menu.fixed .item:first-child, - .ui.menu.fixed .item:last-child { - border-radius: 0 !important; - } - - .ui.fixed.menu, - .ui[class*="top fixed"].menu { - top: 0; - left: 0; - right: auto; - bottom: auto; - } - .ui[class*="top fixed"].menu { - border-top: none; - border-left: none; - border-right: none; - } - .ui[class*="right fixed"].menu { - border-top: none; - border-bottom: none; - border-right: none; - top: 0; - right: 0; - left: auto; - bottom: auto; - width: auto; - height: 100%; - } - .ui[class*="bottom fixed"].menu { - border-bottom: none; - border-left: none; - border-right: none; - bottom: 0; - left: 0; - top: auto; - right: auto; - } - .ui[class*="left fixed"].menu { - border-top: none; - border-bottom: none; - border-left: none; - top: 0; - left: 0; - right: auto; - bottom: auto; - width: auto; - height: 100%; - } - - /* Coupling with Grid */ - .ui.fixed.menu + .ui.grid { - padding-top: @fixedPrecedingGridMargin; - } -} - -& when (@variationMenuPointing) { - /*------------------- - Pointing - --------------------*/ - - .ui.pointing.menu .item:after { - visibility: hidden; - position: absolute; - content: ''; - top: 100%; - left: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - background: none; - - margin: (@arrowBorderWidth / 2) 0 0; - width: @arrowSize; - height: @arrowSize; - - border: none; - border-bottom: @arrowBorder; - border-right: @arrowBorder; - - z-index: @arrowZIndex; - transition: @arrowTransition; - } - & when (@variationMenuVertical) { - .ui.vertical.pointing.menu .item:after { - position: absolute; - top: 50%; - right: 0; - bottom: auto; - left: auto; - - transform: translateX(50%) translateY(-50%) rotate(45deg); - margin: 0 -(@arrowBorderWidth / 2) 0 0; - - border: none; - border-top: @arrowBorder; - border-right: @arrowBorder; - } - } - .ui.pointing.menu .ui.dropdown .menu .item:after, - .ui.vertical.pointing.menu .ui.dropdown .menu .item:after { - display: none; - } - - /* Active */ - .ui.pointing.menu .active.item:after { - visibility: visible; - } - .ui.pointing.menu .active.dropdown.item:after { - visibility: hidden; - } - - /* Don't double up pointers */ - .ui.pointing.menu .dropdown.active.item:after, - .ui.pointing.menu .active.item .menu .active.item:after { - display: none; - } - - /* Colors */ - .ui.pointing.menu .active.item:hover:after { - background-color: @arrowHoverColor; - } - .ui.pointing.menu .active.item:after { - background-color: @arrowActiveColor; - } - .ui.pointing.menu .active.item:hover:after { - background-color: @arrowActiveHoverColor; - } - & when (@variationMenuVertical) { - .ui.vertical.pointing.menu .active.item:hover:after { - background-color: @arrowVerticalHoverColor; - } - .ui.vertical.pointing.menu .active.item:after { - background-color: @arrowVerticalActiveColor; - } - .ui.vertical.pointing.menu .menu .active.item:after { - background-color: @arrowVerticalSubMenuColor; - } - } -} - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - - .ui.inverted.pointing.menu .@{color}.active.item:after { - background-color: @c; - } -}) - -& when (@variationMenuAttached) { - /*-------------- - Attached - ---------------*/ - - /* Middle */ - .ui.attached.menu { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 @attachedHorizontalOffset; - width: @attachedWidth; - max-width: @attachedWidth; - box-shadow: @attachedBoxShadow; - } - .ui.attached + .ui.attached.menu:not(.top) { - border-top: none; - } - - /* Top */ - .ui[class*="top attached"].menu { - bottom: 0; - margin-bottom: 0; - top: @attachedTopOffset; - margin-top: @verticalMargin; - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.menu[class*="top attached"]:first-child { - margin-top: 0; - } - - /* Bottom */ - .ui[class*="bottom attached"].menu { - bottom: 0; - margin-top: 0; - top: @attachedBottomOffset; - margin-bottom: @verticalMargin; - box-shadow: @attachedBottomBoxShadow; - border-radius: 0 0 @borderRadius @borderRadius; - } - .ui[class*="bottom attached"].menu:last-child { - margin-bottom: 0; - } - - /* Attached Menu Item */ - .ui.top.attached.menu > .item:first-child { - border-radius: @borderRadius 0 0 0; - } - .ui.bottom.attached.menu > .item:first-child { - border-radius: 0 0 0 @borderRadius; - } - - /* Tabular Attached */ - .ui.attached.menu:not(.tabular) { - border: @attachedBorder; - } - & when (@variationMenuInverted) { - .ui.attached.inverted.menu { - border: none; - } - } - & when (@variationMenuTabular) { - .ui.attached.tabular.menu { - margin-left: 0; - margin-right: 0; - width: 100%; - } - } -} - -/*-------------- - Sizes ----------------*/ - -.ui.menu { - font-size: @medium; -} -.ui.vertical.menu { - width: @mediumWidth; -} -& when not (@variationMenuSizes = false) { - each(@variationMenuSizes, { - @w: @{value}Width; - @s: @@value; - .ui.@{value}.menu, - .ui.@{value}.menu .dropdown, - .ui.@{value}.menu .dropdown .menu > .item { - font-size: @s; - } - .ui.@{value}.vertical.menu:not(.icon) { - width: @@w; - } - }) -} - -/*------------------- - Inverted dropdowns ---------------------*/ -.ui.menu .ui.inverted.inverted.dropdown.item .menu { - background: @invertedDropdownBackground; - box-shadow: @invertedDropdownMenuBoxShadow; -} - -.ui.menu .ui.inverted.dropdown .menu > .item { - color: @invertedDropdownItemColor !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .active.item { - background: @invertedDropdownActiveItemBackground !important; - color: @invertedDropdownActiveItemColor !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .item:hover { - background: @invertedDropdownHoveredItemBackground !important; - color: @invertedDropdownHoveredItemColor !important; -} - -.ui.menu .ui.inverted.dropdown .menu > .selected.item { - background: @invertedDropdownSelectedItemBackground !important; - color: @invertedDropdownSelectedItemColor !important; -} - -& when (@variationMenuVertical) { - /* Vertical */ - .ui.vertical.menu .inverted.dropdown.item .menu { - box-shadow: @invertedDropdownMenuBoxShadow; - } -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/message.less b/semantic/src/definitions/collections/message.less deleted file mode 100644 index e237277..0000000 --- a/semantic/src/definitions/collections/message.less +++ /dev/null @@ -1,414 +0,0 @@ -/*! - * # Fomantic-UI - Message - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'message'; - -@import (multiple) '../../theme.config'; - -/******************************* - Message -*******************************/ - -.ui.message { - position: relative; - min-height: 1em; - margin: @verticalMargin 0; - background: @background; - padding: @padding; - line-height: @lineHeight; - color: @textColor; - transition: @transition; - border-radius: @borderRadius; - box-shadow: @boxShadow; -} - -.ui.message:first-child { - margin-top: 0; -} -.ui.message:last-child { - margin-bottom: 0; -} - - -/*-------------- - Content ----------------*/ - -/* Header */ -.ui.message .header { - display: @headerDisplay; - font-family: @headerFont; - font-weight: @headerFontWeight; - margin: @headerMargin; -} - -/* Default font size */ -.ui.message .header:not(.ui) { - font-size: @headerFontSize; -} - -/* Paragraph */ -.ui.message p { - opacity: @messageTextOpacity; - margin: @messageParagraphMargin 0; -} -.ui.message p:first-child { - margin-top: 0; -} -.ui.message p:last-child { - margin-bottom: 0; -} -.ui.message .header + p { - margin-top: @headerParagraphDistance; -} - -/* List */ -.ui.message .list:not(.ui) { - text-align: left; - padding: 0; - opacity: @listOpacity; - list-style-position: @listStylePosition; - margin: @listMargin 0 0; -} -.ui.message .list:not(.ui):first-child { - margin-top: 0; -} -.ui.message .list:not(.ui):last-child { - margin-bottom: 0; -} -.ui.message .list:not(.ui) li { - position: relative; - list-style-type: none; - margin: 0 0 @listItemMargin @listItemIndent; - padding: 0; -} -.ui.message .list:not(.ui) li:before { - position: absolute; - content: '•'; - left: -1em; - height: 100%; - vertical-align: baseline; -} -.ui.message .list:not(.ui) li:last-child { - margin-bottom: 0; -} - - -/* Icon */ -.ui.message > i.icon { - margin-right: @iconDistance; -} - -/* Close Icon */ -.ui.message > .close.icon { - cursor: pointer; - position: absolute; - margin: 0; - top: @closeTopDistance; - right: @closeRightDistance; - opacity: @closeOpacity; - transition: @closeTransition; -} -.ui.message > .close.icon:hover { - opacity: 1; -} - -/* First / Last Element */ -.ui.message > :first-child { - margin-top: 0; -} -.ui.message > :last-child { - margin-bottom: 0; -} - -/******************************* - Coupling -*******************************/ - -.ui.dropdown .menu > .message { - margin: 0 -@borderWidth; -} - -/******************************* - States -*******************************/ - -/*-------------- - Visible ----------------*/ - -.ui.visible.visible.visible.visible.message { - display: block; -} - -.ui.icon.visible.visible.visible.visible.message { - display: flex; -} - -/*-------------- - Hidden ----------------*/ - -.ui.hidden.hidden.hidden.hidden.message { - display: none; -} - - -/******************************* - Variations -*******************************/ - -& when (@variationMessageCompact) { - /*-------------- - Compact - ---------------*/ - - .ui.compact.message { - display: inline-block; - } - .ui.compact.icon.message { - display: inline-flex; - width: auto; - } -} - -& when (@variationMessageAttached) { - /*-------------- - Attached - ---------------*/ - - .ui.attached.message { - margin-bottom: @attachedYOffset; - border-radius: @borderRadius @borderRadius 0 0; - box-shadow: @attachedBoxShadow; - margin-left: @attachedXOffset; - margin-right: @attachedXOffset; - } - .ui.attached + .ui.attached.message:not(.top):not(.bottom) { - margin-top: @attachedYOffset; - border-radius: 0; - } - .ui.bottom.attached.message { - margin-top: @attachedYOffset; - border-radius: 0 0 @borderRadius @borderRadius; - box-shadow: @attachedBottomBoxShadow; - } - .ui.bottom.attached.message:not(:last-child) { - margin-bottom: @verticalMargin; - } - & when (@variationMessageIcon) { - .ui.attached.icon.message { - width: auto; - } - } -} - -& when (@variationMessageIcon) { - /*-------------- - Icon - ---------------*/ - - .ui.icon.message { - display: flex; - width: 100%; - align-items: center; - } - .ui.icon.message > i.icon:not(.close) { - display: block; - flex: 0 0 auto; - width: auto; - line-height: 1; - vertical-align: @iconVerticalAlign; - font-size: @iconSize; - opacity: @iconOpacity; - } - .ui.icon.message > .content { - display: block; - flex: 1 1 auto; - vertical-align: @iconVerticalAlign; - } - - - .ui.icon.message > i.icon:not(.close) + .content { - padding-left: @iconContentDistance; - } - .ui.icon.message > i.circular.icon { - width: 1em; - } -} - -& when (@variationMessageFloating) { - /*-------------- - Floating - ---------------*/ - - .ui.floating.message { - box-shadow: @floatingBoxShadow; - } -} - - -/*-------------- - Colors ----------------*/ - -/*-------------- - Types ----------------*/ -& when (@variationMessageConsequences) { - - @consequences: { - @positive: { - background : @positiveBackgroundColor; - header : @positiveHeaderColor; - boxShadow : @positiveBoxShadow; - boxFloatShadow : @positiveBoxFloatingShadow; - text : @positiveTextColor; - }; - @negative: { - background : @negativeBackgroundColor; - header : @negativeHeaderColor; - boxShadow : @negativeBoxShadow; - boxFloatShadow : @negativeBoxFloatingShadow; - text : @negativeTextColor; - }; - @info: { - background : @infoBackgroundColor; - header : @infoHeaderColor; - boxShadow : @infoBoxShadow; - boxFloatShadow : @infoBoxFloatingShadow; - text : @infoTextColor; - }; - @warning: { - background : @warningBackgroundColor; - header : @warningHeaderColor; - boxShadow : @warningBoxShadow; - boxFloatShadow : @warningBoxFloatingShadow; - text : @warningTextColor; - }; - @error: { - background : @errorBackgroundColor; - header : @errorHeaderColor; - boxShadow : @errorBoxShadow; - boxFloatShadow : @errorBoxFloatingShadow; - text : @errorTextColor; - }; - @success: { - background : @successBackgroundColor; - header : @successHeaderColor; - boxShadow : @successBoxShadow; - boxFloatShadow : @successBoxFloatingShadow; - text : @successTextColor; - }; - } - - /* Colors */ - - each(@consequences, { - @color: replace(@key, '@', ''); - @bg: @consequences[@@color][background]; - @hd: @consequences[@@color][header]; - @bs: @consequences[@@color][boxShadow]; - @bfs: @consequences[@@color][boxFloatShadow]; - @t: @consequences[@@color][text]; - - .ui.@{color}.message { - background-color: @bg; - color: @t; - } - - .ui.@{color}.message, - .ui.attached.@{color}.message { - box-shadow: @bs; - } - & when (@variationMessageFloating) { - .ui.floating.@{color}.message { - box-shadow: @bfs; - } - } - .ui.@{color}.message .header { - color: @hd; - } - }) -} - -each(@colors, { - @color: replace(@key, '@', ''); - @bg: @colors[@@color][background]; - @hd: @colors[@@color][header]; - @bs: @colors[@@color][boxShadow]; - @bfs: @colors[@@color][boxFloatShadow]; - @t: @colors[@@color][text]; - @isVeryDark: @colors[@@color][isVeryDark]; - - .ui.@{color}.message { - & when not (@isVeryDark) { - background-color: @bg; - color: @t; - } - & when (@isVeryDark) { - background-color: @black; - color: @invertedTextColor; - } - } - - .ui.@{color}.message, - .ui.attached.@{color}.message { - & when not (@isVeryDark) { - box-shadow: @bs; - } - } - & when (@variationMessageFloating) { - .ui.floating.@{color}.message { - & when not (@isVeryDark) { - box-shadow: @bfs; - } - } - } - - .ui.@{color}.message .header { - & when not (@isVeryDark) { - color: @hd; - } - & when (@isVeryDark) { - color: @invertedTextColor; - } - } -}) - -& when (@variationMessageInverted) { - .ui.inverted.message { - background-color: @black; - color: @invertedTextColor; - } -} - -/*-------------- - Sizes ----------------*/ - -.ui.message { - font-size: @relativeMedium; -} -& when not (@variationMessageSizes = false) { - each(@variationMessageSizes, { - @s: @{value}MessageSize; - .ui.@{value}.message { - font-size: @@s; - } - }) -} - -.loadUIOverrides(); diff --git a/semantic/src/definitions/collections/table.less b/semantic/src/definitions/collections/table.less deleted file mode 100644 index f185282..0000000 --- a/semantic/src/definitions/collections/table.less +++ /dev/null @@ -1,1322 +0,0 @@ -/*! - * # Fomantic-UI - Table - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - -/******************************* - Theme -*******************************/ - -@type : 'collection'; -@element : 'table'; - -@import (multiple) '../../theme.config'; - -/******************************* - Table -*******************************/ - -/* Prototype */ -.ui.table { - width: 100%; - background: @background; - margin: @margin; - border: @border; - box-shadow: @boxShadow; - border-radius: @borderRadius; - text-align: @textAlign; - vertical-align: @verticalAlign; - color: @color; - border-collapse: @borderCollapse; - border-spacing: @borderSpacing; -} - -.ui.table:first-child { - margin-top: 0; -} -.ui.table:last-child { - margin-bottom: 0; -} -.ui.table > thead, -.ui.table > tbody { - text-align: inherit; - vertical-align: inherit; -} - -/******************************* - Parts -*******************************/ - -/* Table Content */ -.ui.table th, -.ui.table td { - transition: @transition; -} - -/* Rowspan helper class */ -.ui.table th.rowspanned, -.ui.table td.rowspanned { - display:none; -} - -/* Headers */ -.ui.table > thead { - box-shadow: @headerBoxShadow; -} -.ui.table > thead > tr > th { - cursor: auto; - background: @headerBackground; - text-align: @headerAlign; - color: @headerColor; - padding: @headerVerticalPadding @headerHorizontalPadding; - vertical-align: @headerVerticalAlign; - font-style: @headerFontStyle; - font-weight: @headerFontWeight; - text-transform: @headerTextTransform; - border-bottom: @headerBorder; - border-left: @headerDivider; -} - -.ui.table > thead > tr > th:first-child { - border-left: none; -} - -.ui.table > thead > tr:first-child > th:first-child { - border-radius: @borderRadius 0 0 0; -} -.ui.table > thead > tr:first-child > th:last-child { - border-radius: 0 @borderRadius 0 0; -} -.ui.table > thead > tr:first-child > th:only-child { - border-radius: @borderRadius @borderRadius 0 0; -} - -/* Footer */ -.ui.table > tfoot { - box-shadow: @footerBoxShadow; -} -.ui.table > tfoot > tr > th, -.ui.table > tfoot > tr > td { - cursor: auto; - border-top: @footerBorder; - background: @footerBackground; - text-align: @footerAlign; - color: @footerColor; - padding: @footerVerticalPadding @footerHorizontalPadding; - vertical-align: @footerVerticalAlign; - font-style: @footerFontStyle; - font-weight: @footerFontWeight; - text-transform: @footerTextTransform; -} -.ui.table > tfoot > tr > th:first-child, -.ui.table > tfoot > tr > td:first-child { - border-left: none; -} -.ui.table > tfoot > tr:first-child > th:first-child, -.ui.table > tfoot > tr:first-child > td:first-child { - border-radius: 0 0 0 @borderRadius; -} -.ui.table > tfoot > tr:first-child > th:last-child, -.ui.table > tfoot > tr:first-child > td:last-child { - border-radius: 0 0 @borderRadius 0; -} -.ui.table > tfoot > tr:first-child > th:only-child, -.ui.table > tfoot > tr:first-child > td:only-child { - border-radius: 0 0 @borderRadius @borderRadius; -} - -/* Table Row */ -.ui.table > tr > td, -.ui.table > tbody > tr > td { - border-top: @rowBorder; -} -.ui.table > tr:first-child > td, -.ui.table > tbody > tr:first-child > td { - border-top: none; -} - -/* Repeated tbody */ -.ui.table > tbody + tbody tr:first-child > td { - border-top: @rowBorder; -} - -/* Table Cells */ -.ui.table > tbody > tr > td, -.ui.table > tr > td { - padding: @cellVerticalPadding @cellHorizontalPadding; - text-align: @cellTextAlign; -} - -/* Icons */ -.ui.table > i.icon { - vertical-align: @iconVerticalAlign; -} -.ui.table > i.icon:only-child { - margin: 0; -} - -/* Table Segment */ -.ui.table.segment { - padding: 0; -} -.ui.table.segment:after { - display: none; -} -.ui.table.segment.stacked:after { - display: block; -} - - -/* Responsive */ -@media only screen and (max-width : @largestMobileScreen) { - .ui.table:not(.unstackable) { - width: 100%; - padding: 0; - } - .ui.table:not(.unstackable) > thead, - .ui.table:not(.unstackable) > thead > tr, - .ui.table:not(.unstackable) > tfoot, - .ui.table:not(.unstackable) > tfoot > tr, - .ui.table:not(.unstackable) > tbody, - .ui.table:not(.unstackable) > tr, - .ui.table:not(.unstackable) > tbody > tr, - .ui.table:not(.unstackable) > tr > th:not(.rowspanned), - .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned), - .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned), - .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned), - .ui.table:not(.unstackable) > tr > td:not(.rowspanned), - .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned), - .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) { - display: block !important; - width: auto !important; - } - - .ui.table:not(.unstackable) > thead { - display: @responsiveHeaderDisplay; - } - .ui.table:not(.unstackable) > tfoot { - display: @responsiveFooterDisplay; - } - .ui.ui.ui.ui.table:not(.unstackable) > tr, - .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, - .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr, - .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr { - padding-top: @responsiveRowVerticalPadding; - padding-bottom: @responsiveRowVerticalPadding; - box-shadow: @responsiveRowBoxShadow; - } - - .ui.ui.ui.ui.table:not(.unstackable) > tr > th, - .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, - .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, - .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th, - .ui.ui.ui.ui.table:not(.unstackable) > tr > td, - .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td, - .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td { - background: none; - border: none; - padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; - box-shadow: @responsiveCellBoxShadow; - } - .ui.table:not(.unstackable) > tr > th:first-child, - .ui.table:not(.unstackable) > thead > tr > th:first-child, - .ui.table:not(.unstackable) > tbody > tr > th:first-child, - .ui.table:not(.unstackable) > tfoot > tr > th:first-child, - .ui.table:not(.unstackable) > tr > td:first-child, - .ui.table:not(.unstackable) > tbody > tr > td:first-child, - .ui.table:not(.unstackable) > tfoot > tr > td:first-child { - font-weight: @responsiveCellHeaderFontWeight; - } - - /* Definition Table */ - .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { - box-shadow: none !important; - } - & when (@variationTableMarked) { - each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - .ui.ui.ui.ui.table:not(.unstackable) tr.marked.@{color} { - &.left { - box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset; - } - &.right { - box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset; - } - } - & when (@variationTableInverted) { - .ui.ui.ui.ui.inverted.table:not(.unstackable) tr.marked.@{color} { - &.left { - box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; - } - &.right { - box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; - } - } - } - }) - } -} - - -/******************************* - Coupling -*******************************/ - -/* UI Image */ -.ui.table .collapsing .image, -.ui.table .collapsing .image img { - max-width: none; -} - - -/******************************* - Types -*******************************/ - -/*-------------- - Complex ----------------*/ -& when (@variationTableStructured) { - .ui.structured.table { - border-collapse: collapse; - } - .ui.structured.table > thead > tr > th { - border-left: @headerDivider; - border-right: @headerDivider; - } - & when (@variationTableSortable) { - .ui.structured.sortable.table > thead > tr > th { - border-left: @sortableBorder; - border-right: @sortableBorder; - } - } - & when (@variationTableBasic) { - .ui.structured.basic.table > tr > th, - .ui.structured.basic.table > thead > tr > th, - .ui.structured.basic.table > tbody > tr > th, - .ui.structured.basic.table > tfoot > tr > th { - border-left: @basicTableHeaderDivider; - border-right: @basicTableHeaderDivider; - } - } - & when (@variationTableCelled) { - .ui.structured.celled.table > tr > th, - .ui.structured.celled.table > thead > tr > th, - .ui.structured.celled.table > tbody > tr > th, - .ui.structured.celled.table > tfoot > tr > th, - .ui.structured.celled.table > tr > td, - .ui.structured.celled.table > tbody > tr > td , - .ui.structured.celled.table > tfoot > tr > td { border-left: @cellBorder; - border-right: @cellBorder; - } - } -} - -& when (@variationTableDefinition) { - /*-------------- - Definition - ---------------*/ - - .ui.definition.table > thead:not(.full-width) > tr > th:first-child { - pointer-events: none; - background: @definitionHeaderBackground; - font-weight: @definitionHeaderFontWeight; - color: @definitionHeaderColor; - box-shadow: -@coloredBorderSizeCover -@coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; - -moz-transform: scale(1); - } - - .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child { - pointer-events: none; - background: @definitionFooterBackground; - font-weight: @definitionFooterFontWeight; - color: @definitionFooterColor; - box-shadow: -@coloredBorderSizeCover @coloredBorderSize 0 @coloredBorderSizeCover @definitionPageBackground; - -moz-transform: scale(1); - } - - /* Highlight Defining Column */ - .ui.definition.table > tr > td:first-child:not(.ignored), - .ui.definition.table > tbody > tr > td:first-child:not(.ignored), - .ui.definition.table > tfoot > tr > td:first-child:not(.ignored), - .ui.definition.table tr td.definition { - background: @definitionColumnBackground; - font-weight: @definitionColumnFontWeight; - color: @definitionColumnColor; - text-transform: @definitionColumnTextTransform; - box-shadow: @definitionColumnBoxShadow; - text-align: @definitionColumnTextAlign; - font-size: @definitionColumnFontSize; - padding-left: @definitionColumnHorizontalPadding; - padding-right: @definitionColumnHorizontalPadding; - } - - - /* Fix 2nd Column */ - .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) { - border-left: @borderWidth solid @borderColor; - } - .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2) , - .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { border-left: @borderWidth solid @borderColor; - } - .ui.definition.table > tr > td:nth-child(2), - .ui.definition.table > tbody > tr > td:nth-child(2) { - border-left: @borderWidth solid @borderColor; - } -} - -/******************************* - States -*******************************/ - -& when (@variationTablePositive) { - /*-------------- - Positive - ---------------*/ - - .ui.ui.ui.ui.table tr.positive, - .ui.ui.table td.positive { - box-shadow: @positiveBoxShadow; - background: @positiveBackgroundColor; - color: @positiveColor; - } -} - -& when (@variationTableNegative) { - /*-------------- - Negative - ---------------*/ - - .ui.ui.ui.ui.table tr.negative, - .ui.ui.table td.negative { - box-shadow: @negativeBoxShadow; - background: @negativeBackgroundColor; - color: @negativeColor; - } -} - -& when (@variationTableError) { - /*-------------- - Error - ---------------*/ - - .ui.ui.ui.ui.table tr.error, - .ui.ui.table td.error { - box-shadow: @errorBoxShadow; - background: @errorBackgroundColor; - color: @errorColor; - } -} - -& when (@variationTableWarning) { - /*-------------- - Warning - ---------------*/ - - .ui.ui.ui.ui.table tr.warning, - .ui.ui.table td.warning { - box-shadow: @warningBoxShadow; - background: @warningBackgroundColor; - color: @warningColor; - } -} - -& when (@variationTableActive) { - /*-------------- - Active - ---------------*/ - - .ui.ui.ui.ui.table tr.active, - .ui.ui.table td.active { - box-shadow: @activeBoxShadow; - background: @activeBackgroundColor; - color: @activeColor; - } -} - - -& when (@variationTableDisabled) { - /*-------------- - Disabled - ---------------*/ - - .ui.table tr.disabled td, - .ui.table tr td.disabled, - .ui.table tr.disabled:hover, - .ui.table tr:hover td.disabled { - pointer-events: none; - color: @disabledTextColor; - } -} - -/******************************* - Variations -*******************************/ -& when (@variationTableStackable) { - /*-------------- - Stackable - ---------------*/ - - @media only screen and (max-width : @largestTabletScreen) { - - .ui[class*="tablet stackable"].table, - .ui[class*="tablet stackable"].table > thead, - .ui[class*="tablet stackable"].table > thead > tr, - .ui[class*="tablet stackable"].table > tfoot, - .ui[class*="tablet stackable"].table > tfoot > tr, - .ui[class*="tablet stackable"].table > tbody, - .ui[class*="tablet stackable"].table > tbody > tr, - .ui[class*="tablet stackable"].table > tr, - .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned), - .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned), - .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned), - .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned), - .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned), - .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned), - .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) { - display: block !important; - width: 100% !important; - } - - .ui[class*="tablet stackable"].table { - padding: 0; - } - .ui[class*="tablet stackable"].table > thead { - display: @responsiveHeaderDisplay; - } - .ui[class*="tablet stackable"].table > tfoot { - display: @responsiveFooterDisplay; - } - .ui.ui.ui.ui[class*="tablet stackable"].table > thead > tr, - .ui.ui.ui.ui[class*="tablet stackable"].table > tbody > tr, - .ui.ui.ui.ui[class*="tablet stackable"].table > tfoot > tr, - .ui.ui.ui.ui[class*="tablet stackable"].table > tr { - padding-top: @responsiveRowVerticalPadding; - padding-bottom: @responsiveRowVerticalPadding; - box-shadow: @responsiveRowBoxShadow; - } - .ui[class*="tablet stackable"].table > thead > tr > th, - .ui[class*="tablet stackable"].table > tbody > tr > th, - .ui[class*="tablet stackable"].table > tfoot > tr > th, - .ui[class*="tablet stackable"].table > tr > th, - .ui[class*="tablet stackable"].table > tbody > tr > td, - .ui[class*="tablet stackable"].table > tfoot > tr > td, - .ui[class*="tablet stackable"].table > tr > td { - background: none; - border: none !important; - padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; - box-shadow: @responsiveCellBoxShadow; - } - & when (@variationTableDefinition) { - /* Definition Table */ - .ui.definition[class*="tablet stackable"].table > thead > tr > th:first-child { - box-shadow: none !important; - } - } - } - & when (@variationTableMarked) { - each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @l: @colors[@@color][light]; - .ui.ui.ui.ui[class*="tablet stackable"].table tr.marked.@{color} { - &.left { - box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset; - } - &.right { - box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @c inset; - } - } - & when (@variationTableInverted) { - .ui.ui.ui.ui[class*="tablet stackable"].inverted.table tr.marked.@{color} { - &.left { - box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset; - } - &.right { - box-shadow: @responsiveRowBoxShadow, -@coloredBorderSize 0 0 0 @l inset; - } - } - } - }) - } -} - -& when (@variationTableAligned) { - /*-------------- - Text Alignment - ---------------*/ - - .ui.table[class*="left aligned"], - .ui.table [class*="left aligned"] { - text-align: left; - } - .ui.table[class*="center aligned"], - .ui.table [class*="center aligned"] { - text-align: center; - } - .ui.table[class*="right aligned"], - .ui.table [class*="right aligned"] { - text-align: right; - } - - /*------------------ - Vertical Alignment - ------------------*/ - - .ui.table[class*="top aligned"], - .ui.table [class*="top aligned"] { - vertical-align: top; - } - .ui.table[class*="middle aligned"], - .ui.table [class*="middle aligned"] { - vertical-align: middle; - } - .ui.table[class*="bottom aligned"], - .ui.table [class*="bottom aligned"] { - vertical-align: bottom; - } -} - -& when (@variationTableCollapsing) { - /*-------------- - Collapsing - ---------------*/ - - .ui.table th.collapsing, - .ui.table td.collapsing { - width: 1px; - white-space: nowrap; - } -} - -& when (@variationTableFixed) { - /*-------------- - Fixed - ---------------*/ - - .ui.fixed.table { - table-layout: fixed; - } - - .ui.fixed.table th, - .ui.fixed.table td { - overflow: hidden; - text-overflow: ellipsis; - } -} - - -& when (@variationTableSelectable) { - /*-------------- - Selectable - ---------------*/ - - .ui.ui.selectable.table > tbody > tr:hover, - .ui.table tbody tr td.selectable:hover { - background: @selectableBackground; - color: @selectableTextColor; - } - & when (@variationTableInverted) { - .ui.ui.selectable.inverted.table > tbody > tr:hover, - .ui.inverted.table tbody tr td.selectable:hover { - background: @selectableInvertedBackground; - color: @selectableInvertedTextColor; - } - } - /* Selectable Cell Link */ - .ui.table tbody tr td.selectable { - padding: 0; - } - .ui.table tbody tr td.selectable > a:not(.ui) { - display: block; - color: inherit; - padding: @cellVerticalPadding @cellHorizontalPadding; - } - .ui.table > tr > td.selectable, - .ui.table > tbody > tr > td.selectable, - .ui.selectable.table > tbody > tr, - .ui.selectable.table > tr { - cursor:pointer; - } - & when (@variationTableError) { - /* Other States */ - .ui.ui.selectable.table tr.error:hover, - .ui.table tr td.selectable.error:hover, - .ui.selectable.table tr:hover td.error { - background: @errorBackgroundHover; - color: @errorColorHover; - } - } - & when (@variationTableWarning) { - .ui.ui.selectable.table tr.warning:hover, - .ui.table tr td.selectable.warning:hover, - .ui.selectable.table tr:hover td.warning { - background: @warningBackgroundHover; - color: @warningColorHover; - } - } - & when (@variationTableActive) { - .ui.ui.selectable.table tr.active:hover, - .ui.table tr td.selectable.active:hover, - .ui.selectable.table tr:hover td.active { - background: @activeBackgroundColor; - color: @activeColor; - } - } - & when (@variationTablePositive) { - .ui.ui.selectable.table tr.positive:hover, - .ui.table tr td.selectable.positive:hover, - .ui.selectable.table tr:hover td.positive { - background: @positiveBackgroundHover; - color: @positiveColorHover; - } - } - & when (@variationTableNegative) { - .ui.ui.selectable.table tr.negative:hover, - .ui.table tr td.selectable.negative:hover, - .ui.selectable.table tr:hover td.negative { - background: @negativeBackgroundHover; - color: @negativeColorHover; - } - } -} - - -& when (@variationTableAttached) { - /*------------------- - Attached - --------------------*/ - - /* Middle */ - .ui.attached.table { - top: 0; - bottom: 0; - border-radius: 0; - margin: 0 @attachedHorizontalOffset; - width: @attachedWidth; - max-width: @attachedWidth; - box-shadow: @attachedBoxShadow; - border: @attachedBorder; - } - .ui.attached + .ui.attached.table:not(.top) { - border-top: none; - } - - /* Top */ - .ui[class*="top attached"].table { - bottom: 0; - margin-bottom: 0; - top: @attachedTopOffset; - margin-top: @verticalMargin; - border-radius: @borderRadius @borderRadius 0 0; - } - .ui.table[class*="top attached"]:first-child { - margin-top: 0; - } - - /* Bottom */ - .ui[class*="bottom attached"].table { - bottom: 0; - margin-top: 0; - top: @attachedBottomOffset; - margin-bottom: @verticalMargin; - box-shadow: @attachedBottomBoxShadow; - border-radius: 0 0 @borderRadius @borderRadius; - } - .ui[class*="bottom attached"].table:last-child { - margin-bottom: 0; - } -} - -& when (@variationTableStriped) { - /*-------------- - Striped - ---------------*/ - - /* Table Striping */ - .ui.striped.table > tr:nth-child(2n), - .ui.striped.table > tbody > tr:nth-child(2n) { - background-color: @stripedBackground; - } - & when (@variationTableInverted) { - /* Stripes */ - .ui.inverted.striped.table > tr:nth-child(2n), - .ui.inverted.striped.table > tbody > tr:nth-child(2n) { - background-color: @invertedStripedBackground; - } - } - & when (@variationTableSelectable) { - /* Allow striped active hover */ - .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { - background: @activeBackgroundHover; - color: @activeColorHover; - } - } -} - -/*-------------- - Single Line ----------------*/ - -.ui.table[class*="single line"], -.ui.table [class*="single line"] { - white-space: nowrap; -} - -/*------------------- - Colors ---------------------*/ - -each(@colors, { - @color: replace(@key, '@', ''); - @c: @colors[@@color][color]; - @t: @colors[@@color][text]; - @ht: @colors[@@color][hoverText]; - @l: @colors[@@color][light]; - @lh: @colors[@@color][lightHover]; - @r: @colors[@@color][ribbon]; - @b: @colors[@@color][bright]; - @bh: @colors[@@color][brightHover]; - @isDark: @colors[@@color][isDark]; - @isVeryDark: @colors[@@color][isVeryDark]; - - .ui.@{color}.table { - border-top: @coloredBorderSize solid @c; - } - & when (@variationTableInverted) { - .ui.inverted.@{color}.table { - background-color: @c; - color: @white; - } - } - .ui.ui.ui.ui.table tr.@{color}:not(.marked), - .ui.ui.table td.@{color}:not(.marked) { - & when (@stateMarkerWidth > 0) { - box-shadow: @stateMarkerWidth 0 0 @r inset; - } - & when (@isDark) { - background: @l; - } - & when not (@isDark) { - background: @b; - } - & when (@isVeryDark) { - color: @white; - } - & when not (@isVeryDark) { - color: @t; - } - } - & when (@variationTableSelectable) { - .ui.ui.selectable.table tr.@{color}:not(.marked):hover, - .ui.table tr td.selectable.@{color}:not(.marked):hover, - .ui.selectable.table tr:hover td.@{color}:not(.marked) { - & when (@isDark) { - background: @lh; - } - & when not (@isDark) { - background: @bh; - } - & when (@isVeryDark) { - color: @white; - } - & when not (@isVeryDark) { - color: @ht; - } - } - } - & when (@variationTableMarked) { - .ui.table td.marked.@{color}, - .ui.table tr.marked.@{color} { - &.left { - box-shadow: @coloredBorderSize 0 0 0 @c inset; - } - &.right { - box-shadow: -@coloredBorderSize 0 0 0 @c inset; - } - } - & when (@variationTableInverted) { - .ui.inverted.table td.marked.@{color}, - .ui.inverted.table tr.marked.@{color} { - &.left { - box-shadow: @coloredBorderSize 0 0 0 @l inset; - } - &.right { - box-shadow: -@coloredBorderSize 0 0 0 @l inset; - } - } - } - } - -}) - -/*-------------- - 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; -} - -/* 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) { - /*-------------- - Sortable - ---------------*/ - - .ui.sortable.table > thead > tr > th { - cursor: pointer; - white-space: nowrap; - border-left: @sortableBorder; - color: @sortableColor; - } - .ui.sortable.table > thead > tr > th:first-child { - border-left: none; - } - .ui.sortable.table thead th.sorted, - .ui.sortable.table thead th.sorted:hover { - user-select: none; - } - - .ui.sortable.table > thead > tr > th:after { - display: none; - font-style: normal; - font-weight: @normal; - text-decoration: inherit; - content: ''; - height: 1em; - width: @sortableIconWidth; - opacity: @sortableIconOpacity; - margin: 0 0 0 @sortableIconDistance; - font-family: @sortableIconFont; - } - .ui.sortable.table thead th.ascending:after { - content: @sortableIconAscending; - } - .ui.sortable.table thead th.descending:after { - content: @sortableIconDescending; - } - - /* Hover */ - .ui.sortable.table th.disabled:hover { - cursor: auto; - color: @sortableDisabledColor; - } - .ui.sortable.table > thead > tr > th:hover { - color: @sortableHoverColor; - } - .ui.sortable.table:not(.basic) > thead > tr > th:hover { - background: @sortableHoverBackground; - } - - /* Sorted */ - .ui.sortable.table thead th.sorted { - color: @sortableActiveColor; - } - .ui.sortable.table:not(.basic) thead th.sorted { - background: @sortableActiveBackground; - } - .ui.sortable.table thead th.sorted:after { - display: inline-block; - } - - /* Sorted Hover */ - .ui.sortable.table thead th.sorted:hover { - color: @sortableActiveHoverColor; - } - .ui.sortable.table:not(.basic) thead th.sorted:hover { - background: @sortableActiveHoverBackground; - } - & when (@variationTableInverted) { - /* Inverted */ - .ui.inverted.sortable.table thead th.sorted { - color: @sortableInvertedActiveColor; - } - .ui.inverted.sortable.table:not(.basic) thead th.sorted { - background: @sortableInvertedActiveBackground; - } - .ui.inverted.sortable.table > thead > tr > th:hover { - color: @sortableInvertedHoverColor; - } - .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover { - background: @sortableInvertedHoverBackground; - } - .ui.inverted.sortable.table:not(.basic) > thead > tr > th { - border-left-color: @sortableInvertedBorderColor; - border-right-color: @sortableInvertedBorderColor; - } - } -} - -& when (@variationTableInverted) { - /*-------------- - Inverted - ---------------*/ - - /* Text Color */ - .ui.inverted.table { - background: @invertedBackground; - color: @invertedCellColor; - border: @invertedBorder; - } - .ui.ui.inverted.table > thead > tr > th, - .ui.ui.inverted.table > tbody > tr > th, - .ui.ui.inverted.table > tfoot > tr > th, - .ui.ui.inverted.table > tfoot > tr > td, - .ui.ui.inverted.table > tr > th { - background-color: @invertedHeaderBackground; - border-color: @invertedHeaderBorderColor; - color: @invertedHeaderColor; - } - .ui.inverted.table > tbody > tr > td, - .ui.inverted.table > tfoot > tr > td, - .ui.inverted.table > tr > td { - border-color: @invertedCellBorderColor; - } - - .ui.inverted.table tr.disabled td, - .ui.inverted.table tr td.disabled, - .ui.inverted.table tr.disabled:hover td, - .ui.inverted.table tr:hover td.disabled { - pointer-events: none; - color: @invertedDisabledTextColor; - } - .ui.inverted.table tr td.disabled:not([class="disabled"]), - .ui.inverted.table tr.disabled:not([class="disabled"]) td, - .ui.inverted.table tr.disabled td[class]:not(.disabled), - .ui.inverted.table tr:hover td.disabled:not([class="disabled"]) { - color: @disabledTextColor; - } - & when (@variationTableDefinition) { - /* Definition */ - .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child, - .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child { - background: @definitionPageBackground; - } - .ui.inverted.definition.table > tbody > tr > td:first-child - .ui.inverted.definition.table > tfoot > tr > td:first-child, - .ui.inverted.definition.table > tr > td:first-child { - background: @invertedDefinitionColumnBackground; - color: @invertedDefinitionColumnColor; - } - } -} - -& when (@variationTableCollapsing) { - /*-------------- - Collapsing - ---------------*/ - - .ui.collapsing.table { - width: auto; - } -} - -& when (@variationTableBasic) { - /*-------------- - Basic - ---------------*/ - - .ui.basic.table { - background: @basicTableBackground; - border: @basicTableBorder; - box-shadow: @basicBoxShadow; - } - .ui.basic.table > thead, - .ui.basic.table > tfoot { - box-shadow: none; - } - .ui.basic.table > thead > tr > th, - .ui.basic.table > tbody > tr > th, - .ui.basic.table > tfoot > tr > th, - .ui.basic.table > tr > th { - background: @basicTableHeaderBackground; - border-left: @basicTableHeaderDivider; - } - .ui.basic.table > tbody > tr { - border-bottom: @basicTableCellBorder; - } - .ui.basic.table > tbody > tr > td, - .ui.basic.table > tfoot > tr > td, - .ui.basic.table >tr > td { - background: @basicTableCellBackground; - } - & when (@variationTableStriped) { - .ui.basic.striped.table > tbody > tr:nth-child(2n) { - 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 (@variationTableCelled) { - /*-------------- - Celled - ---------------*/ - - .ui.celled.table > tr > th, - .ui.celled.table > thead > tr > th, - .ui.celled.table > tbody > tr > th, - .ui.celled.table > tfoot > tr > th, - .ui.celled.table > tr > td, - .ui.celled.table > tbody > tr > td , - .ui.celled.table > tfoot > tr > td { - border-left: @cellBorder; - } - & when (@variationTableInverted) { - .ui.inverted.celled.table > tbody > tr > td, - .ui.inverted.celled.table > tr > td { - border-left: @invertedCellBorder; - } - } - .ui.celled.table > tr > th:first-child, - .ui.celled.table > thead > tr > th:first-child, - .ui.celled.table > tbody > tr > th:first-child, - .ui.celled.table > tfoot > tr > th:first-child, - .ui.celled.table > tr > td:first-child, - .ui.celled.table > tbody > tr > td:first-child, - .ui.celled.table > tfoot >tr > td:first-child { - border-left: none; - } -} - -& when (@variationTablePadded) { - /*-------------- - Padded - ---------------*/ - - .ui.padded.table > tr > th, - .ui.padded.table > thead > tr > th, - .ui.padded.table > tbody > tr > th, - .ui.padded.table > tfoot > tr > th { - padding-left: @paddedHorizontalPadding; - padding-right: @paddedHorizontalPadding; - } - .ui.padded.table > tr > th, - .ui.padded.table > thead > tr > th, - .ui.padded.table > tbody > tr > th, - .ui.padded.table > tfoot > tr > th, - .ui.padded.table > tr > td, - .ui.padded.table > tbody > tr > td , - .ui.padded.table > tfoot > tr > td { - 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 (@variationTableCompact) { - /*-------------- - Compact - ---------------*/ - - .ui.compact.table > tr > th, - .ui.compact.table > thead > tr > th, - .ui.compact.table > tbody > tr > th, - .ui.compact.table > tfoot > tr > th { - padding-left: @compactHorizontalPadding; - padding-right: @compactHorizontalPadding; - } - .ui.compact.table > tr > td, - .ui.compact.table > tbody > tr > td , - .ui.compact.table > tfoot > tr > td { - 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; - } -} - -/*-------------- - Sizes ----------------*/ - -/* Standard */ -.ui.table { - font-size: @medium; -} -& when not (@variationTableSizes = false) { - each(@variationTableSizes, { - @s: @@value; - .ui.@{value}.table { - font-size: @s; - } - }) -} - - -.loadUIOverrides(); |