Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ @import "../../../base/less/mixins"; @tabs_container_background_color: default; @tabs_container_border_color: default; @tabs_container_border_width: default; @has_tabs_container_border_width: default; @tabs_container_border_radius: default; @tabs_container_padding: 12px 10px 0px 10px; @tabs_container_tabs_align: default; @tabs_container_tabs_position: top; @tabs_background_color: default; @tabs_background_hover_color: default; @tabs_title_color: default; @tabs_title_hover_color: default; @tabs_font_family: default; @tabs_font_weight: default; @tabs_font_size: 18px; @tabs_border_color: default; @tabs_border_hover_color: default; @tabs_border_width: default; @has_tabs_border_width: default; @tabs_border_hover_width: default; @has_tabs_border_hover_width: default; @tabs_border_radius: default; @tabs_padding: 16px 15px 16px 15px; @tabs_margin: 0px 5px 0px 5px; @panels_background_color: default; @panels_font_family: default; @panels_font_weight: default; @panels_font_size: 16px; @panels_font_color: default; @panels_border_width: default; @has_panels_border_width: default; @panels_border_color: default; @panels_border_radius: default; @panels_padding: 30px 30px 30px 35px; .sow-tabs { .sow-tabs-tab-container { background-color: @tabs_container_background_color; padding: @tabs_container_padding; display: flex; & when ( @tabs_container_tabs_position = top ), ( @tabs_container_tabs_position = bottom ) { flex-wrap: wrap; } & when ( @tabs_container_tabs_position = left ), ( @tabs_container_tabs_position = right ) { flex-direction: column; } & when ( @tabs_container_tabs_align = middle ), ( @tabs_container_tabs_align = center ) { justify-content: center; } & when ( @tabs_container_tabs_align = top ), ( @tabs_container_tabs_align = left ) { align-items: flex-start; } & when ( @tabs_container_tabs_align = bottom ), ( @tabs_container_tabs_align = right ) { justify-content: flex-end; } //noinspection CssOptimizeSimilarProperties & when ( @has_tabs_container_border_width = true ) { border-style: solid; border-color: @tabs_container_border_color; border-width: @tabs_container_border_width; border-radius: @tabs_container_border_radius; } .sow-tabs-tab { display: inline-block; cursor: pointer; background-color: @tabs_background_color; padding: @tabs_padding; margin: @tabs_margin; color: @tabs_title_color; font-family: @tabs_font_family; font-weight: @tabs_font_weight; font-size: @tabs_font_size; transition: all 0.3s; //noinspection CssOptimizeSimilarProperties & when ( @has_tabs_border_width = true ) { border-style: solid; border-color: @tabs_border_color; border-width: @tabs_border_width; border-radius: @tabs_border_radius; } &.sow-tabs-tab-selected, &:hover { background-color: @tabs_background_hover_color; color: @tabs_title_hover_color; //noinspection CssOptimizeSimilarProperties & when ( @has_tabs_border_hover_width = true ) { border-style: solid; border-color: @tabs_border_hover_color; border-width: @tabs_border_hover_width; border-radius: @tabs_border_radius; } } .sow-tabs-title { line-height: 1; display: flex; align-items: center; } .sow-tab-icon-image { width: auto; height: @tabs_font_size; } .sow-tabs-title-icon-left > .sow-tab-icon-image, .sow-tabs-title-icon-left > span[data-sow-icon] { margin-right: 5px; } .sow-tabs-title-icon-right > .sow-tab-icon-image, .sow-tabs-title-icon-right > span[data-sow-icon] { margin-left: 5px; } } } .sow-tabs-panel-container { position: relative; background-color: @panels_background_color; color: @panels_font_color; //noinspection CssOptimizeSimilarProperties & when( @has_panels_border_width = true ) { border-style: solid; border-width: @panels_border_width; border-color: @panels_border_color; border-radius: @panels_border_radius; } .sow-tabs-panel { padding: @panels_padding; .sow-tabs-panel-content { font-family: @panels_font_family; font-weight: @panels_font_weight; font-size: @panels_font_size; } } } & when not ( @tabs_container_tabs_position = top ) { display: flex; } & when ( @tabs_container_tabs_position = bottom ) { flex-direction: column-reverse; } & when ( @tabs_container_tabs_position = left ), ( @tabs_container_tabs_position = right ) { & when ( @tabs_container_tabs_position = right ) { flex-direction: row-reverse; } .sow-tabs-panel-container { flex: 1; } .sow-tabs-tab { display: block !important; } } }