From f6300b1d897e2dcef084abc3a67c941a4a559bd5 Mon Sep 17 00:00:00 2001
From: Vusal Gakhramanov <vgakhramanov@wavesplatform.com>
Date: Fri, 6 Sep 2019 11:09:15 +0300
Subject: [PATCH 1/6] DEXW-1936: bem select

---
 src/modules/app/less/app.less                 |   2 +-
 src/modules/desktop/less/electron.less        |   2 +-
 .../directives/createOrder/createOrder.html   |   4 +-
 .../directives/createOrder/expiration.less    |   8 +-
 .../directives/dexWatchlist/DexWatchlist.html |   2 +-
 .../directives/dexWatchlist/DexWatchlist.less |  12 +-
 src/modules/dex/less/dex.less                 |   6 +-
 src/modules/saveSeed/less/saveSeed.less       |  16 +-
 .../saveSeed/templates/saveSeedHasUsers.html  |   2 +-
 src/modules/sessions/less/sessions.less       |   6 +-
 src/modules/sessions/templates/sessions.html  |   2 +-
 src/modules/signIn/less/signIn.less           |  16 +-
 src/modules/stand/less/stand.less             |   6 +-
 src/modules/stand/templates/stand.html        |  14 +-
 src/modules/tokens/templates/tokens.html      |   2 +-
 .../changeLanguage/changeLanguage.html        |   2 +-
 .../changeLanguage/changeLanguage.less        |  26 +-
 .../ui/directives/feeList/feeList.html        |   2 +-
 src/modules/ui/directives/input/input.less    |  12 +-
 src/modules/ui/directives/select/Option.js    |   2 +-
 src/modules/ui/directives/select/Select.js    |   6 +-
 src/modules/ui/directives/select/select.html  |   6 +-
 src/modules/ui/directives/select/select.less  | 384 ++++++++++++++----
 .../directives/selectFilter/selectFilter.less |   6 +-
 .../transactionList/transactionList.less      |   6 +
 .../changeToken/change-token-modal.html       |   4 +-
 .../changeToken/change-token-modal.less       |   6 +-
 src/modules/utils/modals/receive/Receive.less |  23 +-
 .../receive/receiveBank/receive-bank.html     |   2 +-
 .../receive/receiveCard/receive-card.html     |   4 +-
 .../receive-cryptocurrency.html               |   2 +-
 .../receiveInvoice/receive-invoice.html       |   4 +-
 .../utils/modals/sendAsset/send-header.html   |   2 +-
 .../utils/modals/sendAsset/send.modal.less    |  29 +-
 .../utils/modals/settings/settings.html       |   4 +-
 .../utils/modals/settings/settings.less       |  30 +-
 .../wallet/modules/assets/less/assets.less    |   2 +-
 .../modules/assets/templates/assets.html      |   2 +-
 .../modules/portfolio/less/portfolio.less     | 120 +++---
 .../portfolio/templates/portfolio.html        |   2 +-
 .../transactions/less/transactions.less       |  30 +-
 .../transactions/templates/transactions.html  |   4 +-
 42 files changed, 525 insertions(+), 297 deletions(-)

diff --git a/src/modules/app/less/app.less b/src/modules/app/less/app.less
index 76505f5373..a1e0f19295 100644
--- a/src/modules/app/less/app.less
+++ b/src/modules/app/less/app.less
@@ -180,7 +180,7 @@ fieldset {
   padding: 0;
 
   &.disabled {
-    w-select, span.link, w-qr-code-read, w-import-file, a.link-clear {
+    .select, span.link, w-qr-code-read, w-import-file, a.link-clear {
       pointer-events: none;
     }
   }
diff --git a/src/modules/desktop/less/electron.less b/src/modules/desktop/less/electron.less
index 5911b72113..e2b09acbb5 100644
--- a/src/modules/desktop/less/electron.less
+++ b/src/modules/desktop/less/electron.less
@@ -102,7 +102,7 @@ body.desktop {
       margin-bottom: 0;
     }
 
-    w-select .select .title {
+    .select .select__wrap .select__title {
       background: transparent;
 
       &:after {
diff --git a/src/modules/dex/directives/createOrder/createOrder.html b/src/modules/dex/directives/createOrder/createOrder.html
index 9ecc15cddc..6b8ea1ec55 100644
--- a/src/modules/dex/directives/createOrder/createOrder.html
+++ b/src/modules/dex/directives/createOrder/createOrder.html
@@ -232,7 +232,7 @@
 
                         <div class="expiration__item expiration__item-fee" ng-if="$ctrl.feeList.length">
                             <span class="expiration__label" w-i18n="directives.createOrder.matcherFee"></span>
-                            <w-select class="expiration__select select__no-user-select" ng-model="$ctrl.fee" up-direction="true">
+                            <w-select class="select expiration__select select__no-user-select" ng-model="$ctrl.fee" up-direction="true">
                                 <w-option ng-repeat="fee in $ctrl.feeList track by fee.asset.displayName" value="fee">
                                     {{fee.toFormat()}} {{(fee.asset.ticker || fee.asset.displayName)}}
                                 </w-option>
@@ -241,7 +241,7 @@
 
                         <div class="expiration__item expiration__item-acting">
                             <div class="expiration__label" w-i18n="directives.createOrder.expiration"></div>
-                            <w-select class="expiration__select select__no-user-select" ng-model="$ctrl.expiration" up-direction="true">
+                            <w-select class="select expiration__select select__no-user-select" ng-model="$ctrl.expiration" up-direction="true">
                                 <w-option ng-repeat="option in $ctrl.expirationValues track by option.name"
                                           value="::option.name"
                                           w-app-class>
diff --git a/src/modules/dex/directives/createOrder/expiration.less b/src/modules/dex/directives/createOrder/expiration.less
index 8d8fd08d8a..fd489dbb89 100644
--- a/src/modules/dex/directives/createOrder/expiration.less
+++ b/src/modules/dex/directives/createOrder/expiration.less
@@ -33,10 +33,10 @@
       margin-left: 5px;
     }
 
-    .select {
+    .select__wrap {
       position: static;
 
-      .title {
+      .select__title {
         padding: 2px 15px 2px 5px;
         border: 1px solid transparent;
         font-size: @font-size-caption-2;
@@ -49,7 +49,7 @@
         }
       }
 
-      .select-list {
+      .select__list {
         box-shadow: @dropdown-shadow;
         border: 0;
         border-radius: 4px;
@@ -72,7 +72,7 @@
       }
 
       &.expanded {
-        .title {
+        .select__title {
           &:after {
             background-image: @select-arrow-active-icon;
           }
diff --git a/src/modules/dex/directives/dexWatchlist/DexWatchlist.html b/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
index b58fb88426..db9fcef66e 100644
--- a/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
+++ b/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
@@ -10,7 +10,7 @@
 
         <w-select ng-model="$ctrl.dropDownId"
                   ng-class="{'active': $ctrl.isActiveSelect}"
-                  class="select__no-user-select">
+                  class="select select__no-user-select">
             <w-option ng-repeat="option in $ctrl.dropDown track by option.id"
                       value="::option.id">
                 {{::option.name}}
diff --git a/src/modules/dex/directives/dexWatchlist/DexWatchlist.less b/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
index 2c7f396b16..95e7fd1c82 100644
--- a/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
+++ b/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
@@ -83,11 +83,11 @@
       display: none;
     }
 
-    w-select {
+    .select {
       position: relative;
       z-index: 6;
 
-      .select-list {
+      .select__list {
         max-height: 155px;
         overflow: auto;
         border-color: @color-basic-100;
@@ -113,8 +113,8 @@
         }
       }
 
-      .select &.expanded {
-        .title {
+      .select__wrap &.expanded {
+        .select__title {
           border: 1px solid #000;
         }
       }
@@ -165,7 +165,7 @@
           left: 0;
         }
 
-        .select-list {
+        .select__list {
           border-radius: 0;
         }
       }
@@ -285,7 +285,7 @@
     }
 
     .wrapper {
-      .titles-wrap .select a.title {
+      .titles-wrap .select__wrap a.select__title {
         font-size: 13px;
       }
     }
diff --git a/src/modules/dex/less/dex.less b/src/modules/dex/less/dex.less
index c8d50684b3..d04a505f5a 100644
--- a/src/modules/dex/less/dex.less
+++ b/src/modules/dex/less/dex.less
@@ -130,8 +130,8 @@ body.dex-demo {
       .titles-wrap {
         height: 42px;
 
-        .select {
-          .select-list {
+        .select__wrap {
+          .select__list {
             height: 42px;
             font-size: 13px;
           }
@@ -140,7 +140,7 @@ body.dex-demo {
             font-size: 13px;
           }
 
-          .title {
+          .select__title {
             height: 41px;
             font-size: 13px;
           }
diff --git a/src/modules/saveSeed/less/saveSeed.less b/src/modules/saveSeed/less/saveSeed.less
index 17ae0a17a3..9119df6dbf 100644
--- a/src/modules/saveSeed/less/saveSeed.less
+++ b/src/modules/saveSeed/less/saveSeed.less
@@ -37,28 +37,28 @@ body.saveSeed {
       background-position: center;
     }
 
-    w-select {
-      .select-list {
+    .select {
+      .select__list {
         max-height: 300px;
         overflow: auto;
       }
 
-      .title-content .icon-remove-user {
+      .select__title-content .icon-remove-user {
         display: none;
       }
 
-      .title-content, .option {
+      .select__title-content, .option {
         display: flex;
         flex-direction: row;
         align-items: center;
       }
     }
 
-    w-select.one-item {
-      .title-content .icon-remove-user {
+    .select.one-item {
+      .select__title-content .icon-remove-user {
         display: inline-block;
       }
-      .title {
+      .select__title {
         padding: 0 0 0 15px;
       }
     }
@@ -71,7 +71,7 @@ body.saveSeed {
     }
 
     .input-like,
-    w-select {
+    .select {
       .has-name {
         .address {
           color: @color-basic-500;
diff --git a/src/modules/saveSeed/templates/saveSeedHasUsers.html b/src/modules/saveSeed/templates/saveSeedHasUsers.html
index 71652b016a..f9173905fa 100644
--- a/src/modules/saveSeed/templates/saveSeedHasUsers.html
+++ b/src/modules/saveSeed/templates/saveSeedHasUsers.html
@@ -13,7 +13,7 @@
               one-item="$ctrl.userList.length <= 1"
               disabled="$ctrl.userList.length <= 1"
               hide-active="::false"
-              class="big margin-3">
+              class="select big margin-3">
         <w-option ng-repeat="user in $ctrl.userList track by user.address"
                   value="::user.address">
 
diff --git a/src/modules/sessions/less/sessions.less b/src/modules/sessions/less/sessions.less
index 7862844763..a9b8c38c60 100644
--- a/src/modules/sessions/less/sessions.less
+++ b/src/modules/sessions/less/sessions.less
@@ -11,7 +11,7 @@
     padding: 0;
     margin: 60px 0 30px 0;
 
-    w-select,
+    .select,
     .input-like {
       display: flex;
       flex-direction: row;
@@ -46,11 +46,11 @@
         background-position: center;
       }
 
-      .title-content .icon-remove-user {
+      .select__title-content .icon-remove-user {
         display: none;
       }
 
-      .title-content,
+      .select__title-content,
       .option {
         display: flex;
         flex-direction: row;
diff --git a/src/modules/sessions/templates/sessions.html b/src/modules/sessions/templates/sessions.html
index 20f9ae3c98..b10b94dd59 100644
--- a/src/modules/sessions/templates/sessions.html
+++ b/src/modules/sessions/templates/sessions.html
@@ -21,7 +21,7 @@
     </ul>
 
     <div class="sessions-holder">
-        <w-select class="big" ng-if="$ctrl.session.address.length > 3" ng-model="$ctrl.activeSession">
+        <w-select class="select big" ng-if="$ctrl.session.address.length > 3" ng-model="$ctrl.activeSession">
             <w-option ng-repeat="session in $ctrl.sessions track by session.address"
                       value="{{::session.address}}">
                 <w-avatar class="margin-right-1" address="session.address" size="30"></w-avatar>
diff --git a/src/modules/signIn/less/signIn.less b/src/modules/signIn/less/signIn.less
index b0d4f6e1f5..c1760eff2a 100644
--- a/src/modules/signIn/less/signIn.less
+++ b/src/modules/signIn/less/signIn.less
@@ -35,28 +35,28 @@ body.signIn {
       background-position: center;
     }
 
-    w-select {
-      .select-list {
+    .select {
+      .select__list {
         max-height: 300px;
         overflow: auto;
       }
 
-      .title-content .icon-remove-user {
+      .select__title-content .icon-remove-user {
         display: none;
       }
 
-      .title-content, .option {
+      .select__title-content, .option {
         display: flex;
         flex-direction: row;
         align-items: center;
       }
     }
 
-    w-select.one-item {
-      .title-content .icon-remove-user {
+    .select.one-item {
+      .select__title-content .icon-remove-user {
         display: inline-block;
       }
-      .title {
+      .select__title {
         padding: 0 0 0 15px;
       }
     }
@@ -69,7 +69,7 @@ body.signIn {
     }
 
     .input-like,
-    w-select {
+    .select {
       .has-name {
         .address {
           color: @color-basic-500;
diff --git a/src/modules/stand/less/stand.less b/src/modules/stand/less/stand.less
index 72e5d6a810..e8bb3e6081 100644
--- a/src/modules/stand/less/stand.less
+++ b/src/modules/stand/less/stand.less
@@ -22,13 +22,13 @@ html body.stand {
     }
   }
 
-  w-change-language w-select {
+  w-change-language .select {
     position: relative;
     top: 0;
     right: 0;
   }
 
-  w-select img {
+  .select img {
     width: 30px;
     height: 30px;
     display: block;
@@ -50,7 +50,7 @@ html body.stand {
     min-width: 1200px;
   }
 
-  .select-list {
+  .select__list {
     margin-bottom: 40px;
   }
 
diff --git a/src/modules/stand/templates/stand.html b/src/modules/stand/templates/stand.html
index d56bfbc2e1..d5ec3ec985 100644
--- a/src/modules/stand/templates/stand.html
+++ b/src/modules/stand/templates/stand.html
@@ -80,7 +80,7 @@ <h1>Selects</h1>
             <div class="margin-2"></div>
 
             <div class="body-2">Select title</div>
-            <w-select class="with-scroll select__no-usuer-select"> <!-- .with-scroll / .select__no-usuer-select --->
+            <w-select class=" select with-scroll select__no-usuer-select"> <!-- .with-scroll / .select__no-usuer-select --->
                 <w-option><span>Default</span></w-option>
                 <w-option><span>Value 1</span></w-option>
                 <w-option><span>Value 2</span></w-option>
@@ -91,7 +91,7 @@ <h1>Selects</h1>
 
             <div class="margin-2"></div>
 
-            <w-select class="big long">
+            <w-select class="select big long">
                 <w-option>Big</w-option>
                 <w-option>option 2</w-option>
                 <w-option>option 3</w-option>
@@ -101,7 +101,7 @@ <h1>Selects</h1>
 
             <div class="margin-2"></div>
 
-            <w-select class="big long" disabled>
+            <w-select class="select big long" disabled>
                 <w-option>Big disabled</w-option>
                 <w-option>option 2</w-option>
                 <w-option>option 3</w-option>
@@ -111,7 +111,7 @@ <h1>Selects</h1>
 
             <div class="margin-2"></div>
 
-            <w-select class="long interface">
+            <w-select class="select long interface">
                 <w-option>Interface</w-option>
                 <w-option>option 2</w-option>
                 <w-option>option 3</w-option>
@@ -121,7 +121,7 @@ <h1>Selects</h1>
 
             <div class="margin-2"></div>
 
-            <w-select class="long interface" disabled>
+            <w-select class="select long interface" disabled>
                 <w-option>Interface disabled</w-option>
                 <w-option>option 2</w-option>
                 <w-option>option 3</w-option>
@@ -132,7 +132,7 @@ <h1>Selects</h1>
             <div class="margin-2"></div>
 
             <div class="body-2">Select with filter title</div>
-            <w-select class="big long">
+            <w-select class="select big long">
                 <w-select-filter></w-select-filter>
                 <w-option><w-checkbox-submit></w-checkbox-submit><img src="/img/assets/bitcoin.svg" />Bitcoin</w-option>
                 <w-option><w-checkbox-submit></w-checkbox-submit><img src="/img/assets/waves.svg" />Waves</w-option>
@@ -182,7 +182,7 @@ <h1>Inputs</h1>
                                  class="medium"
                                  ng-model="$ctrl.inputModel"></w-input>
 
-                        <w-select class="no-user-select tiny" ng-model="$ctrl.selectModel">
+                        <w-select class="select no-user-select tiny" ng-model="$ctrl.selectModel">
                             <w-option>
                                 <span class="caption-1 mobile-caption-4 basic-700">Value 1</span>
                             </w-option>
diff --git a/src/modules/tokens/templates/tokens.html b/src/modules/tokens/templates/tokens.html
index 5370936197..26baac319e 100644
--- a/src/modules/tokens/templates/tokens.html
+++ b/src/modules/tokens/templates/tokens.html
@@ -83,7 +83,7 @@
                                          w-validator-number
                                          required></w-input>
 
-                                <w-select class="no-user-select tiny" ng-model="$ctrl.issue">
+                                <w-select class="select no-user-select tiny" ng-model="$ctrl.issue">
                                     <w-option value="::false">
                                      <span class="caption-1 mobile-caption-4 basic-700" w-i18n-ns="app.tokens"
                                            w-i18n="reissuable.false"></span>
diff --git a/src/modules/ui/directives/changeLanguage/changeLanguage.html b/src/modules/ui/directives/changeLanguage/changeLanguage.html
index 7b9e1990a0..cc5608a28d 100644
--- a/src/modules/ui/directives/changeLanguage/changeLanguage.html
+++ b/src/modules/ui/directives/changeLanguage/changeLanguage.html
@@ -1,4 +1,4 @@
-<w-select ng-model="$ctrl.active" class="select__no-user-select">
+<w-select ng-model="$ctrl.active" class="select select__no-user-select">
     <w-option ng-repeat="lng in $ctrl.list" value="::lng.code">
         <div class="lng-item lng-{{ ::lng.code }}"><span>{{ ::lng.name }}</span></div>
     </w-option>
diff --git a/src/modules/ui/directives/changeLanguage/changeLanguage.less b/src/modules/ui/directives/changeLanguage/changeLanguage.less
index 439a86db95..fbd91c6928 100644
--- a/src/modules/ui/directives/changeLanguage/changeLanguage.less
+++ b/src/modules/ui/directives/changeLanguage/changeLanguage.less
@@ -1,16 +1,16 @@
 @import (reference) 'config';
 
 w-change-language {
-  w-select {
+  .select {
     width: 142px;
     height: 36px;
 
-    .select {
-      .title {
+    .select__wrap {
+      .select__title {
         border: 1px solid transparent;
       }
 
-      .select-list {
+      .select__list {
         max-height: 171px;
         overflow: auto;
       }
@@ -108,16 +108,16 @@ w-change-language {
 
 .footer {
   w-change-language {
-    w-select {
-      .select {
-        .select-list {
+    .select {
+      .select__wrap {
+        .select__list {
           border-top: 1px solid @color-basic-200;
           transform: translateY(-100%);
           margin-top: -39px;
         }
 
         &.expanded {
-          .title::after {
+          .select__title::after {
             transition: .5s;
             transform: translateY(-50%) rotate(180deg);
           }
@@ -128,7 +128,7 @@ w-change-language {
 }
 
 .web-footer-language {
-  w-select {
+  .select {
     width: 200px;
     position: relative;
     -moz-appearance: none;
@@ -138,19 +138,19 @@ w-change-language {
     right: 0;
     top: 0;
 
-    .select {
+    .select__wrap {
       background: @footer-background;
       line-height: 40px;
       height: 40px;
       color: @color-white;
 
-      &.expanded .title {
+      &.expanded .select__title {
         border: 1px solid @changeLang-border-footer;
         border-top: 0 none;
         border-radius: 0;
       }
 
-      .select-list {
+      .select__list {
         background: @footer-background;
         border-radius: 4px 4px 0 0;
         flex-direction: column-reverse;
@@ -173,7 +173,7 @@ w-change-language {
         }
       }
 
-      .title {
+      .select__title {
         border: 1px solid @changeLang-border-footer;
         border-radius: 2px;
         background: none transparent;
diff --git a/src/modules/ui/directives/feeList/feeList.html b/src/modules/ui/directives/feeList/feeList.html
index b2b2c190ea..916768b736 100644
--- a/src/modules/ui/directives/feeList/feeList.html
+++ b/src/modules/ui/directives/feeList/feeList.html
@@ -5,7 +5,7 @@
     <w-select disabled="$ctrl.disabled"
               ng-if="$ctrl.feeList.length > 1"
               ng-model="$ctrl.fee"
-              class="big">
+              class="select select_fee">
         <w-option ng-repeat="fee in $ctrl.feeList track by fee.asset.id"
                   value="fee">
             <span>{{::fee.asset.displayName}}</span>
diff --git a/src/modules/ui/directives/input/input.less b/src/modules/ui/directives/input/input.less
index 7bec4d3a0e..1a26716e03 100644
--- a/src/modules/ui/directives/input/input.less
+++ b/src/modules/ui/directives/input/input.less
@@ -82,17 +82,17 @@ input[type="checkbox"] {
     display: flex;
     align-items: center;
 
-    w-select {
+    .select {
       position: absolute;
       right: 6px;
       width: calc(50% ~'- 12px');
 
-      .title-content {
+      .select__title-content {
         display: flex;
         align-items: center;
       }
 
-      .title {
+      .select__title {
         background-color: @color-white;
       }
     }
@@ -292,7 +292,7 @@ md-dialog {
 
 .modal-send {
   fieldset.disabled {
-    .select .title {
+    .select__wrap .select__title {
       background: @color-basic-50;
     }
   }
@@ -300,7 +300,7 @@ md-dialog {
 
 .change-token {
   fieldset.disabled {
-    .input-like .select-wrap .select .title {
+    .input-like .select-wrapper .select__wrap .select__title {
       background: @color-basic-50;
     }
   }
@@ -308,7 +308,7 @@ md-dialog {
 
 .tokens-page {
   fieldset.disabled {
-    .input-like .select .title {
+    .input-like .select__wrap .select__title {
       background: @color-basic-50;
     }
   }
diff --git a/src/modules/ui/directives/select/Option.js b/src/modules/ui/directives/select/Option.js
index fd905d80d1..18c97c7ab4 100644
--- a/src/modules/ui/directives/select/Option.js
+++ b/src/modules/ui/directives/select/Option.js
@@ -96,7 +96,7 @@
                      * @private
                      */
                     static _getContentHTML() {
-                        return '<div class="title-content"></div>';
+                        return '<div class="select__title-content"></div>';
                     }
 
                     /**
diff --git a/src/modules/ui/directives/select/Select.js b/src/modules/ui/directives/select/Select.js
index 16e83f999e..33f8b5d955 100644
--- a/src/modules/ui/directives/select/Select.js
+++ b/src/modules/ui/directives/select/Select.js
@@ -103,9 +103,9 @@
             }
 
             $postLink() {
-                this._select = $element.find('.select:first');
-                this._activeNode = this._select.find('.title:first');
-                this._selectList = this._select.find('.select-list:first');
+                this._select = $element.find('.select__wrap:first');
+                this._activeNode = this._select.find('.select__title:first');
+                this._selectList = this._select.find('.select__list:first');
 
                 this._render();
                 this._setHandlers();
diff --git a/src/modules/ui/directives/select/select.html b/src/modules/ui/directives/select/select.html
index b3031460e6..ea372178b6 100644
--- a/src/modules/ui/directives/select/select.html
+++ b/src/modules/ui/directives/select/select.html
@@ -1,6 +1,6 @@
-<div class="select" ng-class="$ctrl.upDirection ? 'to-up' : ''">
-    <div class="title"></div>
+<div class="select__wrap" ng-class="$ctrl.upDirection ? 'to-up' : ''">
+    <div class="select__title"></div>
     <w-select-filter ng-if="$ctrl.canSearch"
                      search="$ctrl.filter"></w-select-filter>
-    <div class="select-list" ng-transclude></div>
+    <div class="select__list" ng-transclude></div>
 </div>
diff --git a/src/modules/ui/directives/select/select.less b/src/modules/ui/directives/select/select.less
index 0d608328b3..898fa94b45 100644
--- a/src/modules/ui/directives/select/select.less
+++ b/src/modules/ui/directives/select/select.less
@@ -1,7 +1,9 @@
+@import (reference) "../../../app/less/app-icons";
+@import (reference) '../../../app/less/typography';
 @import (reference) 'config';
 @import (reference) 'icons';
 
-w-select {
+.select {
   display: block;
 
   &.tiny {
@@ -26,7 +28,7 @@ w-select {
     }
   }
 
-  &.one-item .select .title {
+  &.one-item .select__wrap .select__title {
     cursor: default;
     &::after {
       background-image: none;
@@ -36,48 +38,86 @@ w-select {
     }
   }
 
-  &.hide-active .select .select-list w-option.active {
+  &.hide-active .select__wrap .select__list w-option.active {
     display: none;
   }
 
-  .select {
-    height: 100%;
+  &__title {
     position: relative;
+    border: 1px solid @color-basic-200;
+    height: 100%;
+    background: @color-white;
+    font-size: @font-size-control-small;
+    padding: 0 35px 0 15px;
+    border-radius: @border-radius;
+    cursor: pointer;
+    color: @color-disabled-900;
 
-    .title {
-      position: relative;
-      border: 1px solid @color-basic-200;
+    @media screen and (max-width: 768px) {
+      padding-left: @padding-control-big-responsive-horizontal;
+    }
+
+    &-content {
       height: 100%;
-      background: @color-white;
-      font-size: @font-size-control-small;
-      padding: 0 35px 0 15px;
-      border-radius: @border-radius;
-      cursor: pointer;
-      color: @color-disabled-900;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      overflow: hidden;
+    }
 
-      .title-content {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        overflow: hidden;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      width: 12px;
+      height: 12px;
+      transform: translateY(-50%);
+      background-size: 100%;
+      background-image: @dex-arrow-down-icon;
+    }
+  }
+
+  &__list {
+    display: none;
+    position: absolute;
+    border: 1px solid @color-basic-200;
+    border-top: none;
+    border-radius: 0 0 @border-radius @border-radius;
+    width: 100%;
+    background-color: @color-white;
+    z-index: 10;
+    overflow: hidden;
+    flex-direction: column;
+    box-shadow: @shadow-main-default;
+
+    w-option {
+      position: relative;
+
+      &.active {
+        background-color: @color-basic-50;
       }
+    }
 
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        right: 16px;
-        top: 50%;
-        width: 12px;
-        height: 12px;
-        transform: translateY(-50%);
-        background-size: 100%;
-        background-image: @dex-arrow-down-icon;
+    .option {
+      cursor: pointer;
+      padding: 8px 35px 8px 15px;
+      white-space: nowrap;
+      color: @color-disabled-900;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: @color-basic-50;
       }
     }
+  }
 
-    &.expanded .title {
+  &__wrap {
+    height: 100%;
+    position: relative;
+
+    &.expanded .select__title {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -86,49 +126,15 @@ w-select {
       }
     }
 
-    .select-list {
-      display: none;
-      position: absolute;
-      border: 1px solid @color-basic-200;
-      border-top: none;
-      border-radius: 0 0 @border-radius @border-radius;
-      width: 100%;
-      background-color: @color-white;
-      z-index: 10;
-      overflow: hidden;
-      flex-direction: column;
-      box-shadow: @shadow-main-default;
-
-      w-option {
-        position: relative;
-
-        &.active {
-          background-color: @color-basic-50;
-        }
-      }
-
-      .option {
-        cursor: pointer;
-        padding: 8px 35px 8px 15px;
-        white-space: nowrap;
-        color: @color-disabled-900;
-        display: flex;
-        align-items: center;
-        &:hover {
-          background-color: @color-basic-50;
-        }
-      }
-    }
-
     &.to-up {
-      .select-list {
+      .select__list {
         border: 1px solid @color-basic-100;
         border-bottom: none;
       }
     }
 
-    &[disabled] .title,
-    &.disabled .title {
+    &[disabled] .select__title,
+    &.disabled .select__title {
       background: @color-basic-50;
       cursor: default;
     }
@@ -137,7 +143,7 @@ w-select {
   &.interface {
     height: 42px;
 
-    .title {
+    .select__title {
       background: @color-white;
       border-color: @color-white;
       color: @color-basic-700;
@@ -150,19 +156,19 @@ w-select {
       border-radius: @border-radius @border-radius 0 0;
       color: @color-basic-700;
 
-      .title {
+      .select__title {
         box-shadow: @shadow-buttons-hover;
         transition: all 0.3s;
         color: @color-basic-700;
       }
 
-      .select:not(.expanded) {
+      .select__wrap:not(.expanded) {
         border-radius: 0 0 @border-radius @border-radius;
       }
     }
 
-    .select.expanded {
-      .title {
+    .select__wrap.expanded {
+      .select__title {
         border-top: 1px solid @color-basic-200;
         border-left: 1px solid @color-basic-200;
         border-right: 1px solid @color-basic-200;
@@ -174,11 +180,239 @@ w-select {
     &[disabled],
     &.disabled {
       &:hover {
-        .select .title {
+        .select__wrap .select__title {
           box-shadow: @shadow-buttons-default; //@color-basic-50;
           color: @color-basic-500;
         }
       }
     }
   }
+
+  &_portfolio {
+    width: 100%;
+    height: 42px;
+    max-width: 250px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 3;
+
+    &:hover {
+      border-radius: @border-radius @border-radius 0 0;
+      color: @color-basic-700;
+
+      .select {
+        &__title {
+          box-shadow: @shadow-buttons-hover;
+          transition: all 0.3s;
+          color: @color-basic-700;
+        }
+  
+        &__wrap:not(.expanded) {
+          border-radius: 0 0 @border-radius @border-radius;
+        }
+      }
+    }
+
+    .select {
+      &__wrap.expanded {
+        .select__title {
+          border-top: 1px solid @color-basic-200;
+          border-left: 1px solid @color-basic-200;
+          border-right: 1px solid @color-basic-200;
+          border-bottom: 1px solid @color-white;
+          border-radius: @border-radius @border-radius 0 0;
+        }
+      }
+
+      &__title {
+        display: flex;
+        padding-left: 40px;
+        .icon-filter();
+        background-position: 15px center;
+        border-color: @color-white;
+        color: @color-basic-700;
+        box-shadow: @shadow-buttons-default;
+        width: 100%;
+        font-size: 15px;
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      &:hover {
+        .select__wrap .select__title {
+          box-shadow: @shadow-buttons-default; //@color-basic-50;
+          color: @color-basic-500;
+        }
+      }
+    }
+
+    @media screen and (max-width: 769px) {
+      width: 50px;
+      height: 42px;
+
+      .select {
+        &__title {
+          // padding-left: 12px;
+          padding: 0;
+          position: relative;
+          font-size: 0;
+          .icon-filter();
+          box-shadow: @shadow-buttons-default;
+          border: none;
+  
+          &::after {
+            display: none;
+          }
+  
+          span {
+            font-size: 9px;
+            display: inline-block;
+            padding: 1px 2px;
+            background: @color-submit-400;
+            color: @white-only;
+            border-radius: @border-radius / 2;
+            line-height: 1em;
+          }
+
+          &-content {
+             > span {
+              font-size: 0;
+              right: 5px;
+              top: 5px;
+              position: absolute;
+            }
+          }
+        }
+
+        &__list {
+          left: auto;
+          right: 0;
+          min-width: 156px;
+          margin-top: -1px;
+          border-top: 1px solid @color-accent-50;
+          border-radius: @border-radius 0 @border-radius @border-radius;
+        }
+      }
+    }
+  }
+
+  &_transaction, &_transaction_mobile {
+    height: 42px;
+    margin-right: 10px;
+    flex-grow: 0;
+    white-space: nowrap;
+
+    .select__title {
+      border-color: #fff;
+      color: #4e5c6e;
+      box-shadow: 0 2px 4px 0 rgba(218, 225, 233, 0.5);
+      width: 100%;
+      font-size: 15px;
+    }
+
+    &:hover {
+      border-radius: @border-radius @border-radius 0 0;
+      color: @color-basic-700;
+
+      .select__title {
+        box-shadow: @shadow-buttons-hover;
+        transition: all 0.3s;
+        color: @color-basic-700;
+      }
+
+      .select__wrap:not(.expanded) {
+        border-radius: 0 0 @border-radius @border-radius;
+      }
+    }
+
+    .select__wrap.expanded {
+      .select__title {
+        border-top: 1px solid @color-basic-200;
+        border-left: 1px solid @color-basic-200;
+        border-right: 1px solid @color-basic-200;
+        border-bottom: 1px solid @color-white;
+        border-radius: @border-radius @border-radius 0 0;
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      &:hover {
+        .select__wrap .select__title {
+          box-shadow: @shadow-buttons-default; //@color-basic-50;
+          color: @color-basic-500;
+        }
+      }
+    }
+
+    &_mobile {
+      display: none;
+
+      @media screen and (max-width: 1024px) {
+        display: block;
+        width: 100%;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &_send-modal, &_fee {
+    height: 54px;
+
+    @media screen and (max-width: 768px) {
+      height: 42px;
+    }
+
+    .select {
+      &__list {
+        max-height: 325px;
+        overflow: auto;
+      }
+
+      &__title {
+        overflow: hidden;
+      }
+
+    }
+    
+    .expanded {
+      .select__list {
+        margin-bottom: 40px;
+      }
+    }
+  }
+
+  &_receive-invoice, &_receive-crypt, &_receive-card, &_receive-bank {
+    height: 54px;
+
+    @media screen and (max-width: 768px) {
+      height: 42px;
+    }
+  }
+
+  &_receive-card {
+    flex-basis: 48%;
+  }
+
+  &_setting-session, &_setting-theme {
+    height: 36px;
+
+    .select {
+      &__wrap:not(.expanded) .select__title {
+        border: 1px solid transparent;
+      }
+
+      &__wrap.expanded .select__title {
+        border: 1px solid @color-basic-200;
+        border-bottom: 1px solid transparent;
+      }
+
+      &__list {
+        overflow-y: auto;
+        max-height: 140px;
+      }
+    }
+  }
 }
diff --git a/src/modules/ui/directives/selectFilter/selectFilter.less b/src/modules/ui/directives/selectFilter/selectFilter.less
index 4d4bf6d5fe..e978ba3046 100644
--- a/src/modules/ui/directives/selectFilter/selectFilter.less
+++ b/src/modules/ui/directives/selectFilter/selectFilter.less
@@ -1,7 +1,7 @@
 @import (reference) 'config';
 @import (reference) 'icons';
 
-w-select {
+.select {
   w-select-filter {
     display: none;
     position: relative;
@@ -11,8 +11,8 @@ w-select {
   }
 }
 
-w-select {
-  div.select.expanded {
+.select {
+  div.select__wrap.expanded {
     position: relative;
     z-index: 1;
 
diff --git a/src/modules/ui/directives/transactionList/transactionList.less b/src/modules/ui/directives/transactionList/transactionList.less
index 9240808bb6..581615e3ad 100644
--- a/src/modules/ui/directives/transactionList/transactionList.less
+++ b/src/modules/ui/directives/transactionList/transactionList.less
@@ -116,4 +116,10 @@ w-transaction-list {
       }
     }
   }
+
+  .transactions w-scroll-box {
+    .scroll-list {
+      height: auto;
+    }
+  }
 }
diff --git a/src/modules/utils/modals/changeToken/change-token-modal.html b/src/modules/utils/modals/changeToken/change-token-modal.html
index ca42176c0c..e274f696bc 100644
--- a/src/modules/utils/modals/changeToken/change-token-modal.html
+++ b/src/modules/utils/modals/changeToken/change-token-modal.html
@@ -47,8 +47,8 @@
                                      w-validator-lt="{{::$ctrl.maxCoinsCount}}"
                                      required></w-input>
 
-                            <div class="select-wrap">
-                                <w-select class="issue-select tiny" ng-model="$ctrl.issue">
+                            <div class="select-wrapper">
+                                <w-select class="select issue-select tiny" ng-model="$ctrl.issue">
                                     <w-option option-type="boolean" value="false">
                                         <span class="caption-1 basic-900" w-i18n-ns="app.tokens"
                                               w-i18n="reissuable.false"></span>
diff --git a/src/modules/utils/modals/changeToken/change-token-modal.less b/src/modules/utils/modals/changeToken/change-token-modal.less
index e95aa93700..537c3553e1 100644
--- a/src/modules/utils/modals/changeToken/change-token-modal.less
+++ b/src/modules/utils/modals/changeToken/change-token-modal.less
@@ -24,7 +24,7 @@ md-dialog.change-token {
       }
     }
 
-    .select-wrap {
+    .select-wrapper {
       position: relative;
       height: 100%;
       width: 50%;
@@ -39,12 +39,12 @@ md-dialog.change-token {
         right: 6px;
         top: 6px;
 
-        .title-content {
+        .select__title-content {
           display: flex;
           align-items: center;
         }
 
-        .title {
+        .select__title {
           background-color: @color-white;
         }
       }
diff --git a/src/modules/utils/modals/receive/Receive.less b/src/modules/utils/modals/receive/Receive.less
index e6a4a83105..56208a9616 100644
--- a/src/modules/utils/modals/receive/Receive.less
+++ b/src/modules/utils/modals/receive/Receive.less
@@ -72,10 +72,10 @@ md-dialog.modal-receive {
       display: none;
     }
 
-    w-select .select-list {
-      max-height: 325px;
-      overflow: auto;
-    }
+    // .select .select__list {
+    //   max-height: 325px;
+    //   overflow: auto;
+    // }
 
     .flex-row {
       display: flex;
@@ -91,7 +91,7 @@ md-dialog.modal-receive {
       width: 100%;
 
       w-input,
-      w-select {
+      .select {
         flex-basis: 48%;
       }
 
@@ -223,17 +223,6 @@ md-dialog.modal-receive {
   }
 }
 
-
-@media screen and (max-width: 768px) {
-  w-select {
-    .select {
-      .title {
-        padding-left: @padding-control-big-responsive-horizontal;
-      }
-    }
-  }
-}
-
 @media screen and (max-width: 540px) {
   md-dialog.modal-receive {
     md-dialog-content {
@@ -270,7 +259,7 @@ md-dialog.modal-receive {
 
 @media screen and (max-width: 420px) {
   w-balance-input w-input .w-input-wrap input[type="text"].big,
-  w-select .select .title {
+  .select .select__wrap .select__title {
     font-size: @font-size-caption-1;
   }
 }
diff --git a/src/modules/utils/modals/receive/receiveBank/receive-bank.html b/src/modules/utils/modals/receive/receiveBank/receive-bank.html
index 16e38982b4..ac856ce1e3 100644
--- a/src/modules/utils/modals/receive/receiveBank/receive-bank.html
+++ b/src/modules/utils/modals/receive/receiveBank/receive-bank.html
@@ -12,7 +12,7 @@
                 </div>
 
                 <w-select
-                    class="big"
+                    class="select select_receive-bank"
                     ng-if="::!$ctrl.isSingleAsset"
                     ng-model="$ctrl.asset"
                 >
diff --git a/src/modules/utils/modals/receive/receiveCard/receive-card.html b/src/modules/utils/modals/receive/receiveCard/receive-card.html
index c1e4bed8bd..5a5ef5dddc 100644
--- a/src/modules/utils/modals/receive/receiveCard/receive-card.html
+++ b/src/modules/utils/modals/receive/receiveCard/receive-card.html
@@ -13,7 +13,7 @@
                     </div>
 
                     <w-select
-                        class="big has-fliter"
+                        class="select big has-fliter"
                         ng-if="::!$ctrl.isSingleAsset"
                         ng-model="$ctrl.chosenAssetId"
                         one-item="$ctrl.purchasablesByCards.length <= 1"
@@ -66,7 +66,7 @@
                                 required
                             ></w-input>
 
-                            <w-select class="big" ng-model="$ctrl.chosenCurrencyIndex">
+                            <w-select class="select select_receive-card" ng-model="$ctrl.chosenCurrencyIndex">
                                 <w-option
                                     ng-repeat="currency in $ctrl.cardFiatList track by $index"
                                     value="$index"
diff --git a/src/modules/utils/modals/receive/receiveCryptocurrency/receive-cryptocurrency.html b/src/modules/utils/modals/receive/receiveCryptocurrency/receive-cryptocurrency.html
index 9a07da177a..1b0448d23e 100644
--- a/src/modules/utils/modals/receive/receiveCryptocurrency/receive-cryptocurrency.html
+++ b/src/modules/utils/modals/receive/receiveCryptocurrency/receive-cryptocurrency.html
@@ -12,7 +12,7 @@
         </div>
 
         <w-select
-            class="big"
+            class="select select_receive-crypt"
             can-search="::true"
             ng-if="::!$ctrl.isSingleAsset"
             ng-model="$ctrl.chosenAssetId"
diff --git a/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html b/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
index 63cb488e53..064c563c5a 100644
--- a/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
+++ b/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
@@ -11,7 +11,7 @@
             </div>
 
             <w-select
-                class="big"
+                class="select big"
                 can-search="::true"
                 ng-if="::!$ctrl.isSingleAsset"
                 ng-model="$ctrl.chosenAssetId"
@@ -37,7 +37,7 @@
         <div class="row margin-2">
             <div class="body-2 basic-900 margin-05" w-i18n="modal.receive.addressOrAlias"></div>
 
-            <w-select class="big" ng-model="$ctrl.chosenAlias">
+            <w-select class="select select_receive-invoice" ng-model="$ctrl.chosenAlias">
                 <w-option ng-repeat="alias in ::$ctrl.addressAndAliases track by $index" value="::alias">
                     {{::alias}}
                 </w-option>
diff --git a/src/modules/utils/modals/sendAsset/send-header.html b/src/modules/utils/modals/sendAsset/send-header.html
index 89afd4c58f..5c72e2f846 100644
--- a/src/modules/utils/modals/sendAsset/send-header.html
+++ b/src/modules/utils/modals/sendAsset/send-header.html
@@ -11,7 +11,7 @@
             <span class="mobile-ellipsis ellipsis asset__name">&nbsp;{{$ctrl.balance.asset.displayName}}</span>
         </div>
     </div>
-    <w-select class="big"
+    <w-select class="select select_send-modal"
               can-search="::true"
               ng-if="$ctrl.canChooseAsset && $ctrl.choosableMoneyList.length > 1"
               ng-model="$ctrl.state.assetId">
diff --git a/src/modules/utils/modals/sendAsset/send.modal.less b/src/modules/utils/modals/sendAsset/send.modal.less
index 1f76bc3d25..a93725f29d 100644
--- a/src/modules/utils/modals/sendAsset/send.modal.less
+++ b/src/modules/utils/modals/sendAsset/send.modal.less
@@ -213,8 +213,7 @@ md-dialog.modal-send {
       max-height: 300px;
     }
 
-    w-select {
-
+    .select {
       .asset {
         &__name {
           @media screen and (max-width: 540px) {
@@ -235,20 +234,20 @@ md-dialog.modal-send {
         }
       }
 
-      .title {
-        overflow-x: hidden;
-      }
+      // &__title {
+      //   overflow-x: hidden;
+      // }
 
-      .expanded {
-        .select-list {
-          margin-bottom: 40px;
-        }
-      }
+      // .expanded {
+      //   .select__list {
+      //     margin-bottom: 40px;
+      //   }
+      // }
 
-      .select-list {
-        max-height: 325px;
-        overflow: auto;
-      }
+      // .select__list {
+      //   max-height: 325px;
+      //   overflow: auto;
+      // }
     }
 
     .input-like {
@@ -469,7 +468,7 @@ md-dialog.modal-send {
       }
 
       w-balance-input w-input .w-input-wrap input[type="text"].big,
-      w-select .select .title {
+      .select .select__wrap .select__title {
         font-size: @font-size-caption-1;
       }
     }
diff --git a/src/modules/utils/modals/settings/settings.html b/src/modules/utils/modals/settings/settings.html
index b5e95c9c47..c8342689a2 100644
--- a/src/modules/utils/modals/settings/settings.html
+++ b/src/modules/utils/modals/settings/settings.html
@@ -50,7 +50,7 @@
                 <div class="row flex-row row-style unit-select">
                     <div class="footnote-1 basic-500" w-i18n="modal.settings.general.timeout"></div>
                     <div class="select-setting-wrap">
-                        <w-select class="small with-scroll select__no-user-select" ng-model="$ctrl.logoutAfterMin">
+                        <w-select class="select select_setting-session small with-scroll select__no-user-select" ng-model="$ctrl.logoutAfterMin">
                             <w-option value="::5">
                                 <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                       params="{minutes: 5}"></span>
@@ -78,7 +78,7 @@
                 <div class="row flex-row row-style unit-select">
                     <div class="footnote-1 basic-500" w-i18n="modal.settings.general.theme"></div>
                     <div class="select-setting-wrap">
-                        <w-select class="small select__no-user-select" ng-model="$ctrl.theme">
+                        <w-select class="select select_setting-theme small select__no-user-select" ng-model="$ctrl.theme">
                             <w-option value="::'default'">
                                 <i class="white-dot"></i>
                                 <span w-i18n-ns="app.utils" w-i18n="modal.settings.general.white"></span>
diff --git a/src/modules/utils/modals/settings/settings.less b/src/modules/utils/modals/settings/settings.less
index 5345fd0280..7ba200ff7c 100644
--- a/src/modules/utils/modals/settings/settings.less
+++ b/src/modules/utils/modals/settings/settings.less
@@ -34,18 +34,18 @@ md-dialog.settings-modal {
     display: block;
   }
 
-  w-select {
-    &.with-scroll {
-      .select-list {
-        overflow-y: auto;
-        max-height: 140px;
-      }
-    }
-
-    .select:not(.expanded) .title {
-      border: 1px solid transparent;
-    }
-  }
+  // .select {
+  //   &.with-scroll {
+  //     .select__list {
+  //       overflow-y: auto;
+  //       max-height: 140px;
+  //     }
+  //   }
+
+  //   .select__wrap:not(.expanded) .select__title {
+  //     border: 1px solid transparent;
+  //   }
+  // }
 
   w-responsive-menu {
     width: 199px;
@@ -221,7 +221,7 @@ md-dialog.settings-modal {
     height: 12px;
   }
 
-  w-select w-option i {
+  .select w-option i {
     margin-top: -2px;
   }
 
@@ -456,8 +456,8 @@ md-dialog.settings-modal {
 
   .select-setting-wrap,
   w-change-language {
-    w-select {
-      .select.expanded .title {
+    .select {
+      .select__wrap.expanded .select__title {
         border: 1px solid @color-basic-200;
         border-bottom: 1px solid transparent;
       }
diff --git a/src/modules/wallet/modules/assets/less/assets.less b/src/modules/wallet/modules/assets/less/assets.less
index 1053a8b6b7..f367f17610 100644
--- a/src/modules/wallet/modules/assets/less/assets.less
+++ b/src/modules/wallet/modules/assets/less/assets.less
@@ -14,7 +14,7 @@
       height: 42px;
       margin-bottom: 10px;
 
-      .title-content {
+      .select__title-content {
         height: 36px;
       }
     }
diff --git a/src/modules/wallet/modules/assets/templates/assets.html b/src/modules/wallet/modules/assets/templates/assets.html
index 2fc7fdb1a2..92afc1ee01 100644
--- a/src/modules/wallet/modules/assets/templates/assets.html
+++ b/src/modules/wallet/modules/assets/templates/assets.html
@@ -33,7 +33,7 @@
                     </w-radio>
                 </w-radio-wrap>
 
-                <w-select class="toolbar-balance-select"
+                <w-select class="select toolbar-balance-select"
                           ng-model="$ctrl.activeChartAssetId">
                     <w-option w-add-class ng-repeat="asset in $ctrl.chartAssetList track by asset.id"
                               value="::asset.id">
diff --git a/src/modules/wallet/modules/portfolio/less/portfolio.less b/src/modules/wallet/modules/portfolio/less/portfolio.less
index 01e89eab87..0b64ce51d3 100644
--- a/src/modules/wallet/modules/portfolio/less/portfolio.less
+++ b/src/modules/wallet/modules/portfolio/less/portfolio.less
@@ -36,21 +36,21 @@
     flex-direction: row;
     margin-bottom: 10px;
 
-    w-select {
-      width: 100%;
-      max-width: 250px;
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 3;
-
-      .title {
-        display: flex;
-        padding-left: 40px;
-        .icon-filter();
-        background-position: 15px center;
-      }
-    }
+    // .select {
+    //   width: 100%;
+    //   max-width: 250px;
+    //   position: absolute;
+    //   right: 0;
+    //   top: 0;
+    //   z-index: 3;
+
+    //   .select__title {
+    //     display: flex;
+    //     padding-left: 40px;
+    //     .icon-filter();
+    //     background-position: 15px center;
+    //   }
+    // }
   }
 
   .btn-icon {
@@ -122,51 +122,51 @@
     .toolbar {
       width: calc(100% ~'- 10px');
 
-      w-select {
-        width: 50px;
-        height: 42px;
-
-        .title {
-          padding: 0;
-          position: relative;
-          font-size: 0;
-          .icon-filter();
-          box-shadow: @shadow-buttons-default;
-          border: none;
-
-          &::after {
-            display: none;
-          }
-
-          .title-content {
-            & > span {
-              font-size: 0;
-              right: 5px;
-              top: 5px;
-              position: absolute;
-            }
-          }
-
-          span {
-            font-size: 9px;
-            display: inline-block;
-            padding: 1px 2px;
-            background: @color-submit-400;
-            color: @white-only;
-            border-radius: @border-radius / 2;
-            line-height: 1em;
-          }
-        }
-
-        .select-list {
-          left: auto;
-          right: 0;
-          min-width: 156px;
-          margin-top: -1px;
-          border-top: 1px solid @color-accent-50;
-          border-radius: @border-radius 0 @border-radius @border-radius;
-        }
-      }
+      // .select {
+      //   width: 50px;
+      //   height: 42px;
+
+      //   .select__title {
+      //     padding: 0;
+      //     position: relative;
+      //     font-size: 0;
+      //     .icon-filter();
+      //     box-shadow: @shadow-buttons-default;
+      //     border: none;
+
+      //     &::after {
+      //       display: none;
+      //     }
+
+      //     .select__title-content {
+      //       & > span {
+      //         font-size: 0;
+      //         right: 5px;
+      //         top: 5px;
+      //         position: absolute;
+      //       }
+      //     }
+
+      //     span {
+      //       font-size: 9px;
+      //       display: inline-block;
+      //       padding: 1px 2px;
+      //       background: @color-submit-400;
+      //       color: @white-only;
+      //       border-radius: @border-radius / 2;
+      //       line-height: 1em;
+      //     }
+      //   }
+
+      //   .select__list {
+      //     left: auto;
+      //     right: 0;
+      //     min-width: 156px;
+      //     margin-top: -1px;
+      //     border-top: 1px solid @color-accent-50;
+      //     border-radius: @border-radius 0 @border-radius @border-radius;
+      //   }
+      // }
     }
   }
 }
diff --git a/src/modules/wallet/modules/portfolio/templates/portfolio.html b/src/modules/wallet/modules/portfolio/templates/portfolio.html
index e88b4e14e2..c1da7fe2df 100644
--- a/src/modules/wallet/modules/portfolio/templates/portfolio.html
+++ b/src/modules/wallet/modules/portfolio/templates/portfolio.html
@@ -10,7 +10,7 @@
             <span w-i18n="receive"></span>
         </w-button>
 
-        <w-select ng-model="$ctrl.filter" class="interface select__no-user-select">
+        <w-select ng-model="$ctrl.filter" class="select select_portfolio select__no-user-select">
             <w-option value="::'active'">
                 <span w-i18n="allactive"
                       w-i18n-ns="app.wallet.portfolio"
diff --git a/src/modules/wallet/modules/transactions/less/transactions.less b/src/modules/wallet/modules/transactions/less/transactions.less
index b14280daa2..8f58749b6f 100644
--- a/src/modules/wallet/modules/transactions/less/transactions.less
+++ b/src/modules/wallet/modules/transactions/less/transactions.less
@@ -35,16 +35,16 @@
     }
   }
 
-  w-select {
-    &.split-mode {
-      display: none;
-    }
-    &.tx-filter {
-      margin-right: 10px;
-      flex-grow: 0;
-      white-space: nowrap;
-    }
-  }
+  // .select {
+    // &.split-mode {
+    //   display: none;
+    // }
+    // &.tx-filter {
+    //   margin-right: 10px;
+    //   flex-grow: 0;
+    //   white-space: nowrap;
+    // }
+  // }
 
   button.download {
     flex-grow: 0;
@@ -57,11 +57,11 @@
       display: none;
     }
 
-    w-select.split-mode {
-      display: block;
-      width: 100%;
-      margin-right: 10px;
-    }
+    // .select.split-mode {
+    //   display: block;
+    //   width: 100%;
+    //   margin-right: 10px;
+    // }
 
     w-button {
       & > *.interface svg {
diff --git a/src/modules/wallet/modules/transactions/templates/transactions.html b/src/modules/wallet/modules/transactions/templates/transactions.html
index 56cb4ff52b..cfec18fb1f 100644
--- a/src/modules/wallet/modules/transactions/templates/transactions.html
+++ b/src/modules/wallet/modules/transactions/templates/transactions.html
@@ -22,7 +22,7 @@
             </w-radio>
         </w-radio-wrap>
 
-        <w-select class="split-mode interface select__no-user-select" ng-model="$ctrl.filter">
+        <w-select class="select select_transaction_mobile select__no-user-select" ng-model="$ctrl.filter">
             <w-option value="::'all'">
                 <span w-i18n="all" w-i18n-ns="app.wallet.transactions"></span>
             </w-option>
@@ -43,7 +43,7 @@
             </w-option>
         </w-select>
 
-        <w-select ng-model="$ctrl.limit" class="tx-filter interface select__no-user-select">
+        <w-select ng-model="$ctrl.limit" class="select select_transaction select__no-user-select">
             <w-option value="::100">
                 <span w-i18n="filter.value1" w-i18n-ns="app.wallet.transactions" params="{count: 100}"></span>
             </w-option>

From 16893818cd3c3523c03bcd648201fa8c324105aa Mon Sep 17 00:00:00 2001
From: Vusal Gakhramanov <vgakhramanov@wavesplatform.com>
Date: Mon, 9 Sep 2019 10:24:40 +0300
Subject: [PATCH 2/6] DEXW-1936: bem select

---
 .../directives/createOrder/createOrder.html   |  4 +-
 .../directives/createOrder/expiration.less    | 48 ++++++++--------
 src/modules/tokens/templates/tokens.html      |  2 +-
 src/modules/ui/directives/input/input.less    | 28 +++++-----
 src/modules/ui/directives/select/select.less  | 55 +++++++++++++++++++
 5 files changed, 96 insertions(+), 41 deletions(-)

diff --git a/src/modules/dex/directives/createOrder/createOrder.html b/src/modules/dex/directives/createOrder/createOrder.html
index 6b8ea1ec55..42a8c156c6 100644
--- a/src/modules/dex/directives/createOrder/createOrder.html
+++ b/src/modules/dex/directives/createOrder/createOrder.html
@@ -232,7 +232,7 @@
 
                         <div class="expiration__item expiration__item-fee" ng-if="$ctrl.feeList.length">
                             <span class="expiration__label" w-i18n="directives.createOrder.matcherFee"></span>
-                            <w-select class="select expiration__select select__no-user-select" ng-model="$ctrl.fee" up-direction="true">
+                            <w-select class="select select_create-order expiration__select select__no-user-select" ng-model="$ctrl.fee" up-direction="true">
                                 <w-option ng-repeat="fee in $ctrl.feeList track by fee.asset.displayName" value="fee">
                                     {{fee.toFormat()}} {{(fee.asset.ticker || fee.asset.displayName)}}
                                 </w-option>
@@ -241,7 +241,7 @@
 
                         <div class="expiration__item expiration__item-acting">
                             <div class="expiration__label" w-i18n="directives.createOrder.expiration"></div>
-                            <w-select class="select expiration__select select__no-user-select" ng-model="$ctrl.expiration" up-direction="true">
+                            <w-select class="select select_create-order expiration__select select__no-user-select" ng-model="$ctrl.expiration" up-direction="true">
                                 <w-option ng-repeat="option in $ctrl.expirationValues track by option.name"
                                           value="::option.name"
                                           w-app-class>
diff --git a/src/modules/dex/directives/createOrder/expiration.less b/src/modules/dex/directives/createOrder/expiration.less
index fd489dbb89..511a2c1c54 100644
--- a/src/modules/dex/directives/createOrder/expiration.less
+++ b/src/modules/dex/directives/createOrder/expiration.less
@@ -34,27 +34,27 @@
     }
 
     .select__wrap {
-      position: static;
+      // position: static;
 
-      .select__title {
-        padding: 2px 15px 2px 5px;
-        border: 1px solid transparent;
-        font-size: @font-size-caption-2;
+      // .select__title {
+        // padding: 2px 15px 2px 5px;
+        // border: 1px solid transparent;
+        // font-size: @font-size-caption-2;
 
-        &::after {
-          right: 0;
-          background-image: @select-arrow-icon;
-          background-repeat: no-repeat;
-          background-size: 90%;
-        }
-      }
+        // &::after {
+        //   right: 0;
+        //   background-image: @select-arrow-icon;
+        //   background-repeat: no-repeat;
+        //   background-size: 90%;
+        // }
+      // }
 
       .select__list {
-        box-shadow: @dropdown-shadow;
-        border: 0;
-        border-radius: 4px;
-        padding: 5px 0;
-        width: auto;
+        // box-shadow: @dropdown-shadow;
+        // border: 0;
+        // border-radius: 4px;
+        // padding: 5px 0;
+        // width: auto;
 
         w-option {
           .option {
@@ -71,13 +71,13 @@
         }
       }
 
-      &.expanded {
-        .select__title {
-          &:after {
-            background-image: @select-arrow-active-icon;
-          }
-        }
-      }
+      // &.expanded {
+      //   .select__title {
+      //     &:after {
+      //       background-image: @select-arrow-active-icon;
+      //     }
+      //   }
+      // }
     }
   }
 }
diff --git a/src/modules/tokens/templates/tokens.html b/src/modules/tokens/templates/tokens.html
index 26baac319e..0c38f9bc00 100644
--- a/src/modules/tokens/templates/tokens.html
+++ b/src/modules/tokens/templates/tokens.html
@@ -83,7 +83,7 @@
                                          w-validator-number
                                          required></w-input>
 
-                                <w-select class="select no-user-select tiny" ng-model="$ctrl.issue">
+                                <w-select class="select select_token no-user-select" ng-model="$ctrl.issue">
                                     <w-option value="::false">
                                      <span class="caption-1 mobile-caption-4 basic-700" w-i18n-ns="app.tokens"
                                            w-i18n="reissuable.false"></span>
diff --git a/src/modules/ui/directives/input/input.less b/src/modules/ui/directives/input/input.less
index 1a26716e03..f5ae60b069 100644
--- a/src/modules/ui/directives/input/input.less
+++ b/src/modules/ui/directives/input/input.less
@@ -82,20 +82,20 @@ input[type="checkbox"] {
     display: flex;
     align-items: center;
 
-    .select {
-      position: absolute;
-      right: 6px;
-      width: calc(50% ~'- 12px');
-
-      .select__title-content {
-        display: flex;
-        align-items: center;
-      }
-
-      .select__title {
-        background-color: @color-white;
-      }
-    }
+    // .select {
+    //   position: absolute;
+    //   right: 6px;
+    //   width: calc(50% ~'- 12px');
+
+    //   .select__title-content {
+    //     display: flex;
+    //     align-items: center;
+    //   }
+
+    //   .select__title {
+    //     background-color: @color-white;
+    //   }
+    // }
 
     w-input .w-input-wrap {
       width: 50%;
diff --git a/src/modules/ui/directives/select/select.less b/src/modules/ui/directives/select/select.less
index 898fa94b45..046f42d661 100644
--- a/src/modules/ui/directives/select/select.less
+++ b/src/modules/ui/directives/select/select.less
@@ -415,4 +415,59 @@
       }
     }
   }
+
+  &_token {
+    height: 30px;
+    position: absolute;
+    right: 6px;
+    width: calc(50% ~"- 12px");
+
+    .select {
+      &__title {
+        color: @color-white;
+
+        &-content {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  &_create-order {
+    .select {
+      &__wrap {
+        position: static;
+
+        &.expanded {
+          .select__title {
+            &:after {
+              background-image: @select-arrow-active-icon;
+            }
+          }
+        }
+      }
+
+      &__title {
+        padding: 2px 15px 2px 5px;
+        border: 1px solid transparent;
+        font-display: 11px;
+
+        &::after {
+          right: 0;
+          background-image: @select-arrow-icon;
+          background-repeat: no-repeat;
+          background-size: 90%;
+        }
+      }
+
+      &__list {
+        box-shadow: 0 2px 14px 0 rgba(31, 39, 61, 0.15);
+        border: 0;
+        border-radius: 4px;
+        padding: 5px 0;
+        width: auto;
+      }
+    }
+  }
 }

From c1fe9dd45924597885f3da75baf4e3826678a3fb Mon Sep 17 00:00:00 2001
From: Vusal Gakhramanov <vgakhramanov@wavesplatform.com>
Date: Mon, 9 Sep 2019 18:36:32 +0300
Subject: [PATCH 3/6] DEXW-1936: bem select

---
 .../directives/createOrder/expiration.less    |  55 +-
 .../directives/dexWatchlist/DexWatchlist.html |   2 +-
 .../directives/dexWatchlist/DexWatchlist.less |  84 ----
 .../changeLanguage/changeLanguage.html        |   4 +-
 .../changeLanguage/changeLanguage.less        | 182 ++-----
 .../ui/directives/select/less/.select.less    | 178 +++++++
 .../select/less/select-change-lang.less       | 113 +++++
 .../select/less/select-create-order.less      |  41 ++
 .../select/less/select-portfolio.less         | 113 +++++
 .../select/less/select-receive.less           |  18 +
 .../select/less/select-sendModal&fee.less     |  32 ++
 .../select/less/select-setting.less           |  26 +
 .../directives/select/less/select-token.less  |  18 +
 .../select/less/select-transaction.less       |  64 +++
 .../select/less/select-watch-list.less        |  91 ++++
 src/modules/ui/directives/select/select.less  | 473 ------------------
 .../directives/selectFilter/selectFilter.less |   1 -
 .../changeToken/change-token-modal.html       |   2 +-
 .../changeToken/change-token-modal.less       |  16 +-
 src/modules/utils/modals/receive/Receive.less |   8 +-
 .../receive/receiveCard/receive-card.html     |   2 +-
 .../receiveInvoice/receive-invoice.html       |   2 +-
 .../utils/modals/sendAsset/send.modal.less    |  15 -
 .../utils/modals/settings/settings.html       |   4 +-
 .../utils/modals/settings/settings.less       |  23 -
 .../modules/portfolio/less/portfolio.less     |  62 ---
 .../transactions/less/transactions.less       |  17 -
 27 files changed, 748 insertions(+), 898 deletions(-)
 create mode 100644 src/modules/ui/directives/select/less/.select.less
 create mode 100644 src/modules/ui/directives/select/less/select-change-lang.less
 create mode 100644 src/modules/ui/directives/select/less/select-create-order.less
 create mode 100644 src/modules/ui/directives/select/less/select-portfolio.less
 create mode 100644 src/modules/ui/directives/select/less/select-receive.less
 create mode 100644 src/modules/ui/directives/select/less/select-sendModal&fee.less
 create mode 100644 src/modules/ui/directives/select/less/select-setting.less
 create mode 100644 src/modules/ui/directives/select/less/select-token.less
 create mode 100644 src/modules/ui/directives/select/less/select-transaction.less
 create mode 100644 src/modules/ui/directives/select/less/select-watch-list.less
 delete mode 100644 src/modules/ui/directives/select/select.less

diff --git a/src/modules/dex/directives/createOrder/expiration.less b/src/modules/dex/directives/createOrder/expiration.less
index 511a2c1c54..75a5ac1365 100644
--- a/src/modules/dex/directives/createOrder/expiration.less
+++ b/src/modules/dex/directives/createOrder/expiration.less
@@ -33,51 +33,18 @@
       margin-left: 5px;
     }
 
-    .select__wrap {
-      // position: static;
-
-      // .select__title {
-        // padding: 2px 15px 2px 5px;
-        // border: 1px solid transparent;
-        // font-size: @font-size-caption-2;
-
-        // &::after {
-        //   right: 0;
-        //   background-image: @select-arrow-icon;
-        //   background-repeat: no-repeat;
-        //   background-size: 90%;
-        // }
-      // }
-
-      .select__list {
-        // box-shadow: @dropdown-shadow;
-        // border: 0;
-        // border-radius: 4px;
-        // padding: 5px 0;
-        // width: auto;
-
-        w-option {
-          .option {
-            display: block;
-            text-align: right;
-            overflow: hidden;
-            width: 100%;
-            text-overflow: ellipsis;
-            padding: 2px 12px;
-            line-height: 20px;
-            font-size: @font-size-caption-2;
-            color: @color-basic-900;
-          }
-        }
+    w-option {
+      .option {
+        display: block;
+        text-align: right;
+        overflow: hidden;
+        width: 100%;
+        text-overflow: ellipsis;
+        padding: 2px 12px;
+        line-height: 20px;
+        font-size: @font-size-caption-2;
+        color: @color-basic-900;
       }
-
-      // &.expanded {
-      //   .select__title {
-      //     &:after {
-      //       background-image: @select-arrow-active-icon;
-      //     }
-      //   }
-      // }
     }
   }
 }
diff --git a/src/modules/dex/directives/dexWatchlist/DexWatchlist.html b/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
index db9fcef66e..4d50a4dc79 100644
--- a/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
+++ b/src/modules/dex/directives/dexWatchlist/DexWatchlist.html
@@ -10,7 +10,7 @@
 
         <w-select ng-model="$ctrl.dropDownId"
                   ng-class="{'active': $ctrl.isActiveSelect}"
-                  class="select select__no-user-select">
+                  class="select select_watch-list select__no-user-select">
             <w-option ng-repeat="option in $ctrl.dropDown track by option.id"
                       value="::option.id">
                 {{::option.name}}
diff --git a/src/modules/dex/directives/dexWatchlist/DexWatchlist.less b/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
index 95e7fd1c82..2a697e0860 100644
--- a/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
+++ b/src/modules/dex/directives/dexWatchlist/DexWatchlist.less
@@ -84,41 +84,6 @@
     }
 
     .select {
-      position: relative;
-      z-index: 6;
-
-      .select__list {
-        max-height: 155px;
-        overflow: auto;
-        border-color: @color-basic-100;
-        color: @color-basic-700;
-      }
-
-      .title {
-        background: @color-white;
-        font-size: @font-size-caption-2;
-        color: @color-basic-700;
-        font-family: @font-roboto-medium;
-        height: 39px;
-        padding-right: 30px;
-        border: 1px solid transparent;
-
-        &::after {
-          right: 13px;
-          transform: translateY(0);
-          top: 13px;
-          background-size: 80%;
-          background-repeat: no-repeat;
-          background-position: center left;
-        }
-      }
-
-      .select__wrap &.expanded {
-        .select__title {
-          border: 1px solid #000;
-        }
-      }
-
       w-option {
         font-size: @font-size-caption-2;
         color: @color-basic-700;
@@ -130,55 +95,6 @@
           color: @color-basic-700;
         }
       }
-
-      &.active {
-        border-radius: 0;
-        border: 0 none;
-
-        .title {
-          border-left: 1px solid @color-basic-100;
-          border-right: 1px solid @color-basic-100;
-          border-radius: 0;
-
-          &::before {
-            content: '';
-            display: block;
-            width: calc(100% ~'- 2px');
-            height: 2px;
-            background: @color-white;
-            position: absolute;
-            z-index: 1;
-            bottom: -2px;
-            left: 1px;
-          }
-        }
-
-        &::after {
-          content: '';
-          display: block;
-          width: 100%;
-          height: 2px;
-          background: @color-submit-400;
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: 0;
-        }
-
-        .select__list {
-          border-radius: 0;
-        }
-      }
-
-      &:not(.active) {
-        .expanded {
-          .title {
-            border: 1px solid @color-basic-100;
-            border-bottom: 0 none;
-          }
-        }
-      }
-
     }
   }
 
diff --git a/src/modules/ui/directives/changeLanguage/changeLanguage.html b/src/modules/ui/directives/changeLanguage/changeLanguage.html
index cc5608a28d..0b46465158 100644
--- a/src/modules/ui/directives/changeLanguage/changeLanguage.html
+++ b/src/modules/ui/directives/changeLanguage/changeLanguage.html
@@ -1,5 +1,5 @@
-<w-select ng-model="$ctrl.active" class="select select__no-user-select">
+<w-select ng-model="$ctrl.active" class="select select_change-lang select__no-user-select">
     <w-option ng-repeat="lng in $ctrl.list" value="::lng.code">
-        <div class="lng-item lng-{{ ::lng.code }}"><span>{{ ::lng.name }}</span></div>
+        <div class="lng-item lng-{{ ::lng.code }}"><span class="lng-content">{{ ::lng.name }}</span></div>
     </w-option>
 </w-select>
diff --git a/src/modules/ui/directives/changeLanguage/changeLanguage.less b/src/modules/ui/directives/changeLanguage/changeLanguage.less
index fbd91c6928..b401c94774 100644
--- a/src/modules/ui/directives/changeLanguage/changeLanguage.less
+++ b/src/modules/ui/directives/changeLanguage/changeLanguage.less
@@ -1,132 +1,5 @@
 @import (reference) 'config';
 
-w-change-language {
-  .select {
-    width: 142px;
-    height: 36px;
-
-    .select__wrap {
-      .select__title {
-        border: 1px solid transparent;
-      }
-
-      .select__list {
-        max-height: 171px;
-        overflow: auto;
-      }
-    }
-
-    .lng-item {
-      text-transform: capitalize;
-      font-size: @font-size-control-small;
-      white-space: nowrap;
-      width: 100%;
-
-      span {
-        display: inline-block;
-        min-width: 18px;
-      }
-
-      &::before {
-        content: '';
-        width: 18px;
-        height: 18px;
-        display: inline-block;
-        margin-right: 6px;
-        vertical-align: top;
-        background-position: center center;
-      }
-    }
-
-    .lng-ru::before {
-      background: url(/img/icons/flags/ru.svg) no-repeat center;
-    }
-
-    .lng-en::before {
-      background: url(/img/icons/flags/en.svg) no-repeat center;
-    }
-
-    .lng-ko::before {
-      background: url(/img/icons/flags/ko.svg) no-repeat center;
-    }
-
-    .lng-tr::before {
-      background: url(/img/icons/flags/tr.svg) no-repeat center;
-    }
-
-    .lng-zh_CN::before {
-      background: url(/img/icons/flags/zh-Hans-CN.svg) no-repeat center;
-    }
-
-    .lng-ja::before,
-    .lng-ja-JP::before {
-      background: url(/img/icons/flags/jp.svg) no-repeat center;
-    }
-
-    .lng-nl::before,
-    .lng-nl_NL::before {
-      background: url(/img/icons/flags/nl.svg) no-repeat center;
-    }
-
-    .lng-hi_IN::before {
-      background: url(/img/icons/flags/hi.svg) no-repeat center;
-    }
-
-    .lng-es::before {
-      background: url(/img/icons/flags/es.svg) no-repeat center;
-    }
-
-    .lng-pt_BR::before {
-      background: url(/img/icons/flags/br.svg) no-repeat center;
-    }
-
-    .lng-pl::before {
-      background: url(/img/icons/flags/pl.svg) no-repeat center;
-    }
-
-    .lng-de::before {
-      background: url(/img/icons/flags/de.svg) no-repeat center;
-    }
-
-    .lng-et_EE::before {
-      background: url(/img/icons/flags/est.svg) no-repeat center;
-    }
-
-    .lng-fr::before {
-      background: url(/img/icons/flags/fr.svg) no-repeat center;
-    }
-
-    .lng-id::before {
-      background: url(/img/icons/flags/id.svg) no-repeat center;
-    }
-
-    .lng-it::before {
-      background: url(/img/icons/flags/it.svg) no-repeat center;
-    }
-  }
-}
-
-.footer {
-  w-change-language {
-    .select {
-      .select__wrap {
-        .select__list {
-          border-top: 1px solid @color-basic-200;
-          transform: translateY(-100%);
-          margin-top: -39px;
-        }
-
-        &.expanded {
-          .select__title::after {
-            transition: .5s;
-            transform: translateY(-50%) rotate(180deg);
-          }
-        }
-      }
-    }
-  }
-}
-
 .web-footer-language {
   .select {
     width: 200px;
@@ -148,37 +21,46 @@ w-change-language {
         border: 1px solid @changeLang-border-footer;
         border-top: 0 none;
         border-radius: 0;
-      }
-
-      .select__list {
-        background: @footer-background;
-        border-radius: 4px 4px 0 0;
-        flex-direction: column-reverse;
-        border: 1px solid @changeLang-border-footer;
-        border-bottom: 0 none;
-        box-shadow: none;
 
-        w-option.active {
-          display: none;
+        &::after {
+          transition: .5s;
+          transform: translateY(-50%) rotate(180deg);
         }
+      }
 
-        .option {
-          transition: .3s;
-          padding: 0 15px;
-          color: @white-only;
+    }
 
-          &:hover {
-            background: @footer-select-bg-hover;
-          }
-        }
+    .select__title {
+      border: 1px solid @changeLang-border-footer;
+      border-radius: 2px;
+      background: none transparent;
+      padding: 0 15px;
+      color: @white-only;
+    }
+
+    &__list {
+      background: @footer-background;
+      border-radius: 4px 4px 0 0;
+      flex-direction: column-reverse;
+      border: 1px solid @changeLang-border-footer;
+      border-bottom: 0 none;
+      box-shadow: none;
+      border-top: 1px solid @color-basic-200;
+      transform: translateY(-100%);
+      margin-top: -39px;
+
+      w-option.active {
+        display: none;
       }
 
-      .select__title {
-        border: 1px solid @changeLang-border-footer;
-        border-radius: 2px;
-        background: none transparent;
+      .option {
+        transition: .3s;
         padding: 0 15px;
         color: @white-only;
+
+        &:hover {
+          background: @footer-select-bg-hover;
+        }
       }
     }
 
diff --git a/src/modules/ui/directives/select/less/.select.less b/src/modules/ui/directives/select/less/.select.less
new file mode 100644
index 0000000000..f229824363
--- /dev/null
+++ b/src/modules/ui/directives/select/less/.select.less
@@ -0,0 +1,178 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select {
+  display: block;
+  
+  &.one-item .select__wrap .select__title {
+    cursor: default;
+
+    &::after {
+      background-image: none;
+    }
+
+    w-avatar .avatar-wrap {
+      cursor: default;
+    }
+  }
+  
+  &.hide-active .select__wrap .select__list w-option.active {
+    display: none;
+  }
+
+  &__no-user-select {
+    user-select: none;
+  }
+
+  &__title {
+    position: relative;
+    border: 1px solid @color-basic-200;
+    height: 100%;
+    background: @color-white;
+    font-size: @font-size-control-small;
+    padding: 0 35px 0 15px;
+    border-radius: @border-radius;
+    cursor: pointer;
+    color: @color-disabled-900;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      width: 12px;
+      height: 12px;
+      transform: translateY(-50%);
+      background-size: 100%;
+      background-image: @dex-arrow-down-icon;
+    }
+
+    @media screen and (max-width: 768px) {
+      padding-left: @padding-control-big-responsive-horizontal;
+    }
+
+    @media screen and (max-width: 420px) {
+      font-size: @font-size-caption-1;
+    }
+
+    &-content {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &__list {
+    display: none;
+    position: absolute;
+    border: 1px solid @color-basic-200;
+    border-top: none;
+    border-radius: 0 0 @border-radius @border-radius;
+    width: 100%;
+    background-color: @color-white;
+    z-index: 10;
+    overflow: hidden;
+    flex-direction: column;
+    box-shadow: @shadow-main-default;
+
+    w-option {
+      position: relative;
+
+      &.active {
+        background-color: @color-basic-50;
+      }
+    }
+
+    .option {
+      cursor: pointer;
+      padding: 8px 35px 8px 15px;
+      white-space: nowrap;
+      color: @color-disabled-900;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: @color-basic-50;
+      }
+    }
+  }
+
+  &__wrap {
+    height: 100%;
+    position: relative;
+
+    &.expanded .select__title {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+
+      &::after {
+        background-image: @dex-arrow-down-blue-icon;
+      }
+    }
+
+    &.to-up {
+      .select__list {
+        border: 1px solid @color-basic-100;
+        border-bottom: none;
+      }
+    }
+
+    &[disabled] .select__title,
+    &.disabled .select__title {
+      background: @color-basic-50;
+      cursor: default;
+    }
+  }
+
+  &.interface {
+    height: 42px;
+
+    .select__title {
+      background: @color-white;
+      border-color: @color-white;
+      color: @color-basic-700;
+      box-shadow: @shadow-buttons-default;
+      width: 100%;
+      font-size: 15px;
+    }
+
+    &:hover {
+      border-radius: @border-radius @border-radius 0 0;
+      color: @color-basic-700;
+
+      .select__title {
+        box-shadow: @shadow-buttons-hover;
+        transition: all 0.3s;
+        color: @color-basic-700;
+      }
+
+      .select__wrap:not(.expanded) {
+        border-radius: 0 0 @border-radius @border-radius;
+      }
+    }
+
+    .select__wrap.expanded {
+      .select__title {
+        border-top: 1px solid @color-basic-200;
+        border-left: 1px solid @color-basic-200;
+        border-right: 1px solid @color-basic-200;
+        border-bottom: 1px solid @color-white;
+        border-radius: @border-radius @border-radius 0 0;
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      &:hover {
+        .select__wrap .select__title {
+          box-shadow: @shadow-buttons-default; //@color-basic-50;
+          color: @color-basic-500;
+        }
+      }
+    }
+  }
+}
diff --git a/src/modules/ui/directives/select/less/select-change-lang.less b/src/modules/ui/directives/select/less/select-change-lang.less
new file mode 100644
index 0000000000..8432f3a659
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-change-lang.less
@@ -0,0 +1,113 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_change-lang {
+	width: 142px;
+	height: 36px;
+
+	.select {
+		&__title {
+			border: 1px solid transparent;
+		}
+
+		&__wrap.expanded .select__title {
+			border: 1px solid @color-basic-200;
+			border-bottom: 1px solid transparent;
+		}
+
+		&__list {
+			max-height: 171px;
+			overflow: auto;
+		}
+	}
+
+	.lng-item {
+		text-transform: capitalize;
+		font-size: 13px;
+		white-space: nowrap;
+		width: 100%;
+
+		&::before {
+			content: '';
+			width: 18px;
+			height: 18px;
+			display: inline-block;
+			margin-right: 6px;
+			vertical-align: top;
+			background-position: center center;
+		}
+	}
+
+	.lng-ru::before {
+		background: url(/img/icons/flags/ru.svg) no-repeat center;
+	}
+
+	.lng-en::before {
+		background: url(/img/icons/flags/en.svg) no-repeat center;
+	}
+
+	.lng-ko::before {
+		background: url(/img/icons/flags/ko.svg) no-repeat center;
+	}
+
+	.lng-tr::before {
+		background: url(/img/icons/flags/tr.svg) no-repeat center;
+	}
+
+	.lng-zh_CN::before {
+		background: url(/img/icons/flags/zh-Hans-CN.svg) no-repeat center;
+	}
+
+	.lng-ja::before,
+	.lng-ja-JP::before {
+		background: url(/img/icons/flags/jp.svg) no-repeat center;
+	}
+
+	.lng-nl::before,
+	.lng-nl_NL::before {
+		background: url(/img/icons/flags/nl.svg) no-repeat center;
+	}
+
+	.lng-hi_IN::before {
+		background: url(/img/icons/flags/hi.svg) no-repeat center;
+	}
+
+	.lng-es::before {
+		background: url(/img/icons/flags/es.svg) no-repeat center;
+	}
+
+	.lng-pt_BR::before {
+		background: url(/img/icons/flags/br.svg) no-repeat center;
+	}
+
+	.lng-pl::before {
+		background: url(/img/icons/flags/pl.svg) no-repeat center;
+	}
+
+	.lng-de::before {
+		background: url(/img/icons/flags/de.svg) no-repeat center;
+	}
+
+	.lng-et_EE::before {
+		background: url(/img/icons/flags/est.svg) no-repeat center;
+	}
+
+	.lng-fr::before {
+		background: url(/img/icons/flags/fr.svg) no-repeat center;
+	}
+
+	.lng-id::before {
+		background: url(/img/icons/flags/id.svg) no-repeat center;
+	}
+
+	.lng-it::before {
+		background: url(/img/icons/flags/it.svg) no-repeat center;
+	}
+
+	.lng-content {
+		display: inline-block;
+		min-width: 18px;
+	}
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-create-order.less b/src/modules/ui/directives/select/less/select-create-order.less
new file mode 100644
index 0000000000..0b90df2b31
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-create-order.less
@@ -0,0 +1,41 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_create-order {
+	.select {
+		&__wrap {
+			position: static;
+
+			&.expanded {
+				.select__title {
+					&:after {
+						background-image: @select-arrow-active-icon;
+					}
+				}
+			}
+		}
+
+		&__title {
+			padding: 2px 15px 2px 5px;
+			border: 1px solid transparent;
+			font-size: 11px;
+
+			&::after {
+				right: 0;
+				background-image: @select-arrow-icon;
+				background-repeat: no-repeat;
+				background-size: 90%;
+			}
+		}
+
+		&__list {
+			box-shadow: 0 2px 14px 0 rgba(31, 39, 61, 0.15);
+			border: 0;
+			border-radius: 4px;
+			padding: 5px 0;
+			width: auto;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-portfolio.less b/src/modules/ui/directives/select/less/select-portfolio.less
new file mode 100644
index 0000000000..4041146e48
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-portfolio.less
@@ -0,0 +1,113 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_portfolio {
+	width: 100%;
+	height: 42px;
+	max-width: 250px;
+	position: absolute;
+	right: 0;
+	top: 0;
+	z-index: 3;
+
+	&:hover {
+		border-radius: @border-radius @border-radius 0 0;
+		color: @color-basic-700;
+
+		.select {
+			&__title {
+				box-shadow: @shadow-buttons-hover;
+				transition: all 0.3s;
+				color: @color-basic-700;
+			}
+
+			&__wrap:not(.expanded) {
+				border-radius: 0 0 @border-radius @border-radius;
+			}
+		}
+	}
+
+	.select {
+		&__wrap.expanded {
+			.select__title {
+				border-top: 1px solid @color-basic-200;
+				border-left: 1px solid @color-basic-200;
+				border-right: 1px solid @color-basic-200;
+				border-bottom: 1px solid @color-white;
+				border-radius: @border-radius @border-radius 0 0;
+			}
+		}
+
+		&__title {
+			.icon-filter();
+			display: flex;
+			padding-left: 40px;
+			background-position: 15px center;
+			border-color: @color-white;
+			color: @color-basic-700;
+			box-shadow: @shadow-buttons-default;
+			width: 100%;
+			font-size: 15px;
+		}
+	}
+
+	&[disabled],
+	&.disabled {
+		&:hover {
+			.select__wrap .select__title {
+				box-shadow: @shadow-buttons-default; //@color-basic-50;
+				color: @color-basic-500;
+			}
+		}
+	}
+
+	@media screen and (max-width: 769px) {
+		width: 50px;
+		height: 42px;
+
+		.select {
+			&__title {
+				.icon-filter();
+				padding: 0;
+				position: relative;
+				font-size: 0;
+				box-shadow: @shadow-buttons-default;
+				border: none;
+
+				&::after {
+					display: none;
+				}
+
+				span {
+					font-size: 9px;
+					display: inline-block;
+					padding: 1px 2px;
+					background: @color-submit-400;
+					color: @white-only;
+					border-radius: @border-radius / 2;
+					line-height: 1em;
+				}
+
+				&-content {
+					> span {
+						font-size: 0;
+						right: 5px;
+						top: 5px;
+						position: absolute;
+					}
+				}
+			}
+
+			&__list {
+				left: auto;
+				right: 0;
+				min-width: 156px;
+				margin-top: -1px;
+				border-top: 1px solid @color-accent-50;
+				border-radius: @border-radius 0 @border-radius @border-radius;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-receive.less b/src/modules/ui/directives/select/less/select-receive.less
new file mode 100644
index 0000000000..ea4309d8f7
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-receive.less
@@ -0,0 +1,18 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select {
+	&_receive-invoice, &_receive-crypt, &_receive-card, &_receive-bank {
+		height: @height-control-big;
+
+    @media screen and (max-width: 768px) {
+      height: 42px;
+    }
+  }
+
+  &_receive-card {
+		flex-basis: 48%;
+  }
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-sendModal&fee.less b/src/modules/ui/directives/select/less/select-sendModal&fee.less
new file mode 100644
index 0000000000..bd12f74a2b
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-sendModal&fee.less
@@ -0,0 +1,32 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select {
+	&_send-modal, &_fee {
+    height: 54px;
+
+    @media screen and (max-width: 768px) {
+      height: 42px;
+    }
+
+    .select {
+      &__list {
+        max-height: 325px;
+        overflow: auto;
+      }
+
+      &__title {
+        overflow: hidden;
+      }
+
+    }
+    
+    .expanded {
+      .select__list {
+        margin-bottom: 40px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-setting.less b/src/modules/ui/directives/select/less/select-setting.less
new file mode 100644
index 0000000000..639697731f
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-setting.less
@@ -0,0 +1,26 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select {
+	&_setting-session, &_setting-theme {
+    height: 36px;
+
+    .select {
+      &__wrap:not(.expanded) .select__title {
+        border: 1px solid transparent;
+      }
+
+      &__wrap.expanded .select__title {
+        border: 1px solid @color-basic-200;
+        border-bottom: 1px solid transparent;
+      }
+
+      &__list {
+        overflow-y: auto;
+        max-height: 140px;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-token.less b/src/modules/ui/directives/select/less/select-token.less
new file mode 100644
index 0000000000..c6279b3f86
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-token.less
@@ -0,0 +1,18 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_token {
+  height: 30px;
+  position: absolute;
+  right: 6px;
+  width: calc(50% ~"- 12px");
+
+  .select {
+    &__title-content {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-transaction.less b/src/modules/ui/directives/select/less/select-transaction.less
new file mode 100644
index 0000000000..effeb7eddb
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-transaction.less
@@ -0,0 +1,64 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_transaction, .select_transaction_mobile {
+	height: 42px;
+	margin-right: 10px;
+	flex-grow: 0;
+	white-space: nowrap;
+
+	.select__title {
+		border-color: @color-white;
+		color: @color-basic-700;
+		box-shadow: @shadow-buttons-default;
+		width: 100%;
+		font-size: 15px;
+	}
+
+	&:hover {
+		border-radius: @border-radius @border-radius 0 0;
+		color: @color-basic-700;
+
+		.select__title {
+			box-shadow: @shadow-buttons-hover;
+			transition: all 0.3s;
+			color: @color-basic-700;
+		}
+
+		.select__wrap:not(.expanded) {
+			border-radius: 0 0 @border-radius @border-radius;
+		}
+	}
+
+	.select__wrap.expanded {
+		.select__title {
+			border-top: 1px solid @color-basic-200;
+			border-left: 1px solid @color-basic-200;
+			border-right: 1px solid @color-basic-200;
+			border-bottom: 1px solid @color-white;
+			border-radius: @border-radius @border-radius 0 0;
+		}
+	}
+
+	&[disabled],
+	&.disabled {
+		&:hover {
+			.select__wrap .select__title {
+				box-shadow: @shadow-buttons-default; //@color-basic-50;
+				color: @color-basic-500;
+			}
+		}
+	}
+
+	&_mobile {
+		display: none;
+
+		@media screen and (max-width: 1024px) {
+			display: block;
+			width: 100%;
+			margin-right: 10px;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/select-watch-list.less b/src/modules/ui/directives/select/less/select-watch-list.less
new file mode 100644
index 0000000000..032cd6f394
--- /dev/null
+++ b/src/modules/ui/directives/select/less/select-watch-list.less
@@ -0,0 +1,91 @@
+@import (reference) "../../../../app/less/app-icons";
+@import (reference) '../../../../app/less/typography';
+@import (reference) 'config';
+@import (reference) 'icons';
+
+.select_watch-list {
+	position: relative;
+	z-index: 6;
+	
+	&.active {
+		border-radius: 0;
+		border: 0 none;
+
+		.select__title {
+			border-left: 1px solid @color-basic-100;
+			border-right: 1px solid @color-basic-100;
+			border-radius: 0;
+
+			&::before {
+				content: '';
+				display: block;
+				width: calc(100% ~'- 2px');
+				height: 2px;
+				background: @color-white;
+				position: absolute;
+				z-index: 1;
+				bottom: -2px;
+				left: 1px;
+			}
+		}
+
+		&::after {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 2px;
+			background: @color-submit-400;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			left: 0;
+		}
+
+		.select__list {
+			border-radius: 0;
+		}
+	}
+
+	&:not(.active) {
+		.expanded {
+			.title {
+				border: 1px solid @color-basic-100;
+				border-bottom: 0 none;
+			}
+		}
+	}
+
+	.select {
+		&__title {
+			background: @color-white;
+			font-size: @font-size-caption-2;
+			color: @color-basic-700;
+			font-family: @font-roboto-medium;
+			height: 39px;
+			padding-right: 30px;
+			border: 1px solid transparent;
+
+			&::after {
+				right: 13px;
+				transform: translateY(0);
+				top: 13px;
+				background-size: 80%;
+				background-repeat: no-repeat;
+				background-position: center left;
+			}
+		}
+
+		&__wrap &.expanded {
+			.select__title {
+				border: 1px solid #000;
+			}
+		}
+
+		&__list {
+			max-height: 155px;
+			overflow: auto;
+			border-color: @color-basic-100;
+			color: @color-basic-700;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/select.less b/src/modules/ui/directives/select/select.less
deleted file mode 100644
index 046f42d661..0000000000
--- a/src/modules/ui/directives/select/select.less
+++ /dev/null
@@ -1,473 +0,0 @@
-@import (reference) "../../../app/less/app-icons";
-@import (reference) '../../../app/less/typography';
-@import (reference) 'config';
-@import (reference) 'icons';
-
-.select {
-  display: block;
-
-  &.tiny {
-    height: @height-control-tiny;
-  }
-
-  &.small {
-    height: @height-control-small;
-  }
-
-  &.big {
-    height: @height-control-big;
-  }
-
-  &.select__no-user-select {
-    user-select: none;
-  }
-
-  @media screen and (max-width: 768px) {
-    &.big {
-      height: @height-control-big-responsive;
-    }
-  }
-
-  &.one-item .select__wrap .select__title {
-    cursor: default;
-    &::after {
-      background-image: none;
-    }
-    w-avatar .avatar-wrap {
-      cursor: default;
-    }
-  }
-
-  &.hide-active .select__wrap .select__list w-option.active {
-    display: none;
-  }
-
-  &__title {
-    position: relative;
-    border: 1px solid @color-basic-200;
-    height: 100%;
-    background: @color-white;
-    font-size: @font-size-control-small;
-    padding: 0 35px 0 15px;
-    border-radius: @border-radius;
-    cursor: pointer;
-    color: @color-disabled-900;
-
-    @media screen and (max-width: 768px) {
-      padding-left: @padding-control-big-responsive-horizontal;
-    }
-
-    &-content {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      right: 16px;
-      top: 50%;
-      width: 12px;
-      height: 12px;
-      transform: translateY(-50%);
-      background-size: 100%;
-      background-image: @dex-arrow-down-icon;
-    }
-  }
-
-  &__list {
-    display: none;
-    position: absolute;
-    border: 1px solid @color-basic-200;
-    border-top: none;
-    border-radius: 0 0 @border-radius @border-radius;
-    width: 100%;
-    background-color: @color-white;
-    z-index: 10;
-    overflow: hidden;
-    flex-direction: column;
-    box-shadow: @shadow-main-default;
-
-    w-option {
-      position: relative;
-
-      &.active {
-        background-color: @color-basic-50;
-      }
-    }
-
-    .option {
-      cursor: pointer;
-      padding: 8px 35px 8px 15px;
-      white-space: nowrap;
-      color: @color-disabled-900;
-      display: flex;
-      align-items: center;
-      &:hover {
-        background-color: @color-basic-50;
-      }
-    }
-  }
-
-  &__wrap {
-    height: 100%;
-    position: relative;
-
-    &.expanded .select__title {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      &::after {
-        background-image: @dex-arrow-down-blue-icon;
-      }
-    }
-
-    &.to-up {
-      .select__list {
-        border: 1px solid @color-basic-100;
-        border-bottom: none;
-      }
-    }
-
-    &[disabled] .select__title,
-    &.disabled .select__title {
-      background: @color-basic-50;
-      cursor: default;
-    }
-  }
-
-  &.interface {
-    height: 42px;
-
-    .select__title {
-      background: @color-white;
-      border-color: @color-white;
-      color: @color-basic-700;
-      box-shadow: @shadow-buttons-default;
-      width: 100%;
-      font-size: 15px;
-    }
-
-    &:hover {
-      border-radius: @border-radius @border-radius 0 0;
-      color: @color-basic-700;
-
-      .select__title {
-        box-shadow: @shadow-buttons-hover;
-        transition: all 0.3s;
-        color: @color-basic-700;
-      }
-
-      .select__wrap:not(.expanded) {
-        border-radius: 0 0 @border-radius @border-radius;
-      }
-    }
-
-    .select__wrap.expanded {
-      .select__title {
-        border-top: 1px solid @color-basic-200;
-        border-left: 1px solid @color-basic-200;
-        border-right: 1px solid @color-basic-200;
-        border-bottom: 1px solid @color-white;
-        border-radius: @border-radius @border-radius 0 0;
-      }
-    }
-
-    &[disabled],
-    &.disabled {
-      &:hover {
-        .select__wrap .select__title {
-          box-shadow: @shadow-buttons-default; //@color-basic-50;
-          color: @color-basic-500;
-        }
-      }
-    }
-  }
-
-  &_portfolio {
-    width: 100%;
-    height: 42px;
-    max-width: 250px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 3;
-
-    &:hover {
-      border-radius: @border-radius @border-radius 0 0;
-      color: @color-basic-700;
-
-      .select {
-        &__title {
-          box-shadow: @shadow-buttons-hover;
-          transition: all 0.3s;
-          color: @color-basic-700;
-        }
-  
-        &__wrap:not(.expanded) {
-          border-radius: 0 0 @border-radius @border-radius;
-        }
-      }
-    }
-
-    .select {
-      &__wrap.expanded {
-        .select__title {
-          border-top: 1px solid @color-basic-200;
-          border-left: 1px solid @color-basic-200;
-          border-right: 1px solid @color-basic-200;
-          border-bottom: 1px solid @color-white;
-          border-radius: @border-radius @border-radius 0 0;
-        }
-      }
-
-      &__title {
-        display: flex;
-        padding-left: 40px;
-        .icon-filter();
-        background-position: 15px center;
-        border-color: @color-white;
-        color: @color-basic-700;
-        box-shadow: @shadow-buttons-default;
-        width: 100%;
-        font-size: 15px;
-      }
-    }
-
-    &[disabled],
-    &.disabled {
-      &:hover {
-        .select__wrap .select__title {
-          box-shadow: @shadow-buttons-default; //@color-basic-50;
-          color: @color-basic-500;
-        }
-      }
-    }
-
-    @media screen and (max-width: 769px) {
-      width: 50px;
-      height: 42px;
-
-      .select {
-        &__title {
-          // padding-left: 12px;
-          padding: 0;
-          position: relative;
-          font-size: 0;
-          .icon-filter();
-          box-shadow: @shadow-buttons-default;
-          border: none;
-  
-          &::after {
-            display: none;
-          }
-  
-          span {
-            font-size: 9px;
-            display: inline-block;
-            padding: 1px 2px;
-            background: @color-submit-400;
-            color: @white-only;
-            border-radius: @border-radius / 2;
-            line-height: 1em;
-          }
-
-          &-content {
-             > span {
-              font-size: 0;
-              right: 5px;
-              top: 5px;
-              position: absolute;
-            }
-          }
-        }
-
-        &__list {
-          left: auto;
-          right: 0;
-          min-width: 156px;
-          margin-top: -1px;
-          border-top: 1px solid @color-accent-50;
-          border-radius: @border-radius 0 @border-radius @border-radius;
-        }
-      }
-    }
-  }
-
-  &_transaction, &_transaction_mobile {
-    height: 42px;
-    margin-right: 10px;
-    flex-grow: 0;
-    white-space: nowrap;
-
-    .select__title {
-      border-color: #fff;
-      color: #4e5c6e;
-      box-shadow: 0 2px 4px 0 rgba(218, 225, 233, 0.5);
-      width: 100%;
-      font-size: 15px;
-    }
-
-    &:hover {
-      border-radius: @border-radius @border-radius 0 0;
-      color: @color-basic-700;
-
-      .select__title {
-        box-shadow: @shadow-buttons-hover;
-        transition: all 0.3s;
-        color: @color-basic-700;
-      }
-
-      .select__wrap:not(.expanded) {
-        border-radius: 0 0 @border-radius @border-radius;
-      }
-    }
-
-    .select__wrap.expanded {
-      .select__title {
-        border-top: 1px solid @color-basic-200;
-        border-left: 1px solid @color-basic-200;
-        border-right: 1px solid @color-basic-200;
-        border-bottom: 1px solid @color-white;
-        border-radius: @border-radius @border-radius 0 0;
-      }
-    }
-
-    &[disabled],
-    &.disabled {
-      &:hover {
-        .select__wrap .select__title {
-          box-shadow: @shadow-buttons-default; //@color-basic-50;
-          color: @color-basic-500;
-        }
-      }
-    }
-
-    &_mobile {
-      display: none;
-
-      @media screen and (max-width: 1024px) {
-        display: block;
-        width: 100%;
-        margin-right: 10px;
-      }
-    }
-  }
-
-  &_send-modal, &_fee {
-    height: 54px;
-
-    @media screen and (max-width: 768px) {
-      height: 42px;
-    }
-
-    .select {
-      &__list {
-        max-height: 325px;
-        overflow: auto;
-      }
-
-      &__title {
-        overflow: hidden;
-      }
-
-    }
-    
-    .expanded {
-      .select__list {
-        margin-bottom: 40px;
-      }
-    }
-  }
-
-  &_receive-invoice, &_receive-crypt, &_receive-card, &_receive-bank {
-    height: 54px;
-
-    @media screen and (max-width: 768px) {
-      height: 42px;
-    }
-  }
-
-  &_receive-card {
-    flex-basis: 48%;
-  }
-
-  &_setting-session, &_setting-theme {
-    height: 36px;
-
-    .select {
-      &__wrap:not(.expanded) .select__title {
-        border: 1px solid transparent;
-      }
-
-      &__wrap.expanded .select__title {
-        border: 1px solid @color-basic-200;
-        border-bottom: 1px solid transparent;
-      }
-
-      &__list {
-        overflow-y: auto;
-        max-height: 140px;
-      }
-    }
-  }
-
-  &_token {
-    height: 30px;
-    position: absolute;
-    right: 6px;
-    width: calc(50% ~"- 12px");
-
-    .select {
-      &__title {
-        color: @color-white;
-
-        &-content {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-  }
-
-  &_create-order {
-    .select {
-      &__wrap {
-        position: static;
-
-        &.expanded {
-          .select__title {
-            &:after {
-              background-image: @select-arrow-active-icon;
-            }
-          }
-        }
-      }
-
-      &__title {
-        padding: 2px 15px 2px 5px;
-        border: 1px solid transparent;
-        font-display: 11px;
-
-        &::after {
-          right: 0;
-          background-image: @select-arrow-icon;
-          background-repeat: no-repeat;
-          background-size: 90%;
-        }
-      }
-
-      &__list {
-        box-shadow: 0 2px 14px 0 rgba(31, 39, 61, 0.15);
-        border: 0;
-        border-radius: 4px;
-        padding: 5px 0;
-        width: auto;
-      }
-    }
-  }
-}
diff --git a/src/modules/ui/directives/selectFilter/selectFilter.less b/src/modules/ui/directives/selectFilter/selectFilter.less
index e978ba3046..cb0779e14f 100644
--- a/src/modules/ui/directives/selectFilter/selectFilter.less
+++ b/src/modules/ui/directives/selectFilter/selectFilter.less
@@ -13,7 +13,6 @@
 
 .select {
   div.select__wrap.expanded {
-    position: relative;
     z-index: 1;
 
     w-select-filter {
diff --git a/src/modules/utils/modals/changeToken/change-token-modal.html b/src/modules/utils/modals/changeToken/change-token-modal.html
index e274f696bc..a0ee13982b 100644
--- a/src/modules/utils/modals/changeToken/change-token-modal.html
+++ b/src/modules/utils/modals/changeToken/change-token-modal.html
@@ -48,7 +48,7 @@
                                      required></w-input>
 
                             <div class="select-wrapper">
-                                <w-select class="select issue-select tiny" ng-model="$ctrl.issue">
+                                <w-select class="select select_token" ng-model="$ctrl.issue">
                                     <w-option option-type="boolean" value="false">
                                         <span class="caption-1 basic-900" w-i18n-ns="app.tokens"
                                               w-i18n="reissuable.false"></span>
diff --git a/src/modules/utils/modals/changeToken/change-token-modal.less b/src/modules/utils/modals/changeToken/change-token-modal.less
index 537c3553e1..a7f739872c 100644
--- a/src/modules/utils/modals/changeToken/change-token-modal.less
+++ b/src/modules/utils/modals/changeToken/change-token-modal.less
@@ -32,21 +32,9 @@ md-dialog.change-token {
       border-top-right-radius: @border-radius;
       border-bottom-right-radius: @border-radius;
 
-      .issue-select {
-        width: 216px;
-        height: 30px;
-        position: absolute;
-        right: 6px;
+      .select {
+        width: calc(100% ~"- 12px");
         top: 6px;
-
-        .select__title-content {
-          display: flex;
-          align-items: center;
-        }
-
-        .select__title {
-          background-color: @color-white;
-        }
       }
     }
   }
diff --git a/src/modules/utils/modals/receive/Receive.less b/src/modules/utils/modals/receive/Receive.less
index 56208a9616..e29b215923 100644
--- a/src/modules/utils/modals/receive/Receive.less
+++ b/src/modules/utils/modals/receive/Receive.less
@@ -72,11 +72,6 @@ md-dialog.modal-receive {
       display: none;
     }
 
-    // .select .select__list {
-    //   max-height: 325px;
-    //   overflow: auto;
-    // }
-
     .flex-row {
       display: flex;
       flex-direction: row;
@@ -90,8 +85,7 @@ md-dialog.modal-receive {
       align-items: center;
       width: 100%;
 
-      w-input,
-      .select {
+      w-input {
         flex-basis: 48%;
       }
 
diff --git a/src/modules/utils/modals/receive/receiveCard/receive-card.html b/src/modules/utils/modals/receive/receiveCard/receive-card.html
index 5a5ef5dddc..01a7cc853c 100644
--- a/src/modules/utils/modals/receive/receiveCard/receive-card.html
+++ b/src/modules/utils/modals/receive/receiveCard/receive-card.html
@@ -13,7 +13,7 @@
                     </div>
 
                     <w-select
-                        class="select big has-fliter"
+                        class="select select_receive-card has-fliter"
                         ng-if="::!$ctrl.isSingleAsset"
                         ng-model="$ctrl.chosenAssetId"
                         one-item="$ctrl.purchasablesByCards.length <= 1"
diff --git a/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html b/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
index 064c563c5a..4c9d7b706f 100644
--- a/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
+++ b/src/modules/utils/modals/receive/receiveInvoice/receive-invoice.html
@@ -11,7 +11,7 @@
             </div>
 
             <w-select
-                class="select big"
+                class="select select_receive-invoice"
                 can-search="::true"
                 ng-if="::!$ctrl.isSingleAsset"
                 ng-model="$ctrl.chosenAssetId"
diff --git a/src/modules/utils/modals/sendAsset/send.modal.less b/src/modules/utils/modals/sendAsset/send.modal.less
index a93725f29d..9d411841b1 100644
--- a/src/modules/utils/modals/sendAsset/send.modal.less
+++ b/src/modules/utils/modals/sendAsset/send.modal.less
@@ -233,21 +233,6 @@ md-dialog.modal-send {
           max-width: 100px;
         }
       }
-
-      // &__title {
-      //   overflow-x: hidden;
-      // }
-
-      // .expanded {
-      //   .select__list {
-      //     margin-bottom: 40px;
-      //   }
-      // }
-
-      // .select__list {
-      //   max-height: 325px;
-      //   overflow: auto;
-      // }
     }
 
     .input-like {
diff --git a/src/modules/utils/modals/settings/settings.html b/src/modules/utils/modals/settings/settings.html
index c8342689a2..609dfc56a9 100644
--- a/src/modules/utils/modals/settings/settings.html
+++ b/src/modules/utils/modals/settings/settings.html
@@ -50,7 +50,7 @@
                 <div class="row flex-row row-style unit-select">
                     <div class="footnote-1 basic-500" w-i18n="modal.settings.general.timeout"></div>
                     <div class="select-setting-wrap">
-                        <w-select class="select select_setting-session small with-scroll select__no-user-select" ng-model="$ctrl.logoutAfterMin">
+                        <w-select class="select select_setting-session select__no-user-select" ng-model="$ctrl.logoutAfterMin">
                             <w-option value="::5">
                                 <span w-i18n="modal.settings.general.minutes" w-i18n-ns="app.utils"
                                       params="{minutes: 5}"></span>
@@ -78,7 +78,7 @@
                 <div class="row flex-row row-style unit-select">
                     <div class="footnote-1 basic-500" w-i18n="modal.settings.general.theme"></div>
                     <div class="select-setting-wrap">
-                        <w-select class="select select_setting-theme small select__no-user-select" ng-model="$ctrl.theme">
+                        <w-select class="select select_setting-theme select__no-user-select" ng-model="$ctrl.theme">
                             <w-option value="::'default'">
                                 <i class="white-dot"></i>
                                 <span w-i18n-ns="app.utils" w-i18n="modal.settings.general.white"></span>
diff --git a/src/modules/utils/modals/settings/settings.less b/src/modules/utils/modals/settings/settings.less
index 7ba200ff7c..caa443f70a 100644
--- a/src/modules/utils/modals/settings/settings.less
+++ b/src/modules/utils/modals/settings/settings.less
@@ -34,19 +34,6 @@ md-dialog.settings-modal {
     display: block;
   }
 
-  // .select {
-  //   &.with-scroll {
-  //     .select__list {
-  //       overflow-y: auto;
-  //       max-height: 140px;
-  //     }
-  //   }
-
-  //   .select__wrap:not(.expanded) .select__title {
-  //     border: 1px solid transparent;
-  //   }
-  // }
-
   w-responsive-menu {
     width: 199px;
     height: 100%;
@@ -453,16 +440,6 @@ md-dialog.settings-modal {
       }
     }
   }
-
-  .select-setting-wrap,
-  w-change-language {
-    .select {
-      .select__wrap.expanded .select__title {
-        border: 1px solid @color-basic-200;
-        border-bottom: 1px solid transparent;
-      }
-    }
-  }
 }
 
 @media screen and (max-width: 767px) {
diff --git a/src/modules/wallet/modules/portfolio/less/portfolio.less b/src/modules/wallet/modules/portfolio/less/portfolio.less
index 0b64ce51d3..b5edc4b8e2 100644
--- a/src/modules/wallet/modules/portfolio/less/portfolio.less
+++ b/src/modules/wallet/modules/portfolio/less/portfolio.less
@@ -35,22 +35,6 @@
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
-
-    // .select {
-    //   width: 100%;
-    //   max-width: 250px;
-    //   position: absolute;
-    //   right: 0;
-    //   top: 0;
-    //   z-index: 3;
-
-    //   .select__title {
-    //     display: flex;
-    //     padding-left: 40px;
-    //     .icon-filter();
-    //     background-position: 15px center;
-    //   }
-    // }
   }
 
   .btn-icon {
@@ -121,52 +105,6 @@
 
     .toolbar {
       width: calc(100% ~'- 10px');
-
-      // .select {
-      //   width: 50px;
-      //   height: 42px;
-
-      //   .select__title {
-      //     padding: 0;
-      //     position: relative;
-      //     font-size: 0;
-      //     .icon-filter();
-      //     box-shadow: @shadow-buttons-default;
-      //     border: none;
-
-      //     &::after {
-      //       display: none;
-      //     }
-
-      //     .select__title-content {
-      //       & > span {
-      //         font-size: 0;
-      //         right: 5px;
-      //         top: 5px;
-      //         position: absolute;
-      //       }
-      //     }
-
-      //     span {
-      //       font-size: 9px;
-      //       display: inline-block;
-      //       padding: 1px 2px;
-      //       background: @color-submit-400;
-      //       color: @white-only;
-      //       border-radius: @border-radius / 2;
-      //       line-height: 1em;
-      //     }
-      //   }
-
-      //   .select__list {
-      //     left: auto;
-      //     right: 0;
-      //     min-width: 156px;
-      //     margin-top: -1px;
-      //     border-top: 1px solid @color-accent-50;
-      //     border-radius: @border-radius 0 @border-radius @border-radius;
-      //   }
-      // }
     }
   }
 }
diff --git a/src/modules/wallet/modules/transactions/less/transactions.less b/src/modules/wallet/modules/transactions/less/transactions.less
index 8f58749b6f..b76a4050d0 100644
--- a/src/modules/wallet/modules/transactions/less/transactions.less
+++ b/src/modules/wallet/modules/transactions/less/transactions.less
@@ -35,17 +35,6 @@
     }
   }
 
-  // .select {
-    // &.split-mode {
-    //   display: none;
-    // }
-    // &.tx-filter {
-    //   margin-right: 10px;
-    //   flex-grow: 0;
-    //   white-space: nowrap;
-    // }
-  // }
-
   button.download {
     flex-grow: 0;
   }
@@ -57,12 +46,6 @@
       display: none;
     }
 
-    // .select.split-mode {
-    //   display: block;
-    //   width: 100%;
-    //   margin-right: 10px;
-    // }
-
     w-button {
       & > *.interface svg {
         margin-left: 0;

From 6818173dbb50b211abdd4bb3122f59779598c5f0 Mon Sep 17 00:00:00 2001
From: Vusal Gakhramanov <vgakhramanov@wavesplatform.com>
Date: Mon, 9 Sep 2019 18:45:42 +0300
Subject: [PATCH 4/6] DEXW-1936: some changes

---
 .../ui/directives/select/less/.select.less    | 32 +++++++++----------
 .../select/less/select-transaction.less       | 32 ++++++++++---------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/modules/ui/directives/select/less/.select.less b/src/modules/ui/directives/select/less/.select.less
index f229824363..4773c4bad1 100644
--- a/src/modules/ui/directives/select/less/.select.less
+++ b/src/modules/ui/directives/select/less/.select.less
@@ -5,22 +5,6 @@
 
 .select {
   display: block;
-  
-  &.one-item .select__wrap .select__title {
-    cursor: default;
-
-    &::after {
-      background-image: none;
-    }
-
-    w-avatar .avatar-wrap {
-      cursor: default;
-    }
-  }
-  
-  &.hide-active .select__wrap .select__list w-option.active {
-    display: none;
-  }
 
   &__no-user-select {
     user-select: none;
@@ -128,6 +112,22 @@
     }
   }
 
+  &.one-item .select__wrap .select__title {
+    cursor: default;
+
+    &::after {
+      background-image: none;
+    }
+
+    w-avatar .avatar-wrap {
+      cursor: default;
+    }
+  }
+  
+  &.hide-active .select__wrap .select__list w-option.active {
+    display: none;
+  }
+
   &.interface {
     height: 42px;
 
diff --git a/src/modules/ui/directives/select/less/select-transaction.less b/src/modules/ui/directives/select/less/select-transaction.less
index effeb7eddb..a37f79e3bd 100644
--- a/src/modules/ui/directives/select/less/select-transaction.less
+++ b/src/modules/ui/directives/select/less/select-transaction.less
@@ -9,14 +9,6 @@
 	flex-grow: 0;
 	white-space: nowrap;
 
-	.select__title {
-		border-color: @color-white;
-		color: @color-basic-700;
-		box-shadow: @shadow-buttons-default;
-		width: 100%;
-		font-size: 15px;
-	}
-
 	&:hover {
 		border-radius: @border-radius @border-radius 0 0;
 		color: @color-basic-700;
@@ -32,13 +24,23 @@
 		}
 	}
 
-	.select__wrap.expanded {
-		.select__title {
-			border-top: 1px solid @color-basic-200;
-			border-left: 1px solid @color-basic-200;
-			border-right: 1px solid @color-basic-200;
-			border-bottom: 1px solid @color-white;
-			border-radius: @border-radius @border-radius 0 0;
+	.select {
+		&__title {
+			border-color: @color-white;
+			color: @color-basic-700;
+			box-shadow: @shadow-buttons-default;
+			width: 100%;
+			font-size: 15px;
+		}
+		
+		&__wrap.expanded {
+			.select__title {
+				border-top: 1px solid @color-basic-200;
+				border-left: 1px solid @color-basic-200;
+				border-right: 1px solid @color-basic-200;
+				border-bottom: 1px solid @color-white;
+				border-radius: @border-radius @border-radius 0 0;
+			}
 		}
 	}
 

From 19bb445de2dac6f8a9ec83709abc7f2275c8e634 Mon Sep 17 00:00:00 2001
From: ekomarovskaya <ekomarovskaya@wavesplatform.com>
Date: Wed, 25 Sep 2019 17:59:59 +0300
Subject: [PATCH 5/6] DEXW-1936: fix

---
 .../ui/directives/select/less/{.select.less => select.less}       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/modules/ui/directives/select/less/{.select.less => select.less} (100%)

diff --git a/src/modules/ui/directives/select/less/.select.less b/src/modules/ui/directives/select/less/select.less
similarity index 100%
rename from src/modules/ui/directives/select/less/.select.less
rename to src/modules/ui/directives/select/less/select.less

From 42983b484eb898aa329fd8832523a91ed12454a6 Mon Sep 17 00:00:00 2001
From: Vusal Gakhramanov <vgakhramanov@wavesplatform.com>
Date: Thu, 10 Oct 2019 12:49:52 +0300
Subject: [PATCH 6/6] DEXW-1936: fix select in transaction

---
 .../directives/select/less/select-transaction.less  | 13 ++++++-------
 .../select/less/{.select.less => select_main.less}  |  0
 2 files changed, 6 insertions(+), 7 deletions(-)
 rename src/modules/ui/directives/select/less/{.select.less => select_main.less} (100%)

diff --git a/src/modules/ui/directives/select/less/select-transaction.less b/src/modules/ui/directives/select/less/select-transaction.less
index a37f79e3bd..e879f3289c 100644
--- a/src/modules/ui/directives/select/less/select-transaction.less
+++ b/src/modules/ui/directives/select/less/select-transaction.less
@@ -53,14 +53,13 @@
 			}
 		}
 	}
+}
 
-	&_mobile {
+.select.select_transaction_mobile {
+	width: 100%;
+	margin-right: 10px;
+	
+	@media screen and (min-width: 1025px) {
 		display: none;
-
-		@media screen and (max-width: 1024px) {
-			display: block;
-			width: 100%;
-			margin-right: 10px;
-		}
 	}
 }
\ No newline at end of file
diff --git a/src/modules/ui/directives/select/less/.select.less b/src/modules/ui/directives/select/less/select_main.less
similarity index 100%
rename from src/modules/ui/directives/select/less/.select.less
rename to src/modules/ui/directives/select/less/select_main.less