From b44335d903fb80379d89d902f699c79d464bf345 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Fri, 18 Mar 2022 15:29:00 +0300 Subject: [PATCH] Refactoring less-styles v1 --- .../mobile/resources/less/comments.less | 4 + .../mobile/resources/less/common-ios.less | 108 ---------------- .../resources/less/common-material.less | 116 +----------------- apps/common/mobile/resources/less/common.less | 90 ++++++++++++++ .../mobile/resources/less/ios/_about.less | 38 ------ .../mobile/resources/less/ios/_dataview.less | 35 ------ .../mobile/resources/less/ios/comments.less | 4 - .../resources/less/material/_about.less | 38 ------ .../resources/less/material/_dataview.less | 32 ----- .../resources/less/material/comments.less | 4 - .../mobile/src/less/app-ios.less | 24 ---- .../mobile/src/less/app-material.less | 24 ---- apps/documenteditor/mobile/src/less/app.less | 24 ++++ 13 files changed, 122 insertions(+), 419 deletions(-) delete mode 100644 apps/common/mobile/resources/less/ios/_about.less delete mode 100644 apps/common/mobile/resources/less/ios/_dataview.less delete mode 100644 apps/common/mobile/resources/less/material/_about.less delete mode 100644 apps/common/mobile/resources/less/material/_dataview.less diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index fb2945ff8..804867be3 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -6,6 +6,10 @@ .wrap-comment { padding: 16px 24px 0 16px; + background-color: @background-tertiary; + .comment-date { + color: @text-secondary; + } .name { font-weight: 600; font-size: 16px; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 075362774..a6c00d4b4 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -89,15 +89,6 @@ .popover__titled { .list { - ul { - background-color: var(--f7-list-bg-color); - li:first-child, li:last-child { - border-radius: 0; - a { - border-radius: 0; - } - } - } &:first-child, &:last-child { ul { border-radius: 0; @@ -137,10 +128,6 @@ .list:last-child { li:last-child { - a { - //border-radius: 0; - } - &:after { content: ''; position: absolute; @@ -163,70 +150,6 @@ } } - // Bullets, numbers and multilevels - .bullets, - .numbers, - .multilevels { - .list{ - margin: 5px; - ul { - &:before, &:after { - display: none; - } - display: flex; - justify-content: space-around; - width: 100%; - margin-top: 10px; - padding: 0 5px; - background: none; - } - &:first-child li:first-child, &:last-child li:last-child { - border-radius: 0; - } - &:last-child li:last-child:after { - display: none; - } - } - - .list .item-content { - padding-left: 0; - min-height: 68px; - .item-inner{ - padding: 0; - &:after { - display: none; - } - } - } - - li { - width: 70px; - height: 70px; - border: 1px solid #c4c4c4; - html.pixel-ratio-2 & { - border: 0.5px solid #c4c4c4; - } - html.pixel-ratio-3 & { - border: 0.33px solid #c4c4c4; - } - - .thumb { - width: 100%; - height: 100%; - background-color: @fill-white; - background-size: cover; - - label { - width: 100%; - text-align: center; - position: absolute; - top: 34%; - color: @fill-black; - } - } - } - } - .popover { li:last-child { .segmented a { @@ -250,9 +173,6 @@ } .list { - li { - color: @text-normal; - } .item-content { .color-preview { width: 22px; @@ -261,9 +181,6 @@ margin-top: 21px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; - &.auto { - background-color: @autoColor; - } } .item-after { .color-preview { @@ -273,22 +190,9 @@ } } } - li.no-indicator { - .item-link { - .item-inner { - padding-right: 15px; - &:before { - content: none; - } - } - } - } .item-inner { - color: @text-normal; padding-top: 7px; - color: @text-normal; .item-after { - color: @text-normal; .after-start { margin: 0 5px; } @@ -315,11 +219,6 @@ display: flex; align-items: center; justify-content: center; - &.active { - color: @brandColor; - // background-color: var(--button-active-opacity); - background-color: @button-active-opacity; - } } } } @@ -396,13 +295,6 @@ font-family: inherit; cursor: pointer; outline: 0; - &.active { - background: @brandColor; - color: @fill-white; - i.icon { - background-color: @fill-white; - } - } } .button-fill { diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index b11b1d372..2f182eb0a 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -263,29 +263,6 @@ } // List .list { - li { - color: @text-normal; - } - .item-inner { - color: @text-normal; - } - li.no-indicator { - .item-link { - .item-inner{ - padding-right: 15px; - &:before { - content: none; - } - } - } - } - .item-link { - .item-inner { - .item-after { - color: @text-normal; - } - } - } &.inputs-list { .item-input, .item-link { .item-inner { @@ -324,14 +301,6 @@ &:first-child { margin-left: 0; } - &.active { - color: @brandColor; - // background-color: var(--button-active-opacity); - background-color: @button-active-opacity; - // i.icon { - // background-color: @white; - // } - } } } } @@ -345,82 +314,6 @@ margin-top: -3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; background: @fill-white; - &.auto { - background-color: @autoColor; - } - } - } - } - // Bullets, numbers and multilevels - .bullets, - .numbers, - .multilevels { - .list{ - margin: 5px; - ul { - background: none; - &:before, &:after { - display: none; - } - display: flex; - justify-content: space-around; - width: 100%; - margin-top: 10px; - padding: 0 5px; - } - &:first-child li:first-child, &:last-child li:last-child { - border-radius: 0; - } - } - - .list .item-content { - padding-left: 0; - min-height: 68px; - .item-inner{ - padding: 0; - &:after { - display: none; - } - } - } - - li { - width: 70px; - height: 70px; - border: 1px solid @gray; - html.pixel-ratio-2 & { - border: 0.5px solid @gray; - } - html.pixel-ratio-3 & { - border: 0.33px solid @gray; - } - - .thumb { - width: 100%; - height: 100%; - background-color: @fill-white; - background-size: cover; - - label { - width: 100%; - text-align: center; - position: absolute; - top: 34%; - color: @fill-black; - } - } - } - } - .popover__titled { - .list { - ul { - background-color: var(--f7-list-bg-color); - li:first-child, li:last-child { - border-radius: 0; - a { - border-radius: 0; - } - } } } } @@ -517,12 +410,11 @@ background-size: 24px 24px; transition-duration: .3s; .encoded-svg-background(''); + &::placeholder { + color: @fill-white; + } } - - .searchbar input::placeholder { - color: @fill-white; - } - + .navbar { .searchbar-expandable.searchbar-enabled { top: 0; diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 6669e9cbf..3cf3594fd 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -88,6 +88,16 @@ } .list { + li.no-indicator { + .item-link { + .item-inner{ + padding-right: 15px; + &:before { + content: none; + } + } + } + } .item-text { text-overflow: initial; white-space: normal; @@ -98,6 +108,86 @@ .font-item img { filter: var(--image-border-types-filter, none) } + .buttons { + .button.active { + background-color: @button-active-opacity; + } + } + .item-content { + .color-preview.auto { + background-color: @autoColor; + } + } +} +// Bullets, numbers and multilevels + .bullets, + .numbers, + .multilevels { + .list{ + margin: 5px; + ul { + background: none; + &:before, &:after { + display: none; + } + display: flex; + justify-content: space-around; + width: 100%; + margin-top: 10px; + padding: 0 5px; + + li { + width: 70px; + height: 70px; + border: 1px solid @gray; + html.pixel-ratio-2 & { + border: 0.5px solid @gray; + } + html.pixel-ratio-3 & { + border: 0.33px solid @gray; + } + + .thumb { + width: 100%; + height: 100%; + background-color: @fill-white; + background-size: cover; + + label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; + color: @fill-black; + } + } + } + } + } + + .row.list .item-content { + padding-left: 0; + min-height: 68px; + .item-inner{ + padding: 0; + &:after { + display: none; + } + } + } +} + +.popover__titled .popover-inner{ + .list { + ul { + background-color: var(--f7-list-bg-color); + li:first-child, li:last-child { + a { + border-radius: 0; + } + } + } + } } .shapes { diff --git a/apps/common/mobile/resources/less/ios/_about.less b/apps/common/mobile/resources/less/ios/_about.less deleted file mode 100644 index 28d7460f2..000000000 --- a/apps/common/mobile/resources/less/ios/_about.less +++ /dev/null @@ -1,38 +0,0 @@ -// About -.about { - .page-content { - text-align: center; - } - - .content-block:first-child { - margin: 15px 0; - } - - .content-block { - margin: 0 auto 15px; - - a { - color: #000; - } - } - - h3 { - font-weight: normal; - margin: 0; - - &.vendor { - color: #000; - font-weight: bold; - margin-top: 15px; - } - } - - p > label { - margin-right: 5px; - } - - .logo { - background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center; - margin-top: 20px; - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_dataview.less b/apps/common/mobile/resources/less/ios/_dataview.less deleted file mode 100644 index 6ddb04406..000000000 --- a/apps/common/mobile/resources/less/ios/_dataview.less +++ /dev/null @@ -1,35 +0,0 @@ -// Data view - -.dataview { - &.page-content { - background: @white; - } - - .row { - justify-content: space-around; - } - - ul { - padding: 0 10px; - list-style: none; - - li { - display: inline-block; - } - } - - .active { - position: relative; - z-index: 1; - - &::after { - content: ''; - position: absolute; - width: 22px; - height: 22px; - right: -5px; - bottom: -5px; - .encoded-svg-background(''); - } - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/comments.less b/apps/common/mobile/resources/less/ios/comments.less index cde7c1f88..a00df23c6 100644 --- a/apps/common/mobile/resources/less/ios/comments.less +++ b/apps/common/mobile/resources/less/ios/comments.less @@ -1,10 +1,6 @@ .device-ios { .wrap-comment { height: calc(100% - 60px); - background-color: @background-tertiary; - .comment-date { - color: @text-secondary; - } } .add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog { .wrap-textarea { diff --git a/apps/common/mobile/resources/less/material/_about.less b/apps/common/mobile/resources/less/material/_about.less deleted file mode 100644 index ce52c8b3e..000000000 --- a/apps/common/mobile/resources/less/material/_about.less +++ /dev/null @@ -1,38 +0,0 @@ -// About - -.about { - .page-content { - text-align: center; - } - - .content-block:first-child { - margin: 15px 0; - } - - .content-block { - margin: 0 auto 15px; - - a { - color: #000; - } - } - - h3 { - font-weight: normal; - margin: 0; - - &.vendor { - color: #000; - font-weight: bold; - margin-top: 15px; - } - } - - p > label { - margin-right: 5px; - } - - .logo { - background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center; - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_dataview.less b/apps/common/mobile/resources/less/material/_dataview.less deleted file mode 100644 index fca18dbd7..000000000 --- a/apps/common/mobile/resources/less/material/_dataview.less +++ /dev/null @@ -1,32 +0,0 @@ -// Data view - -.dataview { - .row { - justify-content: space-around; - } - - ul { - padding: 0 10px; - list-style: none; - justify-content: space-around; - - li { - display: inline-block; - } - } - - .active { - position: relative; - z-index: 1; - - &::after { - content: ''; - position: absolute; - width: 22px; - height: 22px; - right: -5px; - bottom: -5px; - .encoded-svg-background(''); - } - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/comments.less b/apps/common/mobile/resources/less/material/comments.less index 98bd8ec3a..4b877c191 100644 --- a/apps/common/mobile/resources/less/material/comments.less +++ b/apps/common/mobile/resources/less/material/comments.less @@ -1,10 +1,6 @@ .device-android { .wrap-comment { height: calc(100% - 72px); - background-color: @background-tertiary; - .comment-date { - color: @text-secondary; - } } .add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog { .wrap-textarea { diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index 3e5723b45..3d5e10cf2 100644 --- a/apps/documenteditor/mobile/src/less/app-ios.less +++ b/apps/documenteditor/mobile/src/less/app-ios.less @@ -40,27 +40,3 @@ } } -// Color Schemes - -.color-schemes-menu { - cursor: pointer; - display: block; - // background-color: #fff; - .item-inner { - justify-content: flex-start; - } - .color-schema-block { - display: flex; - } - .color { - min-width: 26px; - min-height: 26px; - margin: 0 2px 0 0; - box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; - } - .item-title { - margin-left: 20px; - // color: #212121; - } -} - diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less index 46ad54346..94f23a84f 100644 --- a/apps/documenteditor/mobile/src/less/app-material.less +++ b/apps/documenteditor/mobile/src/less/app-material.less @@ -86,28 +86,4 @@ } } } -} - -// Color Schemes - -.color-schemes-menu { - cursor: pointer; - display: block; - // background-color: #fff; - .item-inner { - justify-content: flex-start; - } - .color-schema-block { - display: flex; - } - .color { - min-width: 26px; - min-height: 26px; - margin: 0 2px 0 0; - box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; - } - .item-title { - margin-left: 20px; - // color: #212121; - } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 6d323cd7f..7a4c94c7c 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -160,6 +160,30 @@ height: 50px; } +// Color Schemes + +.color-schemes-menu { + cursor: pointer; + display: block; + // background-color: #fff; + .item-inner { + justify-content: flex-start; + } + .color-schema-block { + display: flex; + } + .color { + min-width: 26px; + min-height: 26px; + margin: 0 2px 0 0; + box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; + } + .item-title { + margin-left: 20px; + // color: #212121; + } +} + // Picker .row-picker {