Skip to content

Commit

Permalink
#558: Developer can style content types output differently per viewpo…
Browse files Browse the repository at this point in the history 
…rt - Added styles fixes for adminhtml area
  • Loading branch information
@hannahnida
hannahnida committed Sep 8, 2020
1 parent 5235ed5 commit e8b4cd7
Show file tree
Hide file tree
Showing 17 changed files with 268 additions and 168 deletions.
240 changes: 162 additions & 78 deletions app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,83 +47,83 @@ body {
// Headings
// ---------------------------------------------

h1 {
margin: 0 0 40px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 40px,
@_font-style: false,
@_font-weight: @font-weight__light,
@_line-height: 44px
);
}

h2 {
margin: 25px 0 20px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 26px,
@_font-style: false,
@_font-weight: @font-weight__light,
@_line-height: 1.1
);
}

h3 {
margin: 20px 0 10px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 18px,
@_font-style: false,
@_font-weight: @font-weight__semibold,
@_line-height: 1.1
);
}

h4 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 14px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}

h5 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 12px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}

h6 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 10px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}
//h1 {
// margin: 0 0 40px;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 40px,
// @_font-style: false,
// @_font-weight: @font-weight__light,
// @_line-height: 44px
// );
//}
//
//h2 {
// margin: 25px 0 20px;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 26px,
// @_font-style: false,
// @_font-weight: @font-weight__light,
// @_line-height: 1.1
// );
//}
//
//h3 {
// margin: 20px 0 10px;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 18px,
// @_font-style: false,
// @_font-weight: @font-weight__semibold,
// @_line-height: 1.1
// );
//}
//
//h4 {
// margin: 20px 0;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 14px,
// @_font-style: false,
// @_font-weight: @font-weight__bold,
// @_line-height: 1.1
// );
//}
//
//h5 {
// margin: 20px 0;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 12px,
// @_font-style: false,
// @_font-weight: @font-weight__bold,
// @_line-height: 1.1
// );
//}
//
//h6 {
// margin: 20px 0;
//
// .lib-typography(
// @_color: @color-gray20,
// @_font-family: false,
// @_font-size: 10px,
// @_font-style: false,
// @_font-weight: @font-weight__bold,
// @_line-height: 1.1
// );
//}

//
// Text
Expand Down Expand Up @@ -209,7 +209,7 @@ body {
outline: 2px solid @placeholder-error-outline-mce;
}
}

.magento-placeholder-error,
.magento-placeholder {
img {
Expand All @@ -220,3 +220,87 @@ body {
}
}
}

//
// Headings
// ---------------------------------------------

.pagebuilder-heading-h1 {
margin: 0 0 40px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 40px,
@_font-style: false,
@_font-weight: @font-weight__light,
@_line-height: 44px
);
}

.pagebuilder-heading-h2 {
margin: 25px 0 20px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 26px,
@_font-style: false,
@_font-weight: @font-weight__light,
@_line-height: 1.1
);
}


.pagebuilder-heading-h3 {
margin: 20px 0 10px;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 18px,
@_font-style: false,
@_font-weight: @font-weight__semibold,
@_line-height: 1.1
);
}

.pagebuilder-heading-h4 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 14px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}

.pagebuilder-heading-h5 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 12px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}

.pagebuilder-heading-h6 {
margin: 20px 0;

.lib-typography(
@_color: @color-gray20,
@_font-family: false,
@_font-size: 10px,
@_font-style: false,
@_font-weight: @font-weight__bold,
@_line-height: 1.1
);
}

4 changes: 4 additions & 0 deletions app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,10 @@
}
}

.empty-container {
min-height: 300px;
}

.no-user-select {
-khtml-user-select: none;
-moz-user-select: none;
Expand Down
5 changes: 4 additions & 1 deletion app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@

.pagebuilder-banner-wrapper {
.pagebuilder-overlay {
padding: 30px;
position: relative;
z-index: 2;
}
Expand All @@ -133,6 +132,10 @@
}
}

.pagebuilder-poster-overlay {
padding: 30px;
}

//
// Default appearance styles rendered through Block only
// _____________________________________________________
Expand Down
11 changes: 6 additions & 5 deletions .../Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,7 @@
min-width: 20px;
}

a {
margin: 0;
}

a[data-element='link'] {
margin: 0 10px 10px 0;
max-width: 100%;
min-width: 0;
position: relative;
Expand Down Expand Up @@ -96,6 +91,12 @@
}
}

.pagebuilder-button-primary,
.pagebuilder-button-secondary,
.pagebuilder-button-link {
margin: 0 10px 10px 0;
}

.pagebuilder-content-type-hidden .pagebuilder-content-type.pagebuilder-button-item:before {
font-size: 28px;
height: ~'calc(100% - 10px)';
Expand Down
7 changes: 0 additions & 7 deletions app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column/_default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,6 @@
}

.pagebuilder-content-type.pagebuilder-column {
margin-bottom: 10px;
min-height: inherit;

&.empty-container {
min-height: 300px;
}

.pagebuilder-column-resize-handle {
background: @color-pagebuilder-light-blue;
bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion ...code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/divider/_default.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// Default appearance styles
// _____________________________________________

.pagebuilder-divider hr {
.pagebuilder-divider-hr {
border: none;
border-color: @border_color;
border-top: solid;
Expand Down
Loading

0 comments on commit e8b4cd7

Please sign in to comment.