Skip to content

Commit

Permalink
Merge pull request #1027 from liferay/develop
Browse files Browse the repository at this point in the history
v2.1.12
  • Loading branch information
jbalsas authored Jun 19, 2018
2 parents e2735ae + e1fee23 commit 6476d52
Show file tree
Hide file tree
Showing 17 changed files with 115 additions and 52 deletions.
2 changes: 1 addition & 1 deletion packages/clay-css/src/content/sheet.html
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ <h4 class="sheet-tertiary-title">Sheet Tertiary Title</h4>
<div class="sheet-text">Sheet Subtitle and Sheet Tertiary Title are contained inside a sheet-section.</div>
</div>
<div class="sheet-footer">
<div class="btn-group-item">
<div class="btn-group">
<div class="btn-group-item">
<button class="btn btn-primary" type="button">Primary</button>
</div>
Expand Down
2 changes: 2 additions & 0 deletions packages/clay-css/src/scss/atlas/variables/_menubar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
$menubar-vertical-transparent-md: (
bg-mobile: #FFF,
link-active-font-weight: $font-weight-semi-bold,
toggler-font-size-mobile: 0.875rem,
toggler-font-weight-mobile: $font-weight-semi-bold
) !default;

Expand All @@ -11,5 +12,6 @@ $menubar-vertical-transparent-md: (
$menubar-vertical-transparent-lg: (
bg-mobile: #FFF,
link-active-font-weight: $font-weight-semi-bold,
toggler-font-size-mobile: 0.875rem,
toggler-font-weight-mobile: $font-weight-semi-bold
) !default;
1 change: 0 additions & 1 deletion packages/clay-css/src/scss/components/_buttons.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.btn {
backface-visibility: hidden; // https://github.com/liferay/clay/issues/546
font-size: $btn-font-size;

@include clay-scale-component {
Expand Down
23 changes: 23 additions & 0 deletions packages/clay-css/src/scss/components/_navs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -98,10 +98,33 @@
max-width: calc(100% - 24px);
}

// Nav Form

.nav-form {
padding-bottom: $nav-stacked-nav-form-padding-bottom;
padding-left: $nav-stacked-nav-form-padding-left;
padding-right: $nav-stacked-nav-form-padding-right;
padding-top: $nav-stacked-nav-form-padding-top;
}

.nav .nav-form {
padding-bottom: $nav-form-padding-bottom;
padding-left: $nav-form-padding-left;
padding-right: $nav-form-padding-right;
padding-top: $nav-form-padding-top;
}

// Nav Stacked

.nav-stacked {
display: block;

.nav-form {
padding-bottom: $nav-stacked-nav-form-padding-bottom;
padding-left: $nav-stacked-nav-form-padding-left;
padding-right: $nav-stacked-nav-form-padding-right;
padding-top: $nav-stacked-nav-form-padding-top;
}
}

// Nav Unstyled
Expand Down
25 changes: 19 additions & 6 deletions packages/clay-css/src/scss/components/_sheets.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,20 @@
}

.sheet-header {
@include clearfix;

margin-bottom: $sheet-header-margin-bottom;

@include clay-scale-component {
margin-bottom: $sheet-header-margin-bottom-mobile;
}

&::after {
clear: both;
content: '';
display: block;
}
}

.sheet-section {
@include clearfix;

margin-bottom: $sheet-section-margin-bottom;

@include clay-scale-component {
Expand All @@ -57,6 +59,12 @@
margin-bottom: -$sheet-section-margin-bottom-mobile;
}
}

&::after {
clear: both;
content: '';
display: block;
}
}

fieldset {
Expand All @@ -66,8 +74,7 @@ fieldset {
}

.sheet-footer {
@include clearfix;

display: flex;
margin-bottom: $sheet-footer-margin-bottom;
margin-left: $sheet-footer-margin-left;
margin-right: $sheet-footer-margin-right;
Expand All @@ -79,6 +86,12 @@ fieldset {
margin-right: $sheet-footer-margin-right-mobile;
margin-top: $sheet-footer-margin-top-mobile;
}

&::after {
clear: both;
content: '';
display: block;
}
}

// Sheet Sizes
Expand Down
8 changes: 6 additions & 2 deletions packages/clay-css/src/scss/components/_side-navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,13 @@
position: relative;

@include media-breakpoint-up(md) {
@include clearfix;

position: static;

&::after {
clear: both;
content: '';
display: block;
}
}
}

Expand Down
5 changes: 4 additions & 1 deletion packages/clay-css/src/scss/mixins/_menubar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
$collapse-max-width-mobile: map-get($map, collapse-max-width-mobile);
$collapse-left-mobile: setter(map-get($map, collapse-left-mobile), -0.0625rem); // -1px
$collapse-right-mobile: setter(map-get($map, collapse-right-mobile), -0.0625rem); // -1px
$collapse-z-index-mobile: map-get($map, collapse-z-index-mobile);

// .menubar-toggler

Expand Down Expand Up @@ -82,7 +83,7 @@
position: absolute;
right: $collapse-right-mobile;
top: 100%;
z-index: $zindex-navbar-collapse-absolute;
z-index: $collapse-z-index-mobile;

> .nav {
margin-bottom: $collapse-inner-spacer-y-mobile;
Expand Down Expand Up @@ -170,6 +171,7 @@
$toggler-border-color-mobile: map-get($map, toggler-border-color-mobile);
$toggler-border-style-mobile: map-get($map, toggler-border-style-mobile);
$toggler-color-mobile: setter(map-get($map, toggler-color-mobile), $link-active-color);
$toggler-font-size-mobile: map-get($map, toggler-font-size-mobile);
$toggler-font-weight-mobile: map-get($map, toggler-font-weight-mobile);

background-color: $bg;
Expand Down Expand Up @@ -200,6 +202,7 @@
border-color: $toggler-border-color-mobile;
border-style: $toggler-border-style-mobile;
color: $toggler-color-mobile;
font-size: $toggler-font-size-mobile;
font-weight: $toggler-font-weight-mobile;
}
}
Expand Down
6 changes: 4 additions & 2 deletions packages/clay-css/src/scss/variables/_menubar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ $menubar-vertical-expand-md: () !default;
$menubar-vertical-expand-md: map-merge((
margin-bottom-mobile: 1.5rem,
margin-left-mobile: -($grid-gutter-width / 2),
margin-right-mobile: -($grid-gutter-width / 2)
margin-right-mobile: -($grid-gutter-width / 2),
collapse-z-index-mobile: $zindex-navbar-collapse-absolute - 1
), $menubar-vertical-expand-md);

$menubar-vertical-transparent-md: () !default;
Expand All @@ -19,7 +20,8 @@ $menubar-vertical-expand-lg: map-merge((
breakpoint-up: lg,
margin-bottom-mobile: 1.5rem,
margin-left-mobile: -($grid-gutter-width / 2),
margin-right-mobile: -($grid-gutter-width / 2)
margin-right-mobile: -($grid-gutter-width / 2),
collapse-z-index-mobile: $zindex-navbar-collapse-absolute - 1
), $menubar-vertical-expand-lg);

$menubar-vertical-transparent-lg: () !default;
Expand Down
11 changes: 11 additions & 0 deletions packages/clay-css/src/scss/variables/_navs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ $nav-btn-margin-y: (($line-height-base * $font-size-base) + ($nav-link-padding-y
$nav-btn-padding-x: $btn-padding-x-sm !default;
$nav-btn-padding-y: 0 !default;

$nav-form-padding-bottom: 0 !default;
$nav-form-padding-left: $nav-link-padding-x !default;
$nav-form-padding-right: $nav-link-padding-x !default;
$nav-form-padding-top: 0 !default;

// Nav Stacked

$nav-stacked-nav-form-padding-bottom: $nav-link-padding-y !default;
$nav-stacked-nav-form-padding-left: 0.5rem !default;
$nav-stacked-nav-form-padding-right: 0.5rem !default;
$nav-stacked-nav-form-padding-top: $nav-link-padding-y !default;

// Nav Nested

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -742,7 +742,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -1473,7 +1473,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -2206,7 +2206,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -2379,7 +2379,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -2767,7 +2767,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and de
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -2937,7 +2937,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -3838,7 +3838,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -4877,7 +4877,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -5608,7 +5608,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -5991,7 +5991,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected gro
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -6509,7 +6509,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with selected ite
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down Expand Up @@ -6843,7 +6843,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-label">
<span class="custom-control-label-text sr-only">select-page</span>
<span class="custom-control-label-text sr-only">select-items</span>
</span>
</label>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap"><div class="container-fluid container-fluid-max-xl"><ul class="navbar-nav navbar-nav-expand"><li class="nav-item"><div class="custom-control custom-checkbox"><label><input checked="checked"class="custom-control-input"ref="input" type="checkbox" /><span class="custom-control-label"><span class="custom-control-label-text sr-only">select-page</span></span></label></div></li><li class="nav-item"><span class="navbar-text">1-of-3 <span class="navbar-breakpoint-down-d-none">items-selected</span></span></li></ul><ul class="navbar-nav"><li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="3" data-onclick="null"><button class="btn nav-link nav-link-monospaced btn-unstyled"aria-label="icon"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button></li><li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="5" data-onclick="null"><button class="btn nav-link nav-link-monospaced btn-unstyled"aria-label="icon"title="action 6"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button></li><li class="nav-item"><div class="dropdown dropdown-action"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"title="actions"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v"focusable="false"><title>ellipsis-v</title><use xlink:href="spritemap.svg#ellipsis-v" /></svg></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 1"type="null">action 1</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 2"type="null">action 2</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 5"type="null">action 5</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 6"type="null">action 6</button></li></ul></div></div></li></ul></div></nav>
<nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap"><div class="container-fluid container-fluid-max-xl"><ul class="navbar-nav navbar-nav-expand"><li class="nav-item"><div class="custom-control custom-checkbox"><label><input checked="checked"class="custom-control-input"ref="input" type="checkbox" /><span class="custom-control-label"><span class="custom-control-label-text sr-only">select-items</span></span></label></div></li><li class="nav-item"><span class="navbar-text">1-of-3 <span class="navbar-breakpoint-down-d-none">items-selected</span></span></li></ul><ul class="navbar-nav"><li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="3" data-onclick="null"><button class="btn nav-link nav-link-monospaced btn-unstyled"aria-label="icon"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button></li><li class="nav-item navbar-breakpoint-down-d-none" data-quick-action-index="5" data-onclick="null"><button class="btn nav-link nav-link-monospaced btn-unstyled"aria-label="icon"title="action 6"type="null"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-icon"focusable="false"><title>icon</title><use xlink:href="spritemap.svg#icon" /></svg></button></li><li class="nav-item"><div class="dropdown dropdown-action"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"title="actions"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v"focusable="false"><title>ellipsis-v</title><use xlink:href="spritemap.svg#ellipsis-v" /></svg></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 1"type="null">action 1</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 2"type="null">action 2</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 5"type="null">action 5</button></li><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"aria-label="action 6"type="null">action 6</button></li></ul></div></div></li></ul></div></nav>
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="element-class-1 element-class-2"id="id"><nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap"><div class="container-fluid container-fluid-max-xl"><ul class="navbar-nav navbar-nav-expand"><li class="nav-item"><div class="custom-control custom-checkbox"><label><input checked="checked"class="custom-control-input"ref="input" type="checkbox" /><span class="custom-control-label"><span class="custom-control-label-text sr-only">select-page</span></span></label></div></li><li class="nav-item"><span class="navbar-text">1-of-100 <span class="navbar-breakpoint-down-d-none">items-selected</span></span></li></ul><ul class="navbar-nav"><li class="nav-item"><div class="dropdown dropdown-action"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"title="actions"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v"focusable="false"><title>ellipsis-v</title><use xlink:href="spritemap.svg#ellipsis-v" /></svg></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li></ul></div></div></li></ul></div></nav></div>
<div class="element-class-1 element-class-2"id="id"><nav class="management-bar management-bar-primary navbar navbar-expand-md navbar-nowrap"><div class="container-fluid container-fluid-max-xl"><ul class="navbar-nav navbar-nav-expand"><li class="nav-item"><div class="custom-control custom-checkbox"><label><input checked="checked"class="custom-control-input"ref="input" type="checkbox" /><span class="custom-control-label"><span class="custom-control-label-text sr-only">select-items</span></span></label></div></li><li class="nav-item"><span class="navbar-text">1-of-100 <span class="navbar-breakpoint-down-d-none">items-selected</span></span></li></ul><ul class="navbar-nav"><li class="nav-item"><div class="dropdown dropdown-action"><button aria-expanded="false"aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link nav-link-monospaced btn-unstyled"data-onclick="toggle"title="actions"type="button"><svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v"focusable="false"><title>ellipsis-v</title><use xlink:href="spritemap.svg#ellipsis-v" /></svg></button><div class="dropdown-menu" ref="menu"><ul class="list-unstyled"><li data-onclick="null"><button class="btn dropdown-item btn-sm btn-link"type="null"></button></li></ul></div></div></li></ul></div></nav></div>
Loading

0 comments on commit 6476d52

Please sign in to comment.