[DE mobile] Less to modules

apps/common/mobile/resources/less/_mixins.less

+// Encoded SVG Background
+.encoded-svg-mask(@svg) {
+  @url: `encodeURIComponent(@{svg})`;
+  background-color: @themeColor;
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_about.less

+// 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-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png');
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+      background-size: auto;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_button.less

+// Active button icon color
+.button {
+  &.active {
+    i.icon {
+      background-color: #fff;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_color-palette.less

+// Color palette
+
+.color-palette {
+  a {
+    flex-grow: 1;
+    position: relative;
+    min-width: 10px;
+    min-height: 26px;
+    margin: 1px 1px 0 0;
+    border: 0.5px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      &:after {
+        content:' ';
+        position: absolute;
+        left: 50%;
+        margin-left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        width: 12px;
+        height: 9px;
+        background: no-repeat center;
+        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
+        -webkit-background-size: 12px 9px;
+        background-size: 12px 9px;
+        filter: drop-shadow(0px 0px 1px #000);
+      }
+    }
+
+    &.transparent {
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
+    }
+  }
+
+  .theme-colors {
+    .item-inner {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_container.less

+// Container
+.phone.ios {
+  .container-edit {
+    .navbar {
+      .hairline(top, @toolbarBorderColor);
+    }
+
+    .page-content {
+      .list-block:first-child {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.container-edit,
+.container-add,
+.container-settings {
+  &.popover {
+    width: 360px;
+  }
+
+  &.popup,
+  &.popover {
+    .list-block {
+
+      ul {
+        border-radius: 0 !important;
+        background: #fff;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      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;
+      }
+    }
+  }
+
+  .categories {
+    width: 100%;
+
+    > .buttons-row {
+      width: 100%;
+
+      .button {
+        padding: 0 1px;
+      }
+    }
+  }
+  .popover-inner {
+    height: 400px;
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_contextmenu.less

+// 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;
+
+  .popover-angle {
+    &:after {
+      background: @contextMenuBg;
+    }
+  }
+
+  .list-block {
+    font-size: 14px;
+
+    &: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);
+        }
+      }
+      &.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

apps/common/mobile/resources/less/ios/_dataview.less

+// 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;
+
+    &::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/ios/_listview.less

+// 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;
+    }
+  }
+
+  &.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;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+  }
+
+  i .color-preview {
+    width: 22px;
+    height: 8px;
+    display: inline-block;
+    margin-top: 21px;
+    box-sizing: border-box;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+  }
+}
+
+.item-link {
+  &.no-indicator {
+    .item-inner {
+      background-image: none;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_about.less

+// 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/onlyoffice.png') 50% 50% no-repeat;
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 2dppx),
+    only screen and (min-resolution: 192dpi) {
+      background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_button.less

+// Active button icon color
+
+.button {
+  &.active {
+    i.icon {
+      background-color: #fff;
+    }
+  }
+}

apps/common/mobile/resources/less/material/_color-palette.less

+// Color palette
+
+.color-palette {
+  a {
+    flex-grow: 1;
+    position: relative;
+    min-width: 10px;
+    min-height: 26px;
+    margin: 1px 1px 0 0;
+    border: 1px solid #c4c4c4;
+    html.pixel-ratio-2 & {
+      border: 0.5px solid #c4c4c4;
+    }
+    html.pixel-ratio-3 & {
+      border: 0.33px solid #c4c4c4;
+    }
+
+    &.active {
+      &:after {
+        content:' ';
+        position: absolute;
+        left: 50%;
+        margin-left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        width: 12px;
+        height: 9px;
+        background: no-repeat center;
+        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#fff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
+        -webkit-background-size: 12px 9px;
+        background-size: 12px 9px;
+        filter: drop-shadow(0px 0px 1px #000);
+      }
+    }
+
+    &.transparent {
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
+    }
+  }
+
+  .theme-colors {
+    .item-inner {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_container.less

+// Container
+
+.phone.android {
+  .container-edit {
+
+    .page-content {
+      .list-block:first-child {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.container-edit,
+.container-add,
+.container-settings {
+  &.popover {
+    width: 360px;
+  }
+
+  &.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: 3px;
+
+      > .pages {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .categories {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    > .toolbar {
+      top: 0;
+      height: 100%;
+    }
+  }
+  .popover-inner {
+    height: 400px;
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_contextmenu.less

+// Context menu
+
+.document-menu {
+  width: auto;
+  line-height: 1 !important;
+
+  .popover-inner {
+    overflow: hidden;
+  }
+
+  .list-block {
+    ul {
+      height: 48px;
+    }
+
+    li {
+      display: inline-block;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_dataview.less

+// 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;
+
+    &::after {
+      content: '';
+      width: 20px;
+      height: 20px;
+      background-color: red;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file

apps/common/mobile/resources/less/material/_listview.less

+// 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: @themeColor;
+          }
+        }
+      }
+    }
+  }
+
+  .color-preview {
+    width: 30px;
+    height: 30px;
+    border-radius: 16px;
+    margin-top: -3px;
+    border: 0.5px solid gray;
+  }
+}
+
+.item-link {
+  &.no-indicator {
+    .item-inner {
+      background-image: none;
+    }
+  }
+}
\ No newline at end of file

apps/documenteditor/mobile/resources/css/app-material.css

@@ -5631,9 +5631,6 @@ a.item-link,
 .phone.android .container-edit .page-content .list-block:first-child {
   margin-top: -1px;
 }
-.container-edit.popup,
-.container-add.popup,
-.container-settings.popup,
 .container-edit.popover,
 .container-add.popover,
 .container-settings.popover {
@@ -5716,6 +5713,29 @@ a.item-link,
 .container-settings .popover-inner {
   height: 400px;
 }
+.dataview .row {
+  justify-content: space-around;
+}
+.dataview ul {
+  padding: 0 10px;
+  list-style: none;
+  justify-content: space-around;
+}
+.dataview ul li {
+  display: inline-block;
+}
+.dataview .active {
+  position: relative;
+}
+.dataview .active::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-color: red;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 .item-content .item-after.splitter label {
   color: #000;
   margin: 0 5px;
@@ -5761,129 +5781,21 @@ a.item-link,
 .item-link.no-indicator .item-inner {
   background-image: none;
 }
-.about .page-content {
-  text-align: center;
-}
-.about .content-block:first-child {
-  margin: 15px 0;
-}
-.about .content-block {
-  margin: 0 auto 15px;
-}
-.about .content-block a {
-  color: #000;
-}
-.about h3 {
-  font-weight: normal;
-  margin: 0;
-}
-.about h3.vendor {
-  color: #000;
-  font-weight: bold;
-  margin-top: 15px;
-}
-.about p > label {
-  margin-right: 5px;
-}
-.about .logo {
-  background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
-}
-@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
-  .about .logo {
-    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
-  }
-}
-#add-table .page,
-#add-shape .page {
+.button.active i.icon {
   background-color: #fff;
 }
-.dataview .row {
-  justify-content: space-around;
-}
-.dataview ul {
-  padding: 0 10px;
-  list-style: none;
-  justify-content: space-around;
-}
-.dataview ul li {
-  display: inline-block;
-}
-.dataview .active {
-  position: relative;
-}
-.dataview .active::after {
-  content: '';
-  width: 20px;
-  height: 20px;
-  background-color: red;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-.table-styles .row,
-.table-styles .row li {
-  margin-bottom: 12px;
-}
-.table-styles li {
-  margin: 0;
-  padding: 1px;
-}
-.table-styles li img {
-  width: 70px;
-  height: 50px;
-}
-.shapes li {
-  width: 70px;
-  height: 70px;
-  margin: 0 1px;
-}
-.shapes li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #5a7dc9;
-}
-.chart-types li {
-  width: 60px;
-  height: 60px;
-  margin: 6px;
-}
-.chart-types li .thumb {
-  width: 100%;
-  height: 100%;
-  background-size: contain;
-}
-.bullets ul,
-.numbers ul {
-  margin-top: 10px;
-}
-.bullets li,
-.numbers li {
-  width: 70px;
-  height: 70px;
-  margin-right: 1px;
-  border: 1px solid #c4c4c4;
-}
-html.pixel-ratio-2 .bullets li,
-html.pixel-ratio-2 .numbers li {
-  border: 0.5px solid #c4c4c4;
+.document-menu {
+  width: auto;
+  line-height: 1 !important;
 }
-html.pixel-ratio-3 .bullets li,
-html.pixel-ratio-3 .numbers li {
-  border: 0.33px solid #c4c4c4;
+.document-menu .popover-inner {
+  overflow: hidden;
 }
-.bullets li .thumb,
-.numbers li .thumb {
-  width: 100%;
-  height: 100%;
-  background-color: #ffffff;
-  background-size: cover;
+.document-menu .list-block ul {
+  height: 48px;
 }
-.bullets li .thumb label,
-.numbers li .thumb label {
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  top: 34%;
+.document-menu .list-block li {
+  display: inline-block;
 }
 .color-palette a {
   flex-grow: 1;
@@ -5922,21 +5834,37 @@ html.pixel-ratio-3 .color-palette a {
 .color-palette .theme-colors .item-inner {
   display: inline-block;
 }
-.document-menu {
-  width: auto;
-  line-height: 1 !important;
+.about .page-content {
+  text-align: center;
 }
-.document-menu .popover-inner {
-  overflow: hidden;
+.about .content-block:first-child {
+  margin: 15px 0;
 }
-.document-menu .list-block ul {
-  height: 48px;
+.about .content-block {
+  margin: 0 auto 15px;
 }
-.document-menu .list-block li {
-  display: inline-block;
+.about .content-block a {
+  color: #000;
 }
-.button.active i.icon {
-  background-color: #fff;
+.about h3 {
+  font-weight: normal;
+  margin: 0;
+}
+.about h3.vendor {
+  color: #000;
+  font-weight: bold;
+  margin-top: 15px;
+}
+.about p > label {
+  margin-right: 5px;
+}
+.about .logo {
+  background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) {
+  .about .logo {
+    background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
+  }
 }
 i.icon.icon-expand-up {
   width: 17px;
@@ -6129,3 +6057,72 @@ i.icon.icon-link {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+#add-table .page,
+#add-shape .page {
+  background-color: #fff;
+}
+.table-styles .row,
+.table-styles .row li {
+  margin-bottom: 12px;
+}
+.table-styles li {
+  margin: 0;
+  padding: 1px;
+}
+.table-styles li img {
+  width: 70px;
+  height: 50px;
+}
+.shapes li {
+  width: 70px;
+  height: 70px;
+  margin: 0 1px;
+}
+.shapes li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #5a7dc9;
+}
+.chart-types li {
+  width: 60px;
+  height: 60px;
+  margin: 6px;
+}
+.chart-types li .thumb {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+}
+.bullets ul,
+.numbers ul {
+  margin-top: 10px;
+}
+.bullets li,
+.numbers li {
+  width: 70px;
+  height: 70px;
+  margin-right: 1px;
+  border: 1px solid #c4c4c4;
+}
+html.pixel-ratio-2 .bullets li,
+html.pixel-ratio-2 .numbers li {
+  border: 0.5px solid #c4c4c4;
+}
+html.pixel-ratio-3 .bullets li,
+html.pixel-ratio-3 .numbers li {
+  border: 0.33px solid #c4c4c4;
+}
+.bullets li .thumb,
+.numbers li .thumb {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  background-size: cover;
+}
+.bullets li .thumb label,
+.numbers li .thumb label {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 34%;
+}

apps/documenteditor/mobile/resources/less/ios/_search.less

+// Search
+
+.tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      .searchbar-input:first-child {
+        margin-right: 10px;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      .prev {
+        margin-left: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: 88px;
+
+    .left {
+      margin-top: -44px;
+    }
+
+    .center {
+      .searchbar-input {
+        margin: 8px 0;
+      }
+
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .left,
+    .center,
+    .right {
+      flex-direction: column;
+    }
+
+    .left {
+      min-width: 22px;
+      max-width: 22px;
+    }
+
+    .center {
+      width: 100%;
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      > p {
+        margin: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+.searchbar.document {
+  background: lighten(@searchbarBg, 10%);
+}
\ No newline at end of file