Skip to content

Commit

Permalink
Merge Styling Portlets Framework - Meeds-io/MIPs#144 (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@boubaker
boubaker authored Jul 5, 2024
2 parents 059a639 + 4f0ed42 commit 28ecfc6
Show file tree
Hide file tree
Showing 8 changed files with 437 additions and 214 deletions.
83 changes: 58 additions & 25 deletions platform-ui-skin/src/main/webapp/skin/less/core/helpers.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,45 @@
.position-static {
position: static !important;
}
.text-title {
font-size: @textTitleFontSize !important;
font-weight: @textTitleFontWeight !important;
font-style: @textTitleFontStyle !important;
color: @textTitleColor !important;
}
.text-header {
font-size: @textHeaderFontSize !important;
font-weight: @textHeaderFontWeight !important;
font-style: @textHeaderFontStyle !important;
color: @textHeaderColor !important;
}
.text-body {
font-size: @textFontSize !important;
font-weight: @textFontWeight !important;
font-style: @textFontStyle !important;
color: @textColor !important;
}
.text-subtitle {
font-size: @textSubtitleFontSize !important;
font-weight: @textSubtitleFontWeight !important;
font-style: @textSubtitleFontStyle !important;
color: @textSubtitleColor !important;
}
.text-title-color {
color: @textTitleColor !important;
}
.text-header-color {
color: @textHeaderColor !important;
}
.text-color {
color: @textColor !important;
}
.text-subtitle-color {
color: @textSubtitleColor !important;
}
.text-disabled-color {
color: @textDisabledColor !important;
}
.header-color {
color: @headingColor !important;
}
Expand All @@ -124,20 +160,25 @@
color: @darkYellow !important;
}
.text-header-title {
font-size: 18px !important;
font-weight: bold !important;
color: @toolbarLightLinkHoverColor !important;
font-size: @textTitleFontSize !important;
font-weight: @textTitleFontWeight !important;
font-style: @textTitleFontStyle !important;
color: @textTitleColor !important;
}
.text-font-small-size {
font-size: @fontSizeSmall !important;
font-size: @textSubtitleFontSize !important;
}
.text-subtitle-font-size {
font-size: @textSubtitleFontSize !important;
}
.text-font-size {
font-size: @fontSizeLarge !important;
font-size: @textFontSize !important;
}
.widget-text-header{
font-size: @textHeaderFontSize !important;
color: @greyColorLighten1 !important;
font-weight: normal !important;
font-weight: @textHeaderFontWeight !important;
font-style: @textHeaderFontStyle !important;
color: @textHeaderColor !important;
}
.text-sub-title {
color: @greyColorLighten1 !important;
Expand Down Expand Up @@ -253,19 +294,8 @@
.border-radius {
border-radius: @inputBorderRadius !important;
}
.app-background-color {
background-color: ~"var(--appBackgroundColor, #FFFFFF) !important";
background-image: ~"var(--appBackgroundImage, unset) !important";
background-repeat: ~"var(--appBackgroundRepeat, no-repeat) !important";
background-size: ~"var(--appBackgroundSize, unset) !important";
background-position: ~"var(--appBackgroundPosition, unset) !important";
min-height: ~"var(--appHeight, auto) !important";
}
.application-border-radius, .card-border-radius {
border-top-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
border-bottom-right-radius: ~"var(--appBorderRadiusBottomRight, var(--allPagesBorderRadius, 4px)) !important";
border-bottom-left-radius: ~"var(--appBorderRadiusBottomLeft, var(--allPagesBorderRadius, 4px)) !important";
.card-border-radius {
border-radius: @borderRadius !important;
}
.border-top-left-radius {
border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
Expand Down Expand Up @@ -709,6 +739,9 @@
background-size: 9px 9px !important;
background-repeat: repeat !important;
}
.menu-text-color {
color: @menuTextColor !important;
}
.linear-gradient-white-background {
background: linear-gradient(to left, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}
Expand Down Expand Up @@ -910,12 +943,12 @@
padding: 10px 0 10px 10px ~'!important; /** orientation=lt */ ';
padding: 10px 10px 10px 0 ~'!important; /** orientation=rt */ ';
p, div, ul li, ol li {
margin-bottom: 0;
font-size: 14px!important;
font-weight: 300;
font-size: @textFontSize;
font-weight: @textFontWeight;
font-style: @textFontStyle;
color: @textColor;
line-height: 1.25;
font-style: italic;
color: @textColor!important;
margin-bottom: 0;
}
}
a {
Expand Down
5 changes: 2 additions & 3 deletions platform-ui-skin/src/main/webapp/skin/less/core/layout/globalLayout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@

.UIPage {
.PORTLET-FRAGMENT {
padding-bottom: @applicationSpaceBottom;
margin-bottom: @applicationSpaceBottom;
}

.no-applications-spacing .PORTLET-FRAGMENT {
padding-bottom: 0px;
margin-bottom: 0px;
}
.no-applications-spacing .layout-application {
padding-bottom: 0px !important;
Expand Down Expand Up @@ -161,7 +161,6 @@
}
}
.brandingContainer {
color: @toolbarLightLinkHoverColor;
padding-top: 3px;
padding-bottom: 3px;
border-left: solid 1px @greyColor ~'; /** orientation=lt */ ';
Expand Down
137 changes: 117 additions & 20 deletions platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,115 @@

@import 'mixins.less';

/* Grid Style */
.application-background-color, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-background-color) {
background-color: ~"var(--appBackgroundColor, #FFFFFF) !important";

/* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
.application-body {
&.v-card,
.v-card,
.theme--light.v-card,
&.v-sheet,
.v-sheet,
.theme--light.v-sheet,
&.v-toolbar,
.v-toolbar,
.v-toolbar.theme--light,
.v-toolbar.theme--light.v-sheet,
&.v-list,
.v-list,
.v-list.theme--light,
&.v-tabs-bar,
.v-tabs-bar,
&.v-tabs.theme--light > .v-tabs-bar,
.v-tabs.theme--light > .v-tabs-bar,
&.v-tabs-items,
.v-tabs-items,
.v-tabs-item.theme--light,
.v-data-table,
.v-data-table.theme--light {
background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
}
.v-menu__content {
background-color: @baseBackground;
color: @btnColor !important;
font-size: @btnFontSize !important;
font-weight: normal !important;
font-style: normal !important;
}
}
}

.application-body .application-background-color, .application-body .application-layout-style {
/* Override Vuetify predefined background for some elements to simplify development with Meeds branding */
&.v-card,
.v-card,
.theme--light.v-card,
&.v-sheet,
.v-sheet,
.theme--light.v-sheet,
&.v-toolbar,
.v-toolbar,
.v-toolbar.theme--light,
.v-toolbar.theme--light.v-sheet,
&.v-list,
.v-list,
.v-list.theme--light,
&.v-tabs-bar,
.v-tabs-bar,
&.v-tabs.theme--light > .v-tabs-bar,
.v-tabs.theme--light > .v-tabs-bar,
&.v-tabs-items,
.v-tabs-items,
.v-tabs-item.theme--light,
.v-data-table,
.v-data-table.theme--light {
background-color: transparent; /* NEVER make this !important to allow defining specific colors when needed using CSS helpers */
}
.v-menu__content {
background-color: @baseBackground;
color: @btnColor !important;
font-size: @btnFontSize !important;
font-weight: normal !important;
font-style: normal !important;
}
}

.application-background-image, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-background-image) {
background-image: ~"var(--appBackgroundImage, none) !important";
background-repeat: ~"var(--appBackgroundRepeat, no-repeat) !important";
background-size: ~"var(--appBackgroundSize, unset) !important";
background-position: ~"var(--appBackgroundPosition, unset) !important";
}

.application-border, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border) {
border: ~"var(--appBorderSize, 0) solid var(--appBorderColor, transparent) !important";
}

.application-border-radius, .application-border-radius-top, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border-radius) {
border-top-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
}

.application-border-radius, .application-border-radius-bottom, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-border-radius) {
border-bottom-right-radius: ~"var(--appBorderRadiusBottomRight, var(--allPagesBorderRadius, 4px)) !important";
border-bottom-left-radius: ~"var(--appBorderRadiusBottomLeft, var(--allPagesBorderRadius, 4px)) !important";
}

.application-box-shadow, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-box-shadow) {
box-shadow: ~"var(--appBoxShadow, none) !important";
}

.application-dimension, .application-layout-style, .PORTLET-FRAGMENT:not(.no-layout-style):not(.no-layout-dimension) {
min-height: ~"var(--appMinHeight, unset) !important";
height: ~"var(--appHeight, unset) !important";
max-height: ~"var(--appMaxHeight, unset) !important";
width: ~"var(--appWidth, auto) !important";
max-width: ~"var(--appWidth, unset) !important";
overflow-y: ~"var(--appHeightScroll, unset) !important";
overflow-x: ~"var(--appWidthScroll, unset) !important";
}

.VuetifyApp .layout-sections-parent {

&.singlePageApplication {
Expand All @@ -34,7 +142,7 @@
padding-bottom: 10px;
}
.layout-section-content {
width: @singlePageApplicationWidth;
width: @pageWidth;
max-width: 100%;
}
}
Expand All @@ -43,18 +151,6 @@
.PORTLET-FRAGMENT {
/* Scrollbar style */
.specific-scrollbar();
border-top-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
border-bottom-right-radius: ~"var(--appBorderRadiusBottomRight, var(--allPagesBorderRadius, 4px)) !important";
border-bottom-left-radius: ~"var(--appBorderRadiusBottomLeft, var(--allPagesBorderRadius, 4px)) !important";
border: ~"var(--appBorderSize, 0) solid var(--appBorderColor, transparent) !important";
box-shadow: ~"var(--appBoxShadow, none) !important";
height: ~"var(--appHeight, auto) !important";
max-height: ~"var(--appHeight, 100%) !important";
width: ~"var(--appWidth, auto) !important";
max-width: ~"var(--appWidth, unset) !important";
overflow-y: ~"var(--appHeightScroll, unset) !important";
overflow-x: ~"var(--appWidthScroll, unset) !important";
padding-bottom: 0;
margin-bottom: 0;

Expand All @@ -79,14 +175,14 @@
}
.layout-section-content {
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
padding-left: var(--allPagesSinglePageApplicationPadding, 20px);
padding-right: var(--allPagesSinglePageApplicationPadding, 20px);
padding-top: var(--sectionMarginTop, 10px);
padding-bottom: var(--sectionMarginBottom, 10px);
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
margin-left: var(--allPagesSinglePageApplicationMargin, auto);
margin-right: var(--allPagesSinglePageApplicationMargin, auto);
}

.grid-cell {
Expand Down Expand Up @@ -114,6 +210,7 @@
float: unset; // FIXME: WebUI Workaround until cleanup made
min-height: unset; // FIXME: WebUI Workaround until cleanup made
margin-left: unset; // FIXME: WebUI Workaround until cleanup made

.layout-application {
padding-bottom: ~"var(--grid-layout-gap, 20px)";
}
Expand Down
Loading

0 comments on commit 28ecfc6

Please sign in to comment.