@skyux/layout 4.7.0 → 4.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/bundles/skyux-layout.umd.js +17 -9
- package/bundles/skyux-layout.umd.js.map +1 -1
- package/bundles/skyux-layout.umd.min.js +2 -2
- package/bundles/skyux-layout.umd.min.js.map +1 -1
- package/esm2015/modules/action-button/action-button-header.component.js +1 -1
- package/esm2015/modules/action-button/action-button-icon.component.js +1 -1
- package/esm2015/modules/description-list/description-list.component.js +1 -1
- package/esm2015/modules/fluid-grid/fluid-grid.component.js +5 -1
- package/esm2015/modules/fluid-grid/row.component.js +6 -2
- package/esm2015/modules/toolbar/toolbar-item.component.js +1 -1
- package/esm2015/modules/toolbar/toolbar-section.component.js +1 -1
- package/esm2015/modules/toolbar/toolbar-view-actions.component.js +1 -1
- package/esm2015/modules/toolbar/toolbar.component.js +1 -1
- package/esm2015/plugin-resources/layout-resources-provider.js +2 -2
- package/esm5/modules/action-button/action-button-header.component.js +1 -1
- package/esm5/modules/action-button/action-button-icon.component.js +1 -1
- package/esm5/modules/description-list/description-list.component.js +1 -1
- package/esm5/modules/fluid-grid/fluid-grid.component.js +5 -1
- package/esm5/modules/fluid-grid/row.component.js +6 -2
- package/esm5/modules/toolbar/toolbar-item.component.js +1 -1
- package/esm5/modules/toolbar/toolbar-section.component.js +1 -1
- package/esm5/modules/toolbar/toolbar-view-actions.component.js +1 -1
- package/esm5/modules/toolbar/toolbar.component.js +1 -1
- package/esm5/plugin-resources/layout-resources-provider.js +2 -2
- package/fesm2015/skyux-layout.js +17 -9
- package/fesm2015/skyux-layout.js.map +1 -1
- package/fesm5/skyux-layout.js +17 -9
- package/fesm5/skyux-layout.js.map +1 -1
- package/modules/fluid-grid/fluid-grid.component.d.ts +4 -0
- package/modules/fluid-grid/row.component.d.ts +4 -0
- package/package.json +2 -1
- package/skyux-layout.metadata.json +1 -1
- package/src/assets/locales/resources_en_US.json +2 -2
package/fesm5/skyux-layout.js
CHANGED
|
@@ -261,7 +261,7 @@ var SkyActionButtonHeaderComponent = /** @class */ (function () {
|
|
|
261
261
|
Component({
|
|
262
262
|
selector: 'sky-action-button-header',
|
|
263
263
|
template: "<div\n class=\"sky-action-button-header\"\n [skyThemeClass]=\"{\n 'sky-headline' : 'modern',\n 'sky-section-heading' : 'default'\n }\"\n>\n <ng-content></ng-content>\n</div>\n",
|
|
264
|
-
styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-xs) .sky-action-button-header{margin:0 5px}@media (min-width:768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header{margin:0 0 20px}.sky-theme-modern .sky-action-button-header
|
|
264
|
+
styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-xs) .sky-action-button-header{margin:0 5px}@media (min-width:768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}.sky-theme-modern .sky-action-button-header{margin:0 0 10px}"]
|
|
265
265
|
})
|
|
266
266
|
], SkyActionButtonHeaderComponent);
|
|
267
267
|
return SkyActionButtonHeaderComponent;
|
|
@@ -303,7 +303,7 @@ var SkyActionButtonIconComponent = /** @class */ (function () {
|
|
|
303
303
|
Component({
|
|
304
304
|
selector: 'sky-action-button-icon',
|
|
305
305
|
template: "<div\n aria-hidden=\"true\"\n class=\"sky-action-button-icon-container\"\n>\n <sky-icon\n class=\"sky-action-button-icon\"\n [icon]=\"iconType\"\n [size]=\"fontSizeClass\"\n ></sky-icon>\n</div>\n",
|
|
306
|
-
styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container{margin:0 5px}@media (min-width:768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}
|
|
306
|
+
styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container{margin:0 5px}@media (min-width:768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}.sky-theme-modern .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}"]
|
|
307
307
|
})
|
|
308
308
|
], SkyActionButtonIconComponent);
|
|
309
309
|
return SkyActionButtonIconComponent;
|
|
@@ -348,7 +348,7 @@ var SkyActionButtonModule = /** @class */ (function () {
|
|
|
348
348
|
|
|
349
349
|
var SkyLayoutResourcesProvider = /** @class */ (function () {
|
|
350
350
|
function SkyLayoutResourcesProvider() {
|
|
351
|
-
this.resources = { "EN-US": { "skyux_back_to_top": "Back to top", "skyux_card_checkbox_label": "Select card", "skyux_definition_list_none_found": "None found", "skyux_description_list_none_found": "None found", "skyux_inline_delete_assistive_text": "Are you sure you want to delete this item?", "skyux_inline_delete_cancel": "Cancel", "skyux_inline_delete_confirm_deletion": "Confirm deletion", "skyux_inline_delete_delete": "Delete", "skyux_text_expand_close_text": "Close", "skyux_text_expand_modal_title": "Expanded view", "skyux_text_expand_see_less": "See less", "skyux_text_expand_see_more": "See more" } };
|
|
351
|
+
this.resources = { "EN-US": { "skyux_back_to_top": "Back to top", "skyux_card_checkbox_label": "Select card", "skyux_definition_list_none_found": "None found.", "skyux_description_list_none_found": "None found.", "skyux_inline_delete_assistive_text": "Are you sure you want to delete this item?", "skyux_inline_delete_cancel": "Cancel", "skyux_inline_delete_confirm_deletion": "Confirm deletion", "skyux_inline_delete_delete": "Delete", "skyux_text_expand_close_text": "Close", "skyux_text_expand_modal_title": "Expanded view", "skyux_text_expand_see_less": "See less", "skyux_text_expand_see_more": "See more" } };
|
|
352
352
|
}
|
|
353
353
|
SkyLayoutResourcesProvider.prototype.getString = function (localeInfo, name) {
|
|
354
354
|
return getStringForLocale(this.resources, localeInfo.locale, name);
|
|
@@ -1541,7 +1541,7 @@ var SkyDescriptionListComponent = /** @class */ (function () {
|
|
|
1541
1541
|
template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode' : mode == 'longDescription',\n 'sky-description-list-vertical-mode' : mode == 'vertical',\n 'sky-description-list-horizontal-mode' : mode == 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngTemplateOutlet=\"termComponent.templateRef\"></ng-container>\n </dt>\n <dd *ngFor=\"let descriptionComponent of contentComponent?.descriptionComponents\">\n <ng-container *ngTemplateOutlet=\"descriptionComponent.templateRef\"></ng-container>\n </dd>\n </div>\n</dl>\n",
|
|
1542
1542
|
providers: [SkyDescriptionListService],
|
|
1543
1543
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1544
|
-
styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content
|
|
1544
|
+
styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}"]
|
|
1545
1545
|
})
|
|
1546
1546
|
], SkyDescriptionListComponent);
|
|
1547
1547
|
return SkyDescriptionListComponent;
|
|
@@ -1595,6 +1595,10 @@ var SkyFluidGridGutterSize;
|
|
|
1595
1595
|
SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
|
|
1596
1596
|
})(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
|
|
1597
1597
|
|
|
1598
|
+
/**
|
|
1599
|
+
* Displays a row within the `sky-fluid-grid` wrapper. Previously, you could display a row
|
|
1600
|
+
* without a wrapper, but we no longer officially support that option.
|
|
1601
|
+
*/
|
|
1598
1602
|
var SkyRowComponent = /** @class */ (function () {
|
|
1599
1603
|
function SkyRowComponent() {
|
|
1600
1604
|
/**
|
|
@@ -1610,7 +1614,7 @@ var SkyRowComponent = /** @class */ (function () {
|
|
|
1610
1614
|
Component({
|
|
1611
1615
|
selector: 'sky-row',
|
|
1612
1616
|
template: "<div class=\"sky-row\" \n [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n <ng-content></ng-content>\n</div>\n",
|
|
1613
|
-
styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row {\n margin-left: -10px;\n margin-right: -10px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -20px;\n margin-right: -20px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row {\n margin-left: -15px;\n margin-right: -15px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -30px;\n margin-right: -30px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row {\n margin-left: -30px;\n margin-right: -30px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -60px;\n margin-right: -60px;\n}\n\n:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width:768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse{flex-direction:row-reverse}.sky-theme-modern .sky-row
|
|
1617
|
+
styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row {\n margin-left: -10px;\n margin-right: -10px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -20px;\n margin-right: -20px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row {\n margin-left: -15px;\n margin-right: -15px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -30px;\n margin-right: -30px;\n}\n\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row {\n margin-left: -30px;\n margin-right: -30px;\n}\n\n:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row {\n margin-left: -60px;\n margin-right: -60px;\n}\n\n:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width:768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}"]
|
|
1614
1618
|
})
|
|
1615
1619
|
], SkyRowComponent);
|
|
1616
1620
|
return SkyRowComponent;
|
|
@@ -1671,6 +1675,10 @@ var SkyColumnComponent = /** @class */ (function () {
|
|
|
1671
1675
|
return SkyColumnComponent;
|
|
1672
1676
|
}());
|
|
1673
1677
|
|
|
1678
|
+
/**
|
|
1679
|
+
* Wraps the fluid grid to ensure proper spacing. Without the wrapper, the
|
|
1680
|
+
* alignment, padding, and margins do not behave as expected.
|
|
1681
|
+
*/
|
|
1674
1682
|
var SkyFluidGridComponent = /** @class */ (function () {
|
|
1675
1683
|
function SkyFluidGridComponent() {
|
|
1676
1684
|
/**
|
|
@@ -2750,7 +2758,7 @@ var SkyToolbarSectionComponent = /** @class */ (function () {
|
|
|
2750
2758
|
Component({
|
|
2751
2759
|
selector: 'sky-toolbar-section',
|
|
2752
2760
|
template: "<div class=\"sky-toolbar-section\">\n <div class=\"sky-toolbar-section-items\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n",
|
|
2753
|
-
styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}.sky-theme-modern .sky-toolbar-section
|
|
2761
|
+
styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern) .sky-toolbar-section{padding:10px 0}.sky-theme-modern .sky-toolbar-section{padding:10px 0}"]
|
|
2754
2762
|
})
|
|
2755
2763
|
], SkyToolbarSectionComponent);
|
|
2756
2764
|
return SkyToolbarSectionComponent;
|
|
@@ -2773,7 +2781,7 @@ var SkyToolbarComponent = /** @class */ (function () {
|
|
|
2773
2781
|
Component({
|
|
2774
2782
|
selector: 'sky-toolbar',
|
|
2775
2783
|
template: "<div\n class=\"sky-toolbar-container\"\n [ngClass]=\"{ 'sky-toolbar-sectioned': hasSections }\"\n>\n <ng-content select=\"sky-toolbar-section\"></ng-content>\n <div class=\"sky-toolbar-items\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n",
|
|
2776
|
-
styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}\n:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container {\n background-color: #fcfcfc;\n}\n\n:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container {\n background-color: #121212;\n}\n\n
|
|
2784
|
+
styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}\n:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container {\n background-color: #fcfcfc;\n}\n\n:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container {\n background-color: #121212;\n}\n\n:host-context(.sky-theme-modern) .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}:host-context(.sky-theme-modern) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}:host-context(.sky-theme-modern) .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}:host-context(.sky-theme-modern) .sky-toolbar-sectioned{padding:0}.sky-theme-modern .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}.sky-theme-modern .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}.sky-theme-modern .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}.sky-theme-modern .sky-toolbar-sectioned{padding:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}"]
|
|
2777
2785
|
})
|
|
2778
2786
|
], SkyToolbarComponent);
|
|
2779
2787
|
return SkyToolbarComponent;
|
|
@@ -2789,7 +2797,7 @@ var SkyToolbarItemComponent = /** @class */ (function () {
|
|
|
2789
2797
|
Component({
|
|
2790
2798
|
selector: 'sky-toolbar-item',
|
|
2791
2799
|
template: "<div class=\"sky-toolbar-item\">\n <ng-content></ng-content>\n</div>\n",
|
|
2792
|
-
styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}
|
|
2800
|
+
styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default{background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default{background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
|
|
2793
2801
|
})
|
|
2794
2802
|
], SkyToolbarItemComponent);
|
|
2795
2803
|
return SkyToolbarItemComponent;
|
|
@@ -2807,7 +2815,7 @@ var SkyToolbarViewActionsComponent = /** @class */ (function () {
|
|
|
2807
2815
|
selector: 'sky-toolbar-view-actions',
|
|
2808
2816
|
template: "<div\n class=\"sky-toolbar-view-actions\"\n>\n <ng-content></ng-content>\n</div>\n",
|
|
2809
2817
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2810
|
-
styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}
|
|
2818
|
+
styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}"]
|
|
2811
2819
|
})
|
|
2812
2820
|
], SkyToolbarViewActionsComponent);
|
|
2813
2821
|
return SkyToolbarViewActionsComponent;
|