From 0d4ab8ede2f32022501ad8329964851cdfa4f652 Mon Sep 17 00:00:00 2001 From: Kate Pimenova Date: Wed, 16 Mar 2016 15:35:07 +0300 Subject: [PATCH] New variables created for img paths Implements: blueprint remove-vendor-code Change-Id: I81006e777cf7623a60656b5327ef739afe53d826 --- static/img/tabs/tab-arrow-left-icon.svg | 7 -- static/img/tabs/tab-arrow-right-icon.svg | 7 -- .../{color-theme.less => default-theme.less} | 11 +++ static/styles/main.less | 68 +++++-------------- 4 files changed, 27 insertions(+), 66 deletions(-) delete mode 100644 static/img/tabs/tab-arrow-left-icon.svg delete mode 100644 static/img/tabs/tab-arrow-right-icon.svg rename static/styles/{color-theme.less => default-theme.less} (82%) diff --git a/static/img/tabs/tab-arrow-left-icon.svg b/static/img/tabs/tab-arrow-left-icon.svg deleted file mode 100644 index 3e3b6783c..000000000 --- a/static/img/tabs/tab-arrow-left-icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - diff --git a/static/img/tabs/tab-arrow-right-icon.svg b/static/img/tabs/tab-arrow-right-icon.svg deleted file mode 100644 index 5c672783c..000000000 --- a/static/img/tabs/tab-arrow-right-icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - diff --git a/static/styles/color-theme.less b/static/styles/default-theme.less similarity index 82% rename from static/styles/color-theme.less rename to static/styles/default-theme.less index 9ea45b8e7..ece724eb4 100755 --- a/static/styles/color-theme.less +++ b/static/styles/default-theme.less @@ -93,3 +93,14 @@ @range-color: @tab-color - 50%; @slider-color: @tab-color + 20%; + +// Images +@header-icons-sprite: "../img/icons/header-icons-sprite.svg"; +@common-icons-sprite: "../img/icons/icons-sprite.svg"; +@radio-checkbox-sprite: "../img/ui/radio_checkbox.svg"; +@navbar-logo-img: "../img/logos/navbar-logo.svg"; +@tabs-icons-sprite: "../img/tabs/tabs-icons-sprite.svg"; +@login-background-img: "../img/login-bg.jpg"; +@login-logo-img: "../img/login-logo.svg"; +@new-environment-img: "../img/icons/new-environment.svg"; +@support-images-sprite: "../img/icons/support-images.svg"; diff --git a/static/styles/main.less b/static/styles/main.less index 6acc58afc..87e1417ed 100644 --- a/static/styles/main.less +++ b/static/styles/main.less @@ -1,5 +1,5 @@ @import "../../node_modules/bootstrap/dist/css/bootstrap.css"; -@import "color-theme.less"; +@import "default-theme.less"; // BASE SETTINGS @page-width: 1170px; @@ -318,9 +318,6 @@ button, .btn:not(.btn-link) {.font-semibold;} } } - -@common-icons-sprite: "../img/icons/icons-sprite.svg"; - .loading-ticket { display: inline-block; padding: 10px; @@ -490,17 +487,17 @@ button, .btn:not(.btn-link) {.font-semibold;} overflow: hidden; font-size: 1px; line-height: 0; - background: url("../img/ui/radio_checkbox.svg") no-repeat 0 0 transparent; + background: url(@radio-checkbox-sprite) no-repeat 0 0 transparent; width: 22px; height: 22px; } .custom-tumbler input:checked + span { - background: url("../img/ui/radio_checkbox.svg") no-repeat -22px 0px; + background: url(@radio-checkbox-sprite) no-repeat -22px 0px; } .custom-tumbler input:indeterminate + span { - background: url("../img/ui/radio_checkbox.svg") no-repeat -44px 0px; + background: url(@radio-checkbox-sprite) no-repeat -44px 0px; } .custom-tumbler input[disabled] + span { @@ -513,11 +510,11 @@ button, .btn:not(.btn-link) {.font-semibold;} } .custom-tumbler input[type=radio] + span { - background: url("../img/ui/radio_checkbox.svg") no-repeat 0px -22px; + background: url(@radio-checkbox-sprite) no-repeat 0px -22px; } .custom-tumbler input[type=radio]:checked + span { - background: url("../img/ui/radio_checkbox.svg") no-repeat -22px -22px; + background: url(@radio-checkbox-sprite) no-repeat -22px -22px; } // CUSTOM RANGE INPUT @@ -651,7 +648,7 @@ input[type=range] { padding: 0px; margin-top: 2px; width: 166px; - background: url("../img/logos/navbar-logo.svg") no-repeat top left; + background: url(@navbar-logo-img) no-repeat top left; } .navbar-icons { @@ -695,10 +692,9 @@ input[type=range] { } } .navbar-icon-sprite-index(@index) { - @icon-sprite-img: "../img/icons/header-icons-sprite.svg"; - background: url(@icon-sprite-img) no-repeat 0 -@navbar-icon-size * @index; + background: url(@header-icons-sprite) no-repeat 0 -@navbar-icon-size * @index; &:hover { - background: url(@icon-sprite-img) no-repeat -@navbar-icon-size -@navbar-icon-size * @index; + background: url(@header-icons-sprite) no-repeat -@navbar-icon-size -@navbar-icon-size * @index; } } @@ -1483,7 +1479,6 @@ input[type=range] { .tabs-box { @tab-height: 52px; @tab-icon-size: 40px; - @tab-icons-sprite: "../img/tabs/tabs-icons-sprite.svg"; width: 100%; height: @tab-height; overflow: hidden; @@ -1542,11 +1537,11 @@ input[type=range] { .tab-icon-sprite-index(@index) { .icon { - background: url(@tab-icons-sprite) no-repeat 0 -@tab-icon-size * @index; + background: url(@tabs-icons-sprite) no-repeat 0 -@tab-icon-size * @index; } &:hover, &.active { .icon { - background: url(@tab-icons-sprite) no-repeat -@tab-icon-size -@tab-icon-size * @index; + background: url(@tabs-icons-sprite) no-repeat -@tab-icon-size -@tab-icon-size * @index; } } } @@ -1579,37 +1574,6 @@ input[type=range] { } } -.tab-scroller { - @tab-scroller-width: 28px; - @tab-scroller-height: 50px; - float: right; - width: 5%; - height: @tab-scroller-height; - overflow: hidden; - .arrow { - display: inline-block; - width: @tab-scroller-width; - height: @tab-scroller-height; - float: left; - opacity: 0.7; - background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left; - cursor: pointer; - &:hover { - opacity: 1; - } - &.disabled { - opacity: 0.3; - cursor: default; - } - &.left { - background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left; - } - &.right { - background: url(../img/tabs/tab-arrow-right-icon.svg) no-repeat top left; - } - } -} - .tab-content { border-radius: 0 8px 8px 8px; } @@ -2567,14 +2531,14 @@ input[type=range] { display: block; width: 100%; height: 160px; - background: url(../img/login-bg.jpg) no-repeat top left; + background: url(@login-background-img) no-repeat top left; background-size: cover; border-radius: 12px 12px 0px 0px; } .logo { @logo-width: 100%; @logo-height: 160px; - background: url("../img/login-logo.svg") no-repeat scroll 0 0 rgba(0, 0, 0, 0); + background: url(@login-logo-img) no-repeat scroll 0 0 rgba(0, 0, 0, 0); background-size: contain; background-position: center; position: relative; @@ -2710,13 +2674,13 @@ input[type=range] { margin-bottom: 30px; padding: 16px; text-decoration: none; - background: url(../img/icons/new-environment.svg) no-repeat center 20px; + background: url(@new-environment-img) no-repeat center 20px; text-align: center; text-decoration: none; box-sizing: border-box; .font-bold; &:hover { - background: @white url(../img/icons/new-environment.svg) no-repeat center 20px; + background: @white url(@new-environment-img) no-repeat center 20px; text-decoration: none; } span { @@ -2749,7 +2713,7 @@ input[type=range] { @support-icon-background-color: @navbar-color; background: @support-icon-background-color; .support-icon-sprite-index(@index) { - background: @support-icon-background-color url(../img/icons/support-images.svg) no-repeat 0 -120px * @index; + background: @support-icon-background-color url(@support-images-sprite) no-repeat 0 -120px * @index; } &.img-register-fuel { .support-icon-sprite-index(0);