From 6002fd9f55aedc71c97b1e8f5b354e5036733259 Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Tue, 10 Sep 2024 18:38:15 +0100 Subject: [PATCH 1/6] feat: Hide section in Mobile when empty - MEED-7442 - Meeds-io/MIPs#147 (#826) --- .../webapp/skin/less/core/layout/pagelayout.less | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less b/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less index 820e3d92f..3a3563401 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/layout/pagelayout.less @@ -137,12 +137,6 @@ padding: 0; .layout-section { width: 100%; - &:first-of-type { - padding-top: 10px; - } - &:last-of-type { - padding-bottom: 10px; - } .layout-section-content { width: @pageWidth; max-width: 100%; @@ -256,6 +250,13 @@ @media (max-width: @maxTabletWidth) { .VuetifyApp .layout-sections-parent { + .layout-section:not(.hidden-sm-and-down) { + padding-top: 10px; + } + .layout-section:not(.hidden-sm-and-down) ~ .layout-section:not(.hidden-sm-and-down) { + padding-top: 0; + } + .flex-cell:has(.layout-application), .grid-cell:has(.layout-application) { padding-bottom: ~"var(--grid-layout-gap, 20px)"; } From a4ecb80224f50f8709f131bc244fd8eeb872d06b Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Tue, 10 Sep 2024 20:15:23 +0100 Subject: [PATCH 2/6] feat: Add line height CSS helpers - MEED-7443 - Meeds-io/MIPs#147 --- .../src/main/webapp/skin/less/core/helpers.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less index 22fae8b94..5f86ec319 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less @@ -156,6 +156,15 @@ .dark-grey-color{ color: @darkGrey!important; } +.line-height-normal { + line-height: normal !important; +} +.line-height-revert { + line-height: revert !important; +} +.line-height-1 { + line-height: 1 !important; +} .dark-yellow--color { color: @darkYellow !important; } From a14c70903ec6077f62764ea68f3886cbc4553380 Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Thu, 12 Sep 2024 16:43:52 +0100 Subject: [PATCH 3/6] fix: Fix Text Input style when no type attribute - MEED-7469 - Meeds-io/MIPs#147 (#827) Prior to this change when adding an input text without explicit type (= text input), the style of a text input isn't zpplied. This change will include the input without specific type to be considered as a text input style. --- platform-ui-skin/src/main/webapp/skin/less/core/reset.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/reset.less b/platform-ui-skin/src/main/webapp/skin/less/core/reset.less index 8ef836481..00fc326c7 100755 --- a/platform-ui-skin/src/main/webapp/skin/less/core/reset.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/reset.less @@ -116,6 +116,7 @@ input[type="search"]::-webkit-search-cancel-button { } select, textarea, +input:not([type]), input[type="text"], input[type="password"], input[type="datetime"], @@ -134,7 +135,6 @@ input[type="color"] { color: @inputColor; background-color: @inputBackground; border: 1px solid @inputBorder; - padding: 4px 6px; padding: 0 10px; margin-bottom: @baseLineHeight / 2; font-size: @inputFontSize; From ef97dc12fdf11611fd81bb004a9f9852b161714e Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Mon, 16 Sep 2024 16:49:49 +0100 Subject: [PATCH 4/6] feat: Add CSS helper for table-layout:auto property - MEED-7448 - Meeds-io/MIPs#147 (#830) --- platform-ui-skin/src/main/webapp/skin/less/core/helpers.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less index 5f86ec319..d867e8487 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less @@ -871,6 +871,11 @@ max-height: 36px; max-width: 36px; } +.table-layout-auto { + &, table { + table-layout: auto !important; + } +} .VuetifyApp .v-application .reset-style-box { div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, From 8831baefb87ef0787cceb4a5569920ebd44cb376 Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Thu, 19 Sep 2024 11:09:53 +0100 Subject: [PATCH 5/6] fix: Fix Space Avatar Style - MEED-7490 - Meeds-io/MIPs#147 (#832) --- .../main/webapp/skin/less/core/components/Mention/Style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/components/Mention/Style.less b/platform-ui-skin/src/main/webapp/skin/less/core/components/Mention/Style.less index e200caecf..9353d8ea0 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/components/Mention/Style.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/components/Mention/Style.less @@ -76,7 +76,7 @@ .spaceAvatar { border-radius: 5px !important; - > div { + > div, img { border-radius: 5px !important; } } From 9ab646a6da67eb5d2d50be1bff766b948ba0e4be Mon Sep 17 00:00:00 2001 From: Boubaker Khanfir Date: Fri, 20 Sep 2024 15:18:36 +0100 Subject: [PATCH 6/6] feat: Add Placeholder CSS Helper and adjust color - MEED-7502 - Meeds-io/MIPs#147 (#834) --- .../main/webapp/skin/less/core/helpers.less | 9 +++++++++ .../src/main/webapp/skin/less/variables.less | 5 ++--- .../webapp/skin/less/vuetify/lib/README.txt | 1 + .../webapp/skin/less/vuetify/lib/vuetify.less | 20 +++++++++---------- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less index d867e8487..f3a7a6af8 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less @@ -871,6 +871,15 @@ max-height: 36px; max-width: 36px; } +.input-placeholder { + &[placeholder]:empty::before { + color: @placeholderText; + content: attr(placeholder); + } + &[placeholder]:empty:focus::before { + content: ""; + } +} .table-layout-auto { &, table { table-layout: auto !important; diff --git a/platform-ui-skin/src/main/webapp/skin/less/variables.less b/platform-ui-skin/src/main/webapp/skin/less/variables.less index 4b870ff7d..bec0b7537 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/variables.less +++ b/platform-ui-skin/src/main/webapp/skin/less/variables.less @@ -188,6 +188,8 @@ @textDisabledColorDefault: #c6c6c6; @textDisabledColor: ~"var(--appTextDisabledColor, var(--allPagesBaseTextDisabledColor, @{textDisabledColorDefault}))"; +@placeholderText: rgba(0, 0, 0, 0.38); + // Links // ------------------------- @linkColor: @primaryColor; // Special title, text, hover, press, hyper-link or selected link @@ -245,9 +247,6 @@ @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @primaryBackgroundHover; @formActionsBackground: @primaryBackground; -// Input placeholder text color -// ------------------------- -@placeholderText: @textLightColor; @inputFocusColor: @inputColor; @inputFocusBorder: var(--allPagesInputFocusBorder, lighten(@secondaryColorDefault, 30%)); diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt index d218e7a0d..0dbdd8f1b 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt +++ b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt @@ -28,3 +28,4 @@ Modifications applied on imported libraries: - Change color to use @menuTextColor on .v-tab - Delete .v-card--link focus background to not have grey background once clicked - Fix .v-list-item__title & .v-list-item__subtitle line-height in dense configuration + - Change rgba(0, 0, 0, 0.38) by @placeholderText variable in :placeholder style diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less index ca255e0c1..008b3d36c 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less +++ b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less @@ -18808,19 +18808,19 @@ html.overflow-y-hidden { color: @textColor; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-moz-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot .v-label { color: @textSubtitleColor; @@ -20387,23 +20387,23 @@ html.overflow-y-hidden { } .theme--light.v-input input::-webkit-input-placeholder, .theme--light.v-input textarea::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::-moz-placeholder, .theme--light.v-input textarea::-moz-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input:-ms-input-placeholder, .theme--light.v-input textarea:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::-ms-input-placeholder, .theme--light.v-input textarea::-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::placeholder, .theme--light.v-input textarea::placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input--is-disabled { color: @textDisabledColor;