Skip to content

Commit

Permalink
ClayCSS: (Fixes liferay#1105, Fixes liferay#1147) Subnav Tbar Primary…
Browse files Browse the repository at this point in the history 
… should support labels, break to new line, have disabled state, and `.component-link` color should have more contrast

ClayCSS: (liferay#1105) Mixin `clay-label-size` added options to configure `margin-bottom`, `margin-left`, `margin-right`, `margin-top`

ClayCSS: (liferay#1105) Mixin `clay-tbar-variant` added options to configure `$padding-x`, `$padding-y`, `$item-justify-content`, `$btn-monospaced-margin-x`, `$btn-monospaced-margin-y`, `$link-monospaced-margin-x`, `$link-monospaced-margin-y`, `$label-size`

ClayCSS (liferay#1105) Tbar added option to break to new lines with `.tbar-nav-shrink`, `.tbar-nav-wrap`, `.subnav-tbar-inline-xs-down`, `.subnav-tbar-inline-sm-down`, `.subnav-tbar-inline-md-down`, `.subnav-tbar-inline-lg-down`, `.subnav-tbar-inline-xl-down`

ClayCSS: (liferay#1105) Label disabled `.close` hover state should look the same

ClayCSS: (liferay#1105) Mixin `clay-link` add option to configure `disabled-text-decoration`

ClayCSS: (liferay#1105) New mixin `clay-label-variant` for creating custom label colors

ClayCSS: (liferay#1147) Subnav Tbar Primary changed `.component-link` color to have more contrast and added `.subnav-tbar-primary.subnav-tbar-disabled` colors

ClayCSS: (liferay#1105) Tbar renamed `.subnav-tbar-inline-*-down` to `.tbar-inline-*-down`
  • Loading branch information
@pat270
pat270 committed Sep 17, 2018
1 parent 5b75daa commit fef6c77
Show file tree
Hide file tree
Showing 8 changed files with 348 additions and 17 deletions.
9 changes: 9 additions & 0 deletions packages/clay-css/src/scss/atlas/variables/_labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@ $label-anchor-hover-text-decoration: underline !default;
$label-link-text-decoration: none !default;
$label-link-hover-text-decoration: underline !default;

// Label Close

$label-close: () !default;
$label-close: map-merge((
disabled-color: inherit
), $label-close);

// Label Sizes

$label-lg: () !default;
$label-lg: map-merge((
font-size: 0.75rem, // 12px
Expand Down
30 changes: 24 additions & 6 deletions packages/clay-css/src/scss/atlas/variables/_tbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,31 @@ $component-tbar: map-merge((
color: $secondary
), $component-tbar);

// Subnav Tbar
// Subnav Tbar Primary

$subnav-tbar: () !default;
$subnav-tbar: map-merge((
btn-height: 1.4375rem,
btn-monospaced-font-size: 0.8125rem
), $subnav-tbar);
$subnav-tbar-primary-component-link: () !default;
$subnav-tbar-primary-component-link: map-merge((
disabled-opacity: 0.65
), $subnav-tbar-primary-component-link);

$subnav-tbar-primary-component-label-close: () !default;
$subnav-tbar-primary-component-label-close: map-merge((
disabled-opacity: 0.65
), $subnav-tbar-primary-component-label-close);

// Subnav Tbar Primary Disabled

$subnav-tbar-primary-disabled-component-label: () !default;
$subnav-tbar-primary-disabled-component-label: map-merge((
border-color: #8E94AA
), $subnav-tbar-primary-disabled-component-label);

$subnav-tbar-primary-disabled: () !default;
$subnav-tbar-primary-disabled: map-merge((
color: #8E94AA
), $subnav-tbar-primary-disabled);

// Subnav Tbar Light

$subnav-tbar-light: () !default;
$subnav-tbar-light: map-merge((
Expand Down
53 changes: 51 additions & 2 deletions packages/clay-css/src/scss/components/_tbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,35 @@
}

.tbar-nav {
@extend %autofit-row;

display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-wrap: nowrap;
list-style: none;
margin-bottom: 0;
min-width: 3.125rem;
padding-left: 0;
word-wrap: break-word;

> .tbar-item {
justify-content: center;
}
}

.tbar-nav-shrink {
flex-grow: 0;
flex-shrink: 0;
width: auto;
}

.tbar-nav-wrap {
flex-wrap: wrap;
}

.tbar-item {
@extend %autofit-col;

max-width: 100%;
padding-bottom: $tbar-item-padding-y;
padding-left: $tbar-item-padding-x;
padding-right: $tbar-item-padding-x;
Expand All @@ -44,6 +61,10 @@
@extend %autofit-section;
}

.tbar-link {
display: inline-block;
}

.tbar-btn-monospaced,
.tbar-link-monospaced {
align-items: center;
Expand All @@ -60,6 +81,28 @@
}
}

// Tbar Inline {xs|sm|md|lg|xl} Down

.tbar-inline-xs-down {
@include clay-tbar-inline-down($tbar-inline-xs-down);
}

.tbar-inline-sm-down {
@include clay-tbar-inline-down($tbar-inline-sm-down);
}

.tbar-inline-md-down {
@include clay-tbar-inline-down($tbar-inline-md-down);
}

.tbar-inline-lg-down {
@include clay-tbar-inline-down($tbar-inline-lg-down);
}

.tbar-inline-xl-down {
@include clay-tbar-inline-down($tbar-inline-xl-down);
}

// Component Tbar

.component-tbar {
Expand All @@ -82,8 +125,14 @@
@include clay-tbar-variant($subnav-tbar);
}

// Subnav Tbar Variants

.subnav-tbar-primary {
@include clay-tbar-variant($subnav-tbar-primary);

&.subnav-tbar-disabled {
@include clay-tbar-variant($subnav-tbar-primary-disabled);
}
}

.subnav-tbar-light {
Expand Down
81 changes: 81 additions & 0 deletions packages/clay-css/src/scss/mixins/_labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
$font-size: map-get($map, font-size);
$height: map-get($map, height);
$line-height: map-get($map, line-height);
$margin-bottom: map-get($map, margin-bottom);
$margin-left: map-get($map, margin-left);
$margin-right: map-get($map, margin-right);
$margin-top: map-get($map, margin-top);
$padding-x: map-get($map, padding-x);
$padding-y: map-get($map, padding-y);
$text-transform: map-get($map, text-transform);
Expand All @@ -15,6 +19,10 @@
font-size: $font-size;
height: auto;
line-height: $line-height;
margin-bottom: $margin-bottom;
margin-left: $margin-left;
margin-right: $margin-right;
margin-top: $margin-top;
min-height: $height;
padding-bottom: $padding-y;
padding-left: $padding-x;
Expand All @@ -35,4 +43,77 @@
width: $lexicon-icon-width;
}
}
}

@mixin clay-label-variant($map) {
$bg: map-get($map, bg);
$border-color: map-get($map, border-color);
$color: map-get($map, color);
$text-decoration: map-get($map, text-decoration);
$hover-bg: map-get($map, hover-bg);
$hover-border-color: map-get($map, hover-border-color);
$hover-color: map-get($map, hover-color);
$hover-text-decoration: map-get($map, hover-text-decoration);
$focus-bg: map-get($map, focus-bg);
$focus-border-color: map-get($map, focus-border-color);
$focus-box-shadow: map-get($map, focus-box-shadow);
$focus-color: map-get($map, focus-color);
$focus-outline: map-get($map, focus-outline);
$focus-text-decoration: map-get($map, focus-text-decoration);
$disabled-bg: map-get($map, disabled-bg);
$disabled-border-color: map-get($map, disabled-border-color);
$disabled-color: map-get($map, disabled-color);
$link-color: map-get($map, link-color);
$link-text-decoration: map-get($map, link-text-decoration);
$link-hover-color: map-get($map, link-hover-color);
$link-hover-text-decoration: map-get($map, link-hover-text-decoration);
$close: setter(map-get($map, close), ());

background-color: $bg;
border-color: $border-color;
color: $color;
text-decoration: $text-decoration;

@at-root {
a#{&},
button#{&} {
&:hover {
background-color: $hover-bg;
border-color: $hover-border-color;
color: $hover-color;
text-decoration: $hover-text-decoration;
}

&:focus {
background-color: $focus-bg;
border-color: $focus-border-color;
box-shadow: $focus-box-shadow;
color: $focus-border-color;
outline: $focus-outline;
text-decoration: $focus-text-decoration;
}
}
}

&:disabled,
&.disabled {
background-color: $disabled-bg;
border-color: $disabled-border-color;
color: $disabled-color;
}

a {
color: $link-color;
text-decoration: $link-text-decoration;

&:hover,
&:focus {
color: $link-hover-color;
text-decoration: $link-hover-text-decoration;
}
}

.close {
@include clay-link($close);
}
}
2 changes: 2 additions & 0 deletions packages/clay-css/src/scss/mixins/_links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
$disabled-cursor: map-get($map, disabled-cursor);
$disabled-opacity: map-get($map, disabled-opacity);
$disabled-pointer-events: map-get($map, disabled-pointer-events);
$disabled-text-decoration: map-get($map, disabled-text-decoration);

$btn-focus-box-shadow: map-get($map, btn-focus-box-shadow);
$btn-focus-outline: map-get($map, btn-focus-outline);
Expand Down Expand Up @@ -131,6 +132,7 @@
cursor: $disabled-cursor;
opacity: $disabled-opacity;
pointer-events: $disabled-pointer-events;
text-decoration: $disabled-text-decoration;
}

.lexicon-icon {
Expand Down
61 changes: 61 additions & 0 deletions packages/clay-css/src/scss/mixins/_tbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@
$color: map-get($map, color);
$font-size: map-get($map, font-size);
$height: map-get($map, height);
$padding-x: map-get($map, padding-x);
$padding-y: map-get($map, padding-y);

$strong-font-weight: map-get($map, strong-font-weight);

$item-justify-content: map-get($map, item-justify-content);
$item-padding-x: map-get($map, item-padding-x);
$item-padding-y: map-get($map, item-padding-y);

Expand All @@ -24,6 +27,8 @@
$btn-monospaced-border-radius: map-get($map, btn-monospaced-border-radius);
$btn-monospaced-border-width: map-get($map, btn-monospaced-border-width);
$btn-monospaced-font-size: map-get($map, btn-monospaced-font-size);
$btn-monospaced-margin-x: map-get($map, btn-monospaced-margin-x);
$btn-monospaced-margin-y: map-get($map, btn-monospaced-margin-y);
$btn-monospaced-padding: map-get($map, btn-monospaced-padding);
$btn-monospaced-size: setter(map-get($map, btn-monospaced-size), $btn-height);

Expand All @@ -35,6 +40,8 @@
$link-monospaced-border-radius: map-get($map, link-monospaced-border-radius);
$link-monospaced-border-width: map-get($map, link-monospaced-border-width);
$link-monospaced-font-size: map-get($map, link-monospaced-font-size);
$link-monospaced-margin-x: map-get($map, link-monospaced-margin-x);
$link-monospaced-margin-y: map-get($map, link-monospaced-margin-y);
$link-monospaced-padding: map-get($map, link-monospaced-padding);
$link-monospaced-size: map-get($map, link-monospaced-size);

Expand All @@ -48,13 +55,21 @@

$component-text: setter(map-get($map, component-text), ());

$component-label: setter(map-get($map, component-label), ());

$tbar-label-size: setter(map-get($map, tbar-label-size), ());

background-color: $bg-color;
border-color: $border-color;
border-style: $border-style;
border-width: $border-width;
color: $color;
font-size: $font-size;
height: $height;
padding-bottom: $padding-y;
padding-left: $padding-x;
padding-right: $padding-x;
padding-top: $padding-y;

strong {
font-weight: $strong-font-weight;
Expand All @@ -69,6 +84,7 @@
}

.tbar-item {
justify-content: $item-justify-content;
padding-bottom: $item-padding-y;
padding-left: $item-padding-x;
padding-right: $item-padding-x;
Expand Down Expand Up @@ -106,6 +122,10 @@
border-width: $btn-monospaced-border-width;
font-size: $btn-monospaced-font-size;
height: $btn-monospaced-size;
margin-bottom: $btn-monospaced-margin-y;
margin-left: $btn-monospaced-margin-x;
margin-right: $btn-monospaced-margin-x;
margin-top: $btn-monospaced-margin-y;
padding: $btn-monospaced-padding;
width: $btn-monospaced-size;

Expand All @@ -119,6 +139,10 @@
border-width: $link-monospaced-border-width;
font-size: $link-monospaced-font-size;
height: $link-monospaced-size;
margin-bottom: $link-monospaced-margin-y;
margin-left: $link-monospaced-margin-x;
margin-right: $link-monospaced-margin-x;
margin-top: $link-monospaced-margin-y;
padding: $link-monospaced-padding;
width: $link-monospaced-size;

Expand All @@ -138,4 +162,41 @@
.component-text {
@include clay-text-typography($component-text);
}

.component-label {
@include clay-label-variant($component-label);
}

.tbar-label {
@include clay-label-size($tbar-label-size);
}
}

@mixin clay-tbar-inline-down($map) {
$breakpoint-down: map-get($map, breakpoint-down);
$item-padding-left: map-get($map, item-padding-left);
$item-padding-right: map-get($map, item-padding-right);

@if ($breakpoint-down) {
@include media-breakpoint-down($breakpoint-down) {
display: block;

.container,
.container-fluid {
display: block;
}

.component-title,
.tbar-nav,
.tbar-section {
display: inline;
}

.tbar-item {
display: inline;
padding-left: $item-padding-left;
padding-right: $item-padding-right;
}
}
}
}
1 change: 1 addition & 0 deletions packages/clay-css/src/scss/variables/_labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ $label-close: map-merge((
hover-color: inherit,
hover-opacity: 1,
focus-opacity: 1,
disabled-opacity: $btn-disabled-opacity,
border-radius: 1px,
display: inline-flex,
font-size: inherit,
Expand Down
Loading

0 comments on commit fef6c77

Please sign in to comment.