From b44335d903fb80379d89d902f699c79d464bf345 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Fri, 18 Mar 2022 15:29:00 +0300 Subject: [PATCH 1/3] 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 { From 6902c6b58bea5f5d9a116d8e54ae62390a46f5b4 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Mon, 21 Mar 2022 14:37:49 +0300 Subject: [PATCH 2/3] Delete '_.less' --- .../mobile/resources/less/ios/_button.less | 8 - .../resources/less/ios/_collaboration.less | 460 ---------------- .../resources/less/ios/_color-palette.less | 171 ------ .../resources/less/ios/_color-schema.less | 21 - .../mobile/resources/less/ios/_container.less | 117 ---- .../resources/less/ios/_contextmenu.less | 95 ---- .../mobile/resources/less/ios/_listview.less | 93 ---- .../resources/less/material/_button.less | 9 - .../less/material/_collaboration.less | 507 ------------------ .../less/material/_color-palette.less | 175 ------ .../less/material/_color-schema.less | 21 - .../resources/less/material/_container.less | 77 --- .../resources/less/material/_contextmenu.less | 29 - .../resources/less/material/_listview.less | 73 --- 14 files changed, 1856 deletions(-) delete mode 100644 apps/common/mobile/resources/less/ios/_button.less delete mode 100644 apps/common/mobile/resources/less/ios/_collaboration.less delete mode 100644 apps/common/mobile/resources/less/ios/_color-palette.less delete mode 100644 apps/common/mobile/resources/less/ios/_color-schema.less delete mode 100644 apps/common/mobile/resources/less/ios/_container.less delete mode 100644 apps/common/mobile/resources/less/ios/_contextmenu.less delete mode 100644 apps/common/mobile/resources/less/ios/_listview.less delete mode 100644 apps/common/mobile/resources/less/material/_button.less delete mode 100644 apps/common/mobile/resources/less/material/_collaboration.less delete mode 100644 apps/common/mobile/resources/less/material/_color-palette.less delete mode 100644 apps/common/mobile/resources/less/material/_color-schema.less delete mode 100644 apps/common/mobile/resources/less/material/_container.less delete mode 100644 apps/common/mobile/resources/less/material/_contextmenu.less delete mode 100644 apps/common/mobile/resources/less/material/_listview.less diff --git a/apps/common/mobile/resources/less/ios/_button.less b/apps/common/mobile/resources/less/ios/_button.less deleted file mode 100644 index da6c4d105..000000000 --- a/apps/common/mobile/resources/less/ios/_button.less +++ /dev/null @@ -1,8 +0,0 @@ -// Active button icon color -.button { - &.active { - i.icon { - background-color: #fff; - } - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_collaboration.less b/apps/common/mobile/resources/less/ios/_collaboration.less deleted file mode 100644 index e55a265a7..000000000 --- a/apps/common/mobile/resources/less/ios/_collaboration.less +++ /dev/null @@ -1,460 +0,0 @@ -.page-change { - background-color: @fill-white; - .block-description { - background-color: @fill-white; - padding-top: 15px; - padding-bottom: 15px; - margin: 0; - max-width: 100%; - word-wrap: break-word; - } - #user-name { - font-size: 17px; - line-height: 22px; - color: @fill-black; - margin: 0; - } - #date-change { - font-size: 14px; - line-height: 18px; - color: @text-tertiary; - margin: 0; - margin-top: 3px; - } - #text-change { - color: @fill-black; - font-size: 15px; - line-height: 20px; - margin: 0; - margin-top: 10px; - } - .block-btn, .content-block.block-btn:first-child { - position: absolute; - bottom: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - width: 100%; - height: 44px; - align-items: center; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2); - - #btn-reject-change { - margin-left: 20px; - } - #btn-goto-change { - margin-left: 10px; - } - .change-buttons, .accept-reject { - display: flex; - } - .next-prev { - display: flex; - .link { - width: 44px; - } - } - .link { - position: relative; - display: flex; - justify-content: center; - align-items: center; - font-size: 17px; - height: 44px; - min-width: 44px; - } - } - #no-changes { - padding: 16px; - } -} -.navbar .center-collaboration { - display: flex; - justify-content: space-around; -} -.container-collaboration { - .navbar .right.close-collaboration { - position: absolute; - right: 10px; - } - .page-content .list-block:first-child { - margin-top: -1px; - } -} - -//Display mode -.page-display-mode[data-page="display-mode-view"] { - .list-block { - li.media-item { - .item-title { - font-weight: normal; - } - .item-subtitle { - font-size: 14px; - color: @gray; - } - } - } -} - -//Edit users -@initialEditUser: #373737; - -#user-list { - .item-content { - padding-left: 0; - } - .item-inner { - justify-content: flex-start; - padding-left: 15px; - } - .length { - margin-left: 4px; - } - .color { - min-width: 40px; - min-height: 40px; - margin-right: 20px; - text-align: center; - border-radius: 50px; - line-height: 40px; - color: @initialEditUser; - font-weight: 500; - - } - ul:before { - content: none; - } -} - -//Comments -.page-comments, .add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .page-edit-comment, .page-add-reply, .page-edit-reply { - .header-comment { - display: flex; - justify-content: space-between; - padding-right: 16px; - .comment-right { - display: flex; - justify-content: space-between; - width: 70px; - } - } - .list-block .item-inner { - display: block; - padding: 16px 0; - word-wrap: break-word; - } - - .list-reply { - padding-left: 26px; - } - .reply-textarea, .comment-textarea, .edit-reply-textarea { - resize: vertical; - } - .user-name { - font-size: 17px; - line-height: 22px; - color: @fill-black; - margin: 0; - font-weight: bold; - } - .comment-date, .reply-date { - font-size: 13px; - line-height: 18px; - color: @text-secondary; - margin: 0; - margin-top: 0px; - } - .comment-text, .reply-text { - color: @fill-black; - font-size: 15px; - line-height: 25px; - margin: 0; - max-width: 100%; - padding-right: 15px; - pre { - white-space: pre-wrap; - } - } - .reply-item { - margin-top: 15px; - padding-right: 16px; - padding-top: 13px; - .header-reply { - display: flex; - justify-content: space-between; - } - .user-name { - padding-top: 3px; - } - &:before { - content: ''; - position: absolute; - left: auto; - bottom: 0; - right: auto; - top: 0; - height: 1px; - width: 100%; - background-color: @listBlockBorderColor; - display: block; - z-index: 15; - -webkit-transform-origin: 50% 100%; - transform-origin: 50% 100%; - } - } - .comment-quote { - color: @text-secondary; - border-left: 1px solid @text-secondary; - padding-left: 10px; - padding-right: 16px; - margin: 5px 0; - font-size: 15px; - } - - .wrap-comment, .wrap-reply { - padding: 16px 24px 0 16px; - } - .comment-textarea, .reply-textarea, .edit-reply-textarea { - margin-top: 10px; - background:transparent; - outline:none; - width: 100%; - font-size: 17px; - border: none; - border-radius: 3px; - min-height: 100px; - } -} -.settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { - display: none; -} - -.container-edit-comment { - .page { - background-color: @fill-white; - } -} - -//view comment -.container-view-comment { - position: fixed; - -webkit-transition: height 100ms; - transition: height 120ms; - background-color: #FFFFFF; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - height: 50%; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12); - .pages { - background-color: #FFFFFF; - } - .page-view-comments { - background-color: #FFFFFF; - .list-block { - margin-bottom: 100px; - ul:before, ul:after { - content: none; - } - .item-inner { - padding: 0; - } - } - - } - .toolbar { - position: fixed; - background-color: #FFFFFF; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); - &:before { - content: none; - } - .toolbar-inner { - display: flex; - justify-content: space-between; - padding: 0 16px; - .button-left { - min-width: 80px; - } - .button-right { - min-width: 62px; - display: flex; - justify-content: space-between; - a { - padding: 0 12px; - } - } - } - } - .swipe-container { - display: flex; - justify-content: center; - height: 40px; - .icon-swipe { - margin-top: 8px; - width: 40px; - height: 4px; - background: rgba(0, 0, 0, 0.12); - border-radius: 2px; - } - } - .list-block { - margin-top: 0; - } - &.popover { - position: absolute; - border-radius: 4px; - min-height: 170px; - height: 400px; - max-height: 600px; - - .toolbar { - position: absolute; - border-radius: 0 0 4px 4px; - .toolbar-inner { - padding-right: 0; - } - } - - .pages { - position: absolute; - - .page { - border-radius: 13px; - - .page-content { - padding: 16px; - padding-bottom: 80px; - - .list-block { - margin-bottom: 0px; - - .item-content { - padding-left: 0; - - .header-comment, .reply-item { - padding-right: 0; - } - } - } - - .block-reply { - margin-top: 10px; - - .reply-textarea { - min-height: 70px; - width: 278px; - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 5px; - } - } - - .edit-reply-textarea { - min-height: 60px; - width: 100%; - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 5px; - height: 60px; - margin-top: 10px; - } - - .comment-text { - padding-right: 0; - - .comment-textarea { - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 8px; - min-height: 80px; - height: 80px; - } - } - } - } - } - - } -} - -#done-comment { - color: @brandColor; -} -.page-add-comment { - background-color: @fill-white; - .wrap-comment, .wrap-reply { - padding: 16px 24px 0 16px; - .header-comment { - justify-content: flex-start; - } - .user-name { - font-weight: bold; - font-size: 17px; - padding-left: 5px; - } - .comment-date { - font-size: 13px; - color: @text-secondary; - padding-left: 5px; - } - .wrap-textarea { - margin-top: 16px; - padding-right: 6px; - .comment-textarea { - font-size: 17px; - border: none; - margin-top: 0; - min-height: 100px; - border-radius: 4px; - width: 100%; - padding-left: 5px; - &::placeholder { - color: @gray; - font-size: 17px; - } - } - } - } -} -.container-add-reply { - height: 100%; - .navbar { - a.link i + span { - margin-left: 0; - } - } - .page { - background-color: #FFFFFF; - } -} - -.actions-modal-button.color-red { - color: @red; -} - -.page-edit-comment, .page-add-reply, .page-edit-reply { - background-color: #FFFFFF; - .header-comment { - justify-content: flex-start; - } - .navbar { - .right { - height: 100%; - #add-reply, #edit-comment, #edit-reply { - display: flex; - align-items: center; - padding-left: 16px; - padding-right: 16px; - height: 100%; - } - } - } -} - -.container-edit-comment { - position: fixed; - -} - diff --git a/apps/common/mobile/resources/less/ios/_color-palette.less b/apps/common/mobile/resources/less/ios/_color-palette.less deleted file mode 100644 index b9c504f21..000000000 --- a/apps/common/mobile/resources/less/ios/_color-palette.less +++ /dev/null @@ -1,171 +0,0 @@ -// Color palette - -.color-palette { - a { - flex-grow: 1; - position: relative; - min-width: 10px; - min-height: 26px; - margin: 1px 1px 0 0; - box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; - - &.active { - &:after { - content:' '; - position: absolute; - width: 100%; - height: 100%; - box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; - z-index: 1; - border-radius: 1px; - } - } - - &.transparent { - background-repeat: no-repeat; - background-size: 100% 100%; - .encoded-svg-background(""); - } - } - - .theme-colors { - .item-inner { - display: inline-block; - overflow: visible; - } - } - - .standart-colors, .dynamic-colors { - .item-inner { - overflow: visible; - } - } -} - -.custom-colors { - display: flex; - justify-content: space-around; - align-items: center; - margin: 15px; - &.phone { - max-width: 300px; - margin: 0 auto; - margin-top: 4px; - .button-round { - margin-top: 20px; - } - } - .right-block { - margin-left: 20px; - } - .button-round { - height: 72px; - width: 72px; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - border-radius: 100px; - background-color: #ffffff; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: transparent; - margin-top: 25px; - &.active-state { - background-color: rgba(0, 0, 0, 0.1); - } - } - .color-hsb-preview { - width: 72px; - height: 72px; - border-radius: 100px; - overflow: hidden; - border: 1px solid #c4c4c4; - } - .new-color-hsb-preview { - width: 100%; - height: 36px; - } - .current-color-hsb-preview { - width: 100%; - height: 36px; - } - .list-block ul:before, .list-block ul:after { - content: none; - } - .list-block ul li { - border: 1px solid rgba(0, 0, 0, 0.3); - } - .color-picker-wheel { - position: relative; - width: 290px; - max-width: 100%; - height: auto; - font-size: 0; - - svg { - width: 100%; - height: auto; - } - - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); - position: absolute; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); - background: red; - border-radius: 50%; - left: 0; - top: 0; - } - - .color-picker-sb-spectrum { - background-color: #000; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); - position: relative; - width: 45%; - height: 45%; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; - } - - .color-picker-sb-spectrum-handle { - width: 4px; - height: 4px; - position: absolute; - left: -2px; - top: -2px; - z-index: 1; - - &:after { - background-color: inherit; - content: ''; - position: absolute; - width: 16px; - height: 16px; - border: 1px solid #fff; - border-radius: 50%; - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); - box-sizing: border-box; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - transition: 150ms; - transition-property: transform; - transform-origin: center; - } - - &.color-picker-sb-spectrum-handle-pressed:after { - transform: scale(1.5) translate(-33.333%, -33.333%); - } - } - } -} - -#font-color-auto.active .color-auto { - box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; - border-radius: 1px; -} diff --git a/apps/common/mobile/resources/less/ios/_color-schema.less b/apps/common/mobile/resources/less/ios/_color-schema.less deleted file mode 100644 index 2c4dc2449..000000000 --- a/apps/common/mobile/resources/less/ios/_color-schema.less +++ /dev/null @@ -1,21 +0,0 @@ -.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, 0.15) inset; - } - .text { - margin-left: 20px; - color: #212121; - } -} diff --git a/apps/common/mobile/resources/less/ios/_container.less b/apps/common/mobile/resources/less/ios/_container.less deleted file mode 100644 index 3d1885edf..000000000 --- a/apps/common/mobile/resources/less/ios/_container.less +++ /dev/null @@ -1,117 +0,0 @@ -// Container -.phone.ios { - .container-edit, - .container-collaboration, - .container-filter { - .navbar { - .hairline(top, @toolbarBorderColor); - } - - .page-content { - .list-block:first-child { - margin-top: -1px; - } - } - } -} - -.container-edit, -.container-add, -.container-settings, -.container-collaboration, -.container-filter { - &.popover { - width: 360px; - } -} - -.settings { - &.popup, - &.popover { - .list-block { - - ul { - border-radius: 0 !important; - background: #fff; - - &:last-child { - .hairline(bottom, @listBlockBorderColor); - } - } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 30px; - } - - li:first-child a, - li:last-child a { - border-radius: 0 !important; - } - } - - &, - .popover-inner { - > .content-block { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - color: #000; - } - } - - .popover-view { - border-radius: 13px; - - > .pages { - border-radius: 13px; - } - } - - .content-block:first-child { - margin-top: 0; - .content-block-inner { - &:before { - height: 0; - } - } - } - } - - .categories { - width: 100%; - - > .buttons-row { - width: 100%; - - .button { - padding: 0 1px; - } - } - } - - .popover-inner { - height: 400px; - } -} - -.container-add { - .categories { - > .buttons-row { - .button { - &.active { - i.icon { - background-color: transparent; - } - } - display: flex; - justify-content: center; - align-items: center; - } - } - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_contextmenu.less b/apps/common/mobile/resources/less/ios/_contextmenu.less deleted file mode 100644 index 9528ee37e..000000000 --- a/apps/common/mobile/resources/less/ios/_contextmenu.less +++ /dev/null @@ -1,95 +0,0 @@ -// Context menu - -.document-menu { - @contextMenuBg: rgba(0,0,0,0.9); - @modalHairlineColor: rgba(230,230,230,0.9); - @modalButtonColor : rgba(200,200,200,0.9); - - background-color: @contextMenuBg; - width: auto; - border-radius: 8px; - z-index: 12500; - - .popover-angle { - &:after { - background: @contextMenuBg; - } - } - - .list-block { - font-size: 14px; - white-space: pre; - - &:first-child { - ul { - .hairline-remove(left); - border-radius: 7px 0 0 7px; - } - li:first-child a{ - border-radius: 7px 0 0 7px; - } - } - &:last-child { - ul { - .hairline-remove(right); - border-radius: 0 7px 7px 0; - } - li:last-child a{ - border-radius: 0 7px 7px 0; - } - } - &:first-child:last-child { - li:first-child:last-child a, ul:first-child:last-child { - border-radius: 7px; - } - } - - .item-link { - display: inline-block; - - html:not(.watch-active-state) &:active, &.active-state { - //.transition(0ms); - background-color: #d9d9d9; - .item-inner { - .hairline-color(right, transparent); - } - } - - html.phone & { - padding: 0 10px; - } - - &.list-button { - color: @white; - .hairline(right, @modalHairlineColor); - line-height: 36px; - } - } - - // List items - li { - display: inline-block; - } - - // Last-childs - li { - &:last-child { - .list-button { - .hairline-remove(right); - } - } - &:last-child, &:last-child li:last-child { - .item-inner { - .hairline-remove(right); - } - } - li:last-child, &:last-child li { - .item-inner { - .hairline(right, @modalHairlineColor); - } - } - } - .no-hairlines(); - .no-hairlines-between() - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/ios/_listview.less b/apps/common/mobile/resources/less/ios/_listview.less deleted file mode 100644 index 9a5d40fe5..000000000 --- a/apps/common/mobile/resources/less/ios/_listview.less +++ /dev/null @@ -1,93 +0,0 @@ -// List extend - -.item-content { - .item-after { - &.splitter { - color: #000; - - label { - margin: 0 5px; - } - - .buttons-row { - min-width: 90px; - margin-left: 10px; - } - } - - &.value { - display: block; - min-width: 60px; - color: @black; - margin-left: 10px; - text-align: right; - } - - input.field { - color: @brandColor; - - &.placeholder-color::-webkit-input-placeholder { - color: @brandColor; - } - - &.right { - text-align: right; - } - } - } - - &.buttons { - .item-inner { - padding-top: 0; - padding-bottom: 0; - align-items: stretch; - - > .row { - width: 100%; - align-items: stretch; - - .button { - flex: 1; - border: none; - height: inherit; - border-radius: 0; - font-size: 17px; - display: flex; - align-items: center; - justify-content: center; - } - } - } - } - - .item-after .color-preview { - width: 75px; - height: 30px; - margin-top: -3px; - box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; - } - - i .color-preview { - width: 22px; - height: 8px; - display: inline-block; - margin-top: 21px; - box-sizing: border-box; - box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; - } -} - -.item-link { - &.no-indicator { - .item-inner { - background-image: none; - padding-right: 15px; - } - } -} - -.list-block { - .item-link.list-button { - color: @brandColor; - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_button.less b/apps/common/mobile/resources/less/material/_button.less deleted file mode 100644 index f680dcb57..000000000 --- a/apps/common/mobile/resources/less/material/_button.less +++ /dev/null @@ -1,9 +0,0 @@ -// Active button icon color - -.button { - &.active { - i.icon { - background-color: #fff; - } - } -} diff --git a/apps/common/mobile/resources/less/material/_collaboration.less b/apps/common/mobile/resources/less/material/_collaboration.less deleted file mode 100644 index 2d89a7280..000000000 --- a/apps/common/mobile/resources/less/material/_collaboration.less +++ /dev/null @@ -1,507 +0,0 @@ -.page-change { - .block-description { - background-color: @fill-white; - padding-top: 15px; - padding-bottom: 15px; - margin: 0; - max-width: 100%; - word-wrap: break-word; - } - #user-name { - font-size: 16px; - line-height: 22px; - color: @fill-black; - margin: 0; - } - #date-change { - font-size: 14px; - line-height: 18px; - color: @text-tertiary; - margin: 0; - margin-top: 3px; - } - #text-change { - color: @fill-black; - font-size: 15px; - line-height: 20px; - margin: 0; - margin-top: 10px; - } - .block-btn { - position: absolute; - bottom: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - margin: 0; - width: 100%; - height: 56px; - align-items: center; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2); - - #btn-reject-change { - margin-left: 15px; - } - .change-buttons, .accept-reject, .next-prev { - display: flex; - } - .link { - position: relative; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - text-transform: uppercase; - font-weight: 500; - height: 56px; - min-width: 48px; - } - } - .header-change { - display: flex; - justify-content: flex-start; - padding-right: 16px; - .initials-change { - height: 40px; - width: 40px; - border-radius: 50px; - color: #FFFFFF; - display: flex; - justify-content: center; - align-items: center; - margin-right: 16px; - font-size: 18px; - } - } - #no-changes { - padding: 16px; - } -} -.container-collaboration { - .navbar .right.close-collaboration { - position: absolute; - right: 5px; - } - .page-content .list-block:first-child { - margin-top: -1px; - } -} - -//Display mode -.page-display-mode { - .list-block { - .item-subtitle { - font-size: 14px; - color: @gray; - } - } -} - -//Edit users -@initialEditUser: #373737; - -#user-list { - .item-content { - padding-left: 0; - } - .item-inner { - justify-content: flex-start; - padding-left: 15px; - } - .length { - margin-left: 4px; - } - .color { - min-width: 40px; - min-height: 40px; - margin-right: 20px; - text-align: center; - border-radius: 50px; - line-height: 40px; - color: @initialEditUser; - font-weight: 400; - } - ul:before { - content: none; - } -} - -//Comments -.page-comments, .page-add-comment, .page-view-comments, .container-edit-comment, .container-add-reply, .page-edit-comment, .page-add-reply, .page-edit-reply { - .list-block { - ul { - &:before, &:after { - content: none; - } - } - .item-inner { - display: block; - padding: 16px 0; - word-wrap: break-word; - &:after { - content: none; - } - } - } - .list-reply { - padding-left: 26px; - } - .reply-textarea, .comment-textarea, .edit-reply-textarea { - resize: vertical; - } - .user-name { - font-size: 16px; - line-height: 22px; - color: @fill-black; - margin: 0; - } - .comment-date, .reply-date { - font-size: 12px; - line-height: 18px; - color: @text-secondary; - margin: 0; - margin-top: 0px; - } - .comment-text, .reply-text { - color: @fill-black; - font-size: 15px; - line-height: 25px; - margin: 0; - max-width: 100%; - padding-right: 15px; - pre { - white-space: pre-wrap; - } - } - .reply-item { - padding-right: 16px; - padding-top: 13px; - .header-reply { - display: flex; - justify-content: space-between; - } - .user-name { - padding-top: 3px; - } - } - .comment-quote { - color: @text-secondary; - border-left: 1px solid @text-secondary; - padding-left: 10px; - padding-right: 16px; - margin: 5px 0; - font-size: 15px; - } - - .wrap-comment, .wrap-reply { - padding: 16px 24px 0 16px; - } - .comment-textarea, .reply-textarea, .edit-reply-textarea { - margin-top: 10px; - background:transparent; - outline:none; - width: 100%; - font-size: 15px; - border: none; - border-radius: 3px; - min-height: 100px; - } - - .header-comment { - display: flex; - justify-content: space-between; - padding-right: 16px; - .comment-right { - display: flex; - justify-content: space-between; - width: 70px; - } - .comment-left { - display: flex; - justify-content: space-between; - } - .initials-comment { - height: 40px; - width: 40px; - border-radius: 50px; - color: #FFFFFF; - display: flex; - justify-content: center; - align-items: center; - margin-right: 16px; - font-size: 18px; - } - } - .header-reply { - .reply-left { - display: flex; - justify-content: space-between; - align-items: flex-start; - } - .initials-reply { - width: 24px; - height: 24px; - color: #FFFFFF; - font-size: 11px; - display: flex; - justify-content: center; - align-items: center; - margin-right: 16px; - border-radius: 50px; - margin-top: 5px; - } - } -} -.settings.popup .list-block ul.list-reply:last-child:after, .settings.popover .list-block ul.list-reply:last-child:after { - display: none; -} - -//view comment -.container-view-comment { - position: fixed; - -webkit-transition: height 100ms; - transition: height 100ms; - background-color: #FFFFFF; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - height: 50%; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); - .page-view-comments { - background-color: #FFFFFF; - .list-block { - margin-bottom: 120px; - ul:before, ul:after { - content: none; - } - .item-inner { - padding: 0; - } - } - - } - .toolbar { - position: fixed; - background-color: #FFFFFF; - box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14); - &.toolbar-bottom { - top: auto; - } - &:before { - content: none; - } - a { - &.link { - color: @brandColor; - font-size: 16px; - } - } - .toolbar-inner { - display: flex; - justify-content: space-between; - padding: 0 16px; - .button-left { - min-width: 80px; - } - .button-right { - min-width: 62px; - display: flex; - justify-content: space-between; - a { - padding: 0 8px; - } - } - } - } - .swipe-container { - display: flex; - justify-content: center; - height: 40px; - background-color: @background-primary; - .icon-swipe { - margin-top: 8px; - width: 40px; - height: 4px; - background: rgba(0, 0, 0, 0.12); - border-radius: 2px; - } - } - .list-block { - margin-top: 0; - } - &.popover { - position: absolute; - border-radius: 4px; - min-height: 170px; - height: 400px; - max-height: 600px; - - .toolbar { - position: absolute; - border-radius: 0 0 4px 4px; - .toolbar-inner { - padding-right: 0; - } - } - - .pages { - position: absolute; - - .page { - border-radius: 13px; - - .page-content { - padding: 16px; - padding-bottom: 80px; - - .list-block { - margin-bottom: 0px; - - .item-content { - padding-left: 0; - - .header-comment, .reply-item { - padding-right: 0; - } - } - } - - .block-reply { - margin-top: 10px; - - .reply-textarea { - min-height: 70px; - width: 278px; - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 5px; - } - } - - .edit-reply-textarea { - min-height: 60px; - width: 100%; - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 5px; - height: 60px; - margin-top: 10px; - } - - .comment-text { - padding-right: 0; - - .comment-textarea { - border: 1px solid #c4c4c4; - border-radius: 6px; - padding: 8px; - min-height: 80px; - height: 80px; - } - } - } - } - } - - } -} - -#done-comment { - padding: 0 16px; -} -.page-add-comment { - .wrap-comment, .wrap-reply { - padding: 16px 24px 0 16px; - .header-comment { - justify-content: flex-start; - } - .user-name { - font-size: 17px; - font-weight: bold; - } - .comment-date { - font-size: 13px; - color: @text-secondary; - } - .wrap-textarea { - margin-top: 16px; - padding-right: 6px; - .comment-textarea { - font-size: 17px; - border: none; - margin-top: 0; - min-height: 100px; - border-radius: 4px; - &::placeholder { - color: @gray; - font-size: 17px; - } - } - } - } -} - -.container-edit-comment, .container-add-reply { - height: 100%; - .navbar { - &:after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - right: auto; - top: auto; - height: 1px; - width: 100%; - background-color: #c4c4c4; - display: block; - z-index: 15; - -webkit-transform-origin: 50% 100%; - transform-origin: 50% 100%; - } - .navbar-inner { - justify-content: space-between; - } - a.link i + span { - margin-left: 0; - } - .center { - font-size: 18px; - } - .right { - margin-left: 0; - } - } - .page-add-comment { - background-color: @fill-white; - } - .header-comment { - justify-content: flex-start; - } -} - -.actions-modal-button.color-red { - color: @red; -} - -.page-edit-comment, .page-add-reply, .page-edit-reply { - background-color: @fill-white; - .header-comment { - justify-content: flex-start; - } - .navbar { - .right { - height: 100%; - #add-new-reply, #edit-comment, #edit-reply { - display: flex; - align-items: center; - padding-left: 16px; - padding-right: 16px; - height: 100%; - } - } - } -} - -.container-edit-comment { - position: fixed; -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_color-palette.less b/apps/common/mobile/resources/less/material/_color-palette.less deleted file mode 100644 index ab77c10a0..000000000 --- a/apps/common/mobile/resources/less/material/_color-palette.less +++ /dev/null @@ -1,175 +0,0 @@ -// Color palette - -.color-palette { - a { - flex-grow: 1; - position: relative; - min-width: 10px; - min-height: 26px; - margin: 1px 1px 0 0; - box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; - - &.active { - &:after { - content:' '; - position: absolute; - width: 100%; - height: 100%; - box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; - z-index: 1; - border-radius: 1px; - } - } - - &.transparent { - background-repeat: no-repeat; - background-size: 100% 100%; - .encoded-svg-background(""); - } - } - - .theme-colors { - .item-inner { - display: inline-block; - overflow: visible; - } - } - - .standart-colors, .dynamic-colors { - .item-inner { - overflow: visible; - } - } - - &.list-block:last-child li:last-child a { - border-radius: 0; - } - -} - -.custom-colors { - display: flex; - justify-content: space-around; - align-items: center; - margin: 15px; - &.phone { - max-width: 300px; - margin: 0 auto; - margin-top: 4px; - .button-round { - margin-top: 20px; - } - } - .right-block { - margin-left: 20px; - } - .button-round { - height: 72px; - width: 72px; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - border-radius: 100px; - background-color: @brandColor; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-color: transparent; - margin-top: 25px; - &.active-state { - background-color: rgba(0, 0, 0, 0.1); - } - } - .color-hsb-preview { - width: 72px; - height: 72px; - border-radius: 100px; - overflow: hidden; - border: 1px solid #ededed; - } - .new-color-hsb-preview { - width: 100%; - height: 36px; - } - .current-color-hsb-preview { - width: 100%; - height: 36px; - } - .list-block ul:before, .list-block ul:after { - content: none; - } - .list-block ul li { - border: 1px solid rgba(0, 0, 0, 0.3); - } - .color-picker-wheel { - position: relative; - width: 290px; - max-width: 100%; - height: auto; - font-size: 0; - - svg { - width: 100%; - height: auto; - } - - .color-picker-wheel-handle { - width: calc(100% / 6); - height: calc(100% / 6); - position: absolute; - box-sizing: border-box; - border: 2px solid #fff; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); - background: red; - border-radius: 50%; - left: 0; - top: 0; - } - - .color-picker-sb-spectrum { - background-color: #000; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%); - position: relative; - width: 45%; - height: 45%; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; - } - - .color-picker-sb-spectrum-handle { - width: 4px; - height: 4px; - position: absolute; - left: -2px; - top: -2px; - z-index: 1; - - &:after { - background-color: inherit; - content: ''; - position: absolute; - width: 16px; - height: 16px; - border: 1px solid #fff; - border-radius: 50%; - box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); - box-sizing: border-box; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - transition: 150ms; - transition-property: transform; - transform-origin: center; - } - - &.color-picker-sb-spectrum-handle-pressed:after { - transform: scale(1.5) translate(-33.333%, -33.333%); - } - } - } -} -#font-color-auto.active .color-auto { - box-shadow: 0 0 0 1px white, 0 0 0 4px @brandColor; - border-radius: 1px; -} diff --git a/apps/common/mobile/resources/less/material/_color-schema.less b/apps/common/mobile/resources/less/material/_color-schema.less deleted file mode 100644 index 2c4dc2449..000000000 --- a/apps/common/mobile/resources/less/material/_color-schema.less +++ /dev/null @@ -1,21 +0,0 @@ -.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, 0.15) inset; - } - .text { - margin-left: 20px; - color: #212121; - } -} diff --git a/apps/common/mobile/resources/less/material/_container.less b/apps/common/mobile/resources/less/material/_container.less deleted file mode 100644 index 00f1877cd..000000000 --- a/apps/common/mobile/resources/less/material/_container.less +++ /dev/null @@ -1,77 +0,0 @@ -// Container - -.phone.android { - .container-edit, - .container-collaboration, - .container-filter { - - .page-content { - .list-block:first-child { - margin-top: -1px; - } - } - } -} - -.container-edit, -.container-add, -.container-settings, -.container-collaboration, -.container-filter { - &.popover { - width: 360px; - } -} - -.settings { - &.popup, - &.popover { - .list-block { - ul { - border-radius: 0; - background: #fff; - } - - &:first-child { - margin-top: 0; - - li:first-child a { - border-radius: 0; - } - } - } - - &, - .popover-inner { - > .content-block { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - } - } - - .popover-view { - border-radius: 2px; - - > .pages { - border-radius: 2px; - } - } - } - - .categories { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - - > .toolbar { - top: 0; - height: 100%; - } - } - .popover-inner { - height: 400px; - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_contextmenu.less b/apps/common/mobile/resources/less/material/_contextmenu.less deleted file mode 100644 index 84e376cca..000000000 --- a/apps/common/mobile/resources/less/material/_contextmenu.less +++ /dev/null @@ -1,29 +0,0 @@ -// Context menu - -.document-menu { - width: auto; - line-height: 1 !important; - z-index: 12500; - - .popover-inner { - overflow: hidden; - } - - .list-block { - white-space: pre; - - ul { - height: 48px; - } - - li { - display: inline-block; - } - - .item-link { - html.phone & { - padding: 0 10px; - } - } - } -} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/material/_listview.less b/apps/common/mobile/resources/less/material/_listview.less deleted file mode 100644 index ba134cc39..000000000 --- a/apps/common/mobile/resources/less/material/_listview.less +++ /dev/null @@ -1,73 +0,0 @@ -// List extend - -.item-content{ - .item-after { - &.splitter { - label { - color: #000; - margin:0 5px; - line-height: 36px; - } - - .button { - min-width: 40px; - margin-left: 0; - } - } - - &.value { - display: block; - min-width: 50px; - color: @black; - margin-left: 10px; - text-align: right; - } - } - - &.buttons { - .item-inner { - padding-top: 0; - padding-bottom: 0; - - > .row { - width: 100%; - - .button { - flex: 1; - font-size: 17px; - margin-left: 5px; - - &:first-child { - margin-left: 0; - } - - &.active { - color: #fff; - background-color: @brandColor; - } - } - } - } - } - - .color-preview { - width: 30px; - height: 30px; - border-radius: 16px; - margin-top: -3px; - box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; - } -} - -.item-link { - &.no-indicator { - .item-inner { - background-image: none; - padding-right: 16px; - } - } -} - -.popover .list-block:last-child li:last-child .buttons a { - border-radius: 3px; -} \ No newline at end of file From 6753994332907db452a04f40ddeedb21950bb5a0 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Mon, 21 Mar 2022 15:07:43 +0300 Subject: [PATCH 3/3] Refactoring less-styles v2 --- apps/common/mobile/resources/less/common.less | 5 ++++ apps/documenteditor/mobile/src/less/app.less | 26 +------------------ .../mobile/src/view/edit/EditShape.jsx | 4 +-- .../mobile/src/less/app.less | 2 +- .../mobile/src/view/edit/EditShape.jsx | 4 +-- .../src/view/settings/ApplicationSettings.jsx | 3 +-- .../mobile/src/view/edit/EditShape.jsx | 4 +-- .../src/view/settings/ApplicationSettings.jsx | 9 +++---- .../src/view/settings/SpreadsheetSettings.jsx | 8 +++--- 9 files changed, 20 insertions(+), 45 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 3cf3594fd..d15921a6e 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -68,8 +68,13 @@ margin-top: 0; } .inner-range-title { + color: @text-normal; padding: 15px 0 0 15px; } + + .range-number { + color: @text-normal; + } } .page-content { &.no-padding-top { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 7a4c94c7c..0d74a8bc7 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -151,7 +151,7 @@ .table-styles .row div:not(:first-child) { margin: 2px auto 0px; } -.table-styles li, .table-styles .row div { +.table-styles .skeleton-list li, .table-styles .row div { padding: 0; } .table-styles .row .skeleton-list{ @@ -160,30 +160,6 @@ 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 { diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index e6ba1a45d..f447cc90b 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -205,7 +205,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} > -
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -229,7 +229,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onOpacity(value)}} >
-
+
{stateOpacity + ' %'}
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 960129624..ded0ee9f0 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -123,7 +123,7 @@ .table-styles .row div:not(:first-child) { margin: 2px auto 0px; } -.table-styles li, .table-styles .row div { +.table-styles .skeleton-list li, .table-styles .row div { padding: 0; } .table-styles .row .skeleton-list{ diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx index bd41e6a97..b851120ac 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx @@ -162,7 +162,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -186,7 +186,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onOpacity(value)}} >
-
+
{stateOpacity + ' %'}
diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 9a929743d..2007144e9 100644 --- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -37,8 +37,7 @@ const PageApplicationSettings = props => { onChange={() => changeMeasureSettings(2)}> - - {_t.textSpellcheck} + { store.changeSpellCheck(!isSpellChecking); diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx index a8cef2809..b20b26c0c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx @@ -156,7 +156,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -180,7 +180,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onOpacity(value)}} >
-
+
{stateOpacity + ' %'}
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index 52e08bb5d..30a319d05 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -65,8 +65,7 @@ const PageApplicationSettings = props => { } {_t.textCommentingDisplay} - - {_t.textComments} + { storeApplicationSettings.changeDisplayComments(!isComments); @@ -74,8 +73,7 @@ const PageApplicationSettings = props => { }} /> - - {_t.textResolvedComments} + { storeApplicationSettings.changeDisplayResolved(!isResolvedComments); @@ -85,8 +83,7 @@ const PageApplicationSettings = props => { - - {_t.textR1C1Style} + { storeApplicationSettings.changeRefStyle(!isRefStyle); diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx index 2c7170a01..616f20df7 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx @@ -238,16 +238,14 @@ const PageSpreadsheetSettings = props => { onPageMarginsChange: props.onPageMarginsChange }}> - - - {_t.textHideHeadings} + + { storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings); props.clickCheckboxHideHeadings(!isHideHeadings) }} /> - - {_t.textHideGridlines} + { storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines); props.clickCheckboxHideGridlines(!isHideGridlines)