From 39836fc821fbad37a78f89131dd80b571e2357c6 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 10 Mar 2020 13:21:38 +0100 Subject: [PATCH] :boom: removed old scss files --- .../main/partials/dashboard-bar-v2.scss | 91 ---- .../main/partials/dashboard-grid-v2.scss | 419 ------------------ .../styles/main/partials/library-bar-v2.scss | 123 ----- .../styles/main/partials/main-bar-v2.scss | 121 ----- .../main/partials/sidebar-layers-v2.scss | 265 ----------- .../main/partials/sidebar-sitemap-v2.scss | 279 ------------ .../styles/main/partials/sidebar-v2.scss | 91 ---- .../main/partials/workspace-bar-v2.scss | 292 ------------ 8 files changed, 1681 deletions(-) delete mode 100644 frontend/resources/styles/main/partials/dashboard-bar-v2.scss delete mode 100644 frontend/resources/styles/main/partials/dashboard-grid-v2.scss delete mode 100644 frontend/resources/styles/main/partials/library-bar-v2.scss delete mode 100644 frontend/resources/styles/main/partials/main-bar-v2.scss delete mode 100644 frontend/resources/styles/main/partials/sidebar-layers-v2.scss delete mode 100644 frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss delete mode 100644 frontend/resources/styles/main/partials/sidebar-v2.scss delete mode 100644 frontend/resources/styles/main/partials/workspace-bar-v2.scss diff --git a/frontend/resources/styles/main/partials/dashboard-bar-v2.scss b/frontend/resources/styles/main/partials/dashboard-bar-v2.scss deleted file mode 100644 index 093a8af92..000000000 --- a/frontend/resources/styles/main/partials/dashboard-bar-v2.scss +++ /dev/null @@ -1,91 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.dashboard-bar { - align-items: center; - display: flex; - font-size: $fs14; - padding: $small $medium $small $x-big*2; - - .dashboard-images { - flex-basis: 70px; - } - - .dashboard-info { - align-items: center; - display: flex; - width: 500px; - justify-content: space-around; - - .dashboard-projects { - font-weight: bold; - margin-right: $medium; - } - - .sort-by { - margin-left: $small; - } - - .input-select { - background-color: transparent; - border-color: $color-gray-60; - font-size: $fs14; - margin-bottom: 0; - margin-left: $medium; - padding: 3px 25px 3px 3px; - - option { - color: $color-gray-60; - background: $color-gray-60; - } - } - - } - - .dashboard-search { - align-items: center; - display: flex; - margin-left: $small; - - .input-text { - background: $color-gray-50; - border: 0; - color: $color-gray-60; - padding: 4px 8px; - margin: 0; - max-width: 160px; - } - - .clear-search { - align-items: center; - background: $color-gray-50; - cursor: pointer; - display: flex; - height: 28px; - padding: 0 5px; - - svg { - fill: $color-gray-30; - height: 15px; - transform: rotate(45deg); - width: 15px; - - &:hover { - fill: $color-danger; - } - - } - - } - - } - - &.library-gap { - padding: $small $medium $small 270px; - } - -} diff --git a/frontend/resources/styles/main/partials/dashboard-grid-v2.scss b/frontend/resources/styles/main/partials/dashboard-grid-v2.scss deleted file mode 100644 index f88aa2644..000000000 --- a/frontend/resources/styles/main/partials/dashboard-grid-v2.scss +++ /dev/null @@ -1,419 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.dashboard-grid { - align-items: center; - display: flex; - flex-direction: column; - font-size: $fs14; - height: 100%; - padding: $medium; - // ACTIVITY BAR PADDING - //padding: $medium 250px $medium $medium; - - .dashboard-title { - margin: $medium 0; - position: relative; - width: 100%; - - h2 { - text-align: center; - width: 100%; - .edit { - padding: 5px 10px; - background: $color-gray-50; - border: none; - height: 100%; - } - .close { - padding: 5px 10px; - background: $color-gray-50; - cursor: pointer; - svg { - transform: rotate(45deg); - fill: $color-gray; - height: 20px; - width: 20px; - } - } - } - - .edition { - align-items: center; - display: flex; - position: absolute; - right: 40px; - top: 0; - - span { - cursor: pointer; - - svg { - fill: $color-gray; - height: 20px; - margin: 0 10px; - width: 20px; - } - - &:hover { - - svg { - fill: $color-gray-darker; - } - - } - - } - - } - - } - - .dashboard-grid-content { - display: flex; - height: 100%; - min-height: 60vh; - overflow: scroll; - width: 100%; - - .dashboard-grid-row { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: auto; - width: 100%; - } - - .grid-item { - align-items: center; - border-radius: $br-medium; - cursor: pointer; - display: flex; - flex-direction: column; - flex-shrink: 0; - height: 200px; - margin: $medium $medium 0 $medium; - max-width: 300px; - min-width: 260px; - position: relative; - text-align: center; - width: 18%; - - &.small-item { - max-width: 12%; - min-width: 190px; - padding: $medium; - justify-content: center; - } - - .grid-item-icon { - width:90px; - height:90px; - } - - .item-info { - bottom: 0; - display: flex; - flex-direction: column; - left: 0; - padding: $small; - position: absolute; - text-align: left; - width: 100%; - - h3 { - color: $color-gray-60; - font-size: $fs16; - font-weight: 400; - overflow: hidden; - padding: 0; - padding-right: $small; - text-overflow: ellipsis; - width: 100%; - white-space: nowrap; - } - - span.date { - color: $color-gray-10; - font-size: $fs12; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - - } - - &.add-project { - border: 2px dashed $color-gray-light; - box-shadow: inset 0 0 0 transparent; - justify-content: center; - - span { - background-color: $color-primary-light; - border-radius: 5px; - color: $color-white; - font-size: $fs24; - padding: $small $medium; - } - - &:hover { - background-color: $color-primary-light; - border: 2px solid $color-white; - - span { - color: $color-white; - } - - } - - } - - // PROJECTS, ELEMENTS & ICONS GRID - &.project-th { - background-color: $color-gray-50; - border-bottom: 2px solid lighten($color-gray-60, 12%); - - &:hover { - border-color: $color-primary; - - h3 { - color: $color-primary; - } - - } - - .project-th-actions { - align-items: center; - bottom: 0; - display: flex; - left: 0; - justify-content: flex-end; - padding: $small; - position: absolute; - width: 100%; - - svg { - fill: $color-gray-light; - height: 14px; - margin-right: $x-small; - width: 14px; - } - - span { - color: $color-gray-light; - } - - .project-th-icon { - align-items: center; - display: flex; - margin-right: $small; - - &.delete { - margin-right: 0; - - svg { - fill: $color-gray-30; - margin-right: 0; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-danger; - } - - } - - } - - &.edit { - margin-right: 0; - - svg { - fill: $color-gray-30; - } - - &:hover { - transform: scale(1.4); - - svg { - fill: $color-primary; - } - - } - - } - - } - - } - - } - - // IMAGES SECTION - &.images-th { - background-color: $color-gray-50; - border-bottom: 2px solid lighten($color-gray-light, 12%); - - &:hover { - border-color: $color-primary; - } - - } - - .grid-item-image { - - svg { - max-height: 100px; - max-width: 100px; - min-height: 40px; - min-width: 40px; - width: 8vw; - } - - } - - .color-swatch { - border-top-left-radius: $br-medium; - border-top-right-radius: $br-medium; - height: 25%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - - .color-data { - color: $color-gray; - margin-top: 15px; - } - - .input-checkbox { - margin: 0; - position: absolute; - top: 10px; - right: 5px; - - label { - margin: 0; - } - - } - - } - - } - - // STYLES FOR LIBRARIES - &.library { - padding: $medium $medium $medium 250px; - } - -} - -.grid-item-th { - background-position: center; - background-size: auto 80%; - background-repeat: no-repeat; - border-top-left-radius: $br-medium; - border-top-right-radius: $br-medium; - height: 70%; - overflow: hidden; - position: relative; - width: 100%; - - .img-th { - height: auto; - width: 100%; - } - -} - -// MULTISELECT OPTIONS BAR -.multiselect-bar { - @include animation(0,.5s,fadeInUp); - align-items: center; - background-color: $color-gray-50; - display: flex; - left: 0; - justify-content: center; - padding: $medium; - position: absolute; - width: 100%; - bottom: 0; - - .multiselect-nav { - align-items: center; - display: flex; - justify-content: center; - margin-left: 10%; - width: 110px; - - span { - margin-right: 1.5rem; - &:last-child { - margin-right: 0; - } - } - - svg { - cursor: pointer; - fill: $color-gray-30; - height: 20px; - width: 20px; - - &:hover { - fill: $color-gray-20; - } - - } - - span.delete { - - &:hover { - - svg{ - fill: $color-danger-light; - } - - } - - } - - } - -} - -.move-item { - position: relative; - - .move-list { - background-color: $color-gray-10; - border-radius: $br-small; - bottom: 30px; - display: flex; - flex-direction: column; - left: -30px; - max-height: 260px; - overflow-y: scroll; - padding: $medium; - position: absolute; - width: 260px; - - li { - padding-bottom: $medium; - - &.title { - color: $color-gray-darker; - } - - } - - } - -} diff --git a/frontend/resources/styles/main/partials/library-bar-v2.scss b/frontend/resources/styles/main/partials/library-bar-v2.scss deleted file mode 100644 index 67b74ca4f..000000000 --- a/frontend/resources/styles/main/partials/library-bar-v2.scss +++ /dev/null @@ -1,123 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.library-bar { - background-color: $color-gray-50; - bottom: 0; - height: 100%; - left: 0; - position: fixed; - width: 250px; - - .library-bar-inside { - display: flex; - flex-direction: column; - height: 100%; - padding-top: 60px; - - .library-tabs { - align-items: center; - background-color: $color-gray-60; - display: flex; - justify-content: space-around; - margin: 0; - padding-top: 12px; - - li { - background-color: darken($color-gray-60, 10%); - border-top-left-radius: 3px; - border-top-right-radius: 3px; - color: $color-gray; - cursor: pointer; - font-weight: bold; - font-size: $fs14; - padding: .6rem; - text-align: center; - width: 118px; - - &:hover { - color: $color-white; - } - - &.current { - background-color: $color-gray-50; - color: $color-primary; - } - - } - - } - - .library-elements { - display: flex; - flex-direction: column; - height: calc(95% - 1rem); - margin-bottom: 1rem; - overflow-y: auto; - padding-bottom: 20px; - - li { - border-bottom: 1px solid $color-gray-60; - cursor: pointer; - display: flex; - flex-direction: column; - flex-shrink: 0; - padding: 10px; - - span.element-title { - color: $color-gray-dark; - font-weight: bold; - margin-bottom: 5px; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - input.element-title { - border: 0; - height: 30px; - padding: 5px; - } - - .close { - background: $color-gray-50; - cursor: pointer; - padding: 5px 10px; - - svg { - fill: $color-gray; - height: 20px; - transform: rotate(45deg) translateY(7px); - width: 20px; - } - } - - .element-subtitle { - color: $color-gray-light; - font-style: italic; - } - - &:hover, - &.current { - background-color: $color-primary; - - span.element-title, - .element-subtitle { - color: $color-white; - } - input.element-title { - color: $color-gray-dark; - } - } - - } - - } - - } - -} diff --git a/frontend/resources/styles/main/partials/main-bar-v2.scss b/frontend/resources/styles/main/partials/main-bar-v2.scss deleted file mode 100644 index dc18147ff..000000000 --- a/frontend/resources/styles/main/partials/main-bar-v2.scss +++ /dev/null @@ -1,121 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.main-bar { - align-items: center; - background-color: $color-gray-50; - display: flex; - height: 60px; - padding: $x-small $medium; - position: relative; - z-index: 10; - - .main-logo { - - svg { - fill: $color-gray-30; - height: 40px; - width: 120px; - } - - } - -} - -.main-nav { - align-items: center; - display: flex; - height: 50px; - margin: 0 0 0 120px; - - li { - - a { - color: $color-gray-10; - padding: 1rem; - - &:hover { - color: $color-gray-60; - } - - } - - &.current { - - a { - color: $color-gray-60; - } - - } - - } - -} - -.user-zone { - align-items: center; - cursor: pointer; - display: flex; - margin-left: auto; - position: relative; - - span { - color: $color-gray-20; - margin: $small; - } - - img { - border-radius: 50%; - flex-shrink: 0; - height: 32px; - width: 32px; - } - - .dropdown { - background-color: $color-gray-60; - border-radius: $br-small; - border: 1px solid $color-gray-60; - min-width: 150px; - padding: 0 $small; - position: absolute; - top: 0; - right: 0; - width: 100%; - z-index: 12; - @include animation(0,.2s,fadeInDown); - - li { - font-size: $fs13; - padding: $small 0; - - svg { - fill: $color-gray-20; - height: 12px; - width: 12px; - } - - span { - color: $color-gray-20; - } - - &:hover { - - span { - color: $color-gray-60; - } - - svg { - fill: $color-gray-60; - } - - } - - } - - } - -} diff --git a/frontend/resources/styles/main/partials/sidebar-layers-v2.scss b/frontend/resources/styles/main/partials/sidebar-layers-v2.scss deleted file mode 100644 index 04dcdcd0c..000000000 --- a/frontend/resources/styles/main/partials/sidebar-layers-v2.scss +++ /dev/null @@ -1,265 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.layers-tools { - border-top: 1px solid $color-gray-20; - bottom: 0; - display: flex; - height: 30px; - justify-content: center; - position: absolute; - width: 100%; - - .layers-tools-content { - align-items: center; - display: flex; - justify-content: space-between; - margin: 0; - width: 60%; - - li { - cursor: pointer; - - svg { - fill: $color-gray-30; - height: 14px; - width: 14px; - - &:hover { - fill: $color-gray-60; - } - - } - - &.disable { - pointer-events: none; - - svg { - cursor: auto; - fill: $color-gray-60; - } - - } - - &.delete-layer { - - svg { - - &:hover { - fill: $color-danger; - } - - } - - } - - &.layer-up { - - svg { - transform: rotate(270deg); - } - - } - - &.layer-down { - - svg { - transform: rotate(90deg); - } - - } - - &.layer-top { - - svg { - transform: rotate(180deg); - } - - } - - } - - } - -} - -.element-list { - margin: 0; - width: 100%; - - ul { - border-left: 6px solid $color-gray-40; - margin: 0; - } - - li { - cursor: pointer; - display: flex; - flex-direction: column; - width: 100%; - - &.dragging-TODO { - background-color: #eee; - } - - &.open { - - ul { - - li { - - .element-list-body { - border-style: dashed; - } - - } - - } - - } - - .element-list-body { - align-items: center; - border-bottom: 1px solid $color-gray-60; - display: flex; - padding: $small; - transition: none; - width: 100%; - - svg { - fill: $color-gray-60; - height: 13px; - margin-right: 8px; - width: 13px; - } - - .element-actions { - align-items: center; - display: flex; - flex-shrink: 0; - width: 62px; - } - - .element-icon { - - svg { - fill: $color-gray-30; - } - - } - - .toggle-content { - margin-left: auto; - width: 12px; - - svg { - fill: $color-gray-20; - transform: rotate(90deg); - width: 10px; - } - - &.inverse { - svg { transform: rotate(270deg); } - } - - &:hover { - - svg { - fill: $color-gray-30; - } - - } - - } - - &.group { - - &.open { - - .toggle-content { - flex-shrink: 0; - - svg { - transform: rotate(270deg); - } - - } - - } - - } - - span.element-name { - min-width: 40px; - min-height: 16px; - display: block; - - color: $color-gray-20; - font-size: $fs13; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.selected { - - .element-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - } - - } - - .selected { - - svg { - fill: $color-gray-20; - } - - } - - &:hover { - border-color: $color-primary; - - .element-icon { - - svg { - fill: $color-gray-20; - } - - } - - span { - color: $color-gray-60; - } - - } - - &.drag-top { - border-top: 40px solid $color-gray-60 !important; - } - - &.drag-bottom { - border-bottom: 40px solid $color-gray-60 !important; - } - - &.drag-inside { - border: 2px solid $color-primary !important; - } - - } - - } - -} diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss b/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss deleted file mode 100644 index c35f0398b..000000000 --- a/frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss +++ /dev/null @@ -1,279 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.sitemap { - - .project-title { - align-items: center; - border-bottom: 1px solid $color-gray-60; - display: flex; - padding: $x-small; - width: 100%; - - span { - color: $color-gray-60; - font-size: $fs14; - font-weight: bold; - max-width: 80%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .add-page { - align-items: center; - background-color: $color-gray-60; - border-radius: $br-small; - border: 1px solid transparent; - cursor: pointer; - display: flex; - justify-content: center; - margin-left: auto; - padding: $x-small; - - svg { - fill: $color-gray-20; - height: 16px; - width: 16px; - } - - &:hover { - background-color: $color-gray-10; - border-color: $color-gray-60; - } - - } - - } - - .element-list { - - li { - align-items: center; - display: flex; - flex-direction: row; - width: 100%; - - .page-icon { - - svg { - fill: $color-gray-30; - height: 15px; - margin-right: $x-small; - width: 15px; - } - - } - - span { - color: $color-gray-20; - font-size: $fs14; - max-width: 75%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .page-actions { - align-items: center; - display: none; - margin-left: auto; - - a { - - svg { - fill: $color-gray-60; - height: 15px; - margin-left: $x-small; - width: 15px; - - &:hover { - fill: $color-gray-20; - } - - } - - } - - } - - &:hover { - - .page-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - } - - } - - &.selected { - - .page-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - font-weight: bold; - } - - } - - } - - &:hover { - - .page-actions { - display: flex; - @include animation(0s,.3s,fadeIn); - } - - } - - .element-list-body { - align-items: center; - border-bottom: 1px solid $color-gray-60; - display: flex; - padding: $small; - transition: none; - width: 100%; - - svg { - fill: $color-gray-60; - height: 13px; - margin-right: 8px; - width: 13px; - } - - .element-actions { - align-items: center; - display: flex; - flex-shrink: 0; - width: 62px; - } - - .element-icon { - - svg { - fill: $color-gray-30; - } - - } - - .toggle-content { - margin-left: auto; - width: 12px; - - svg { - fill: $color-gray-20; - transform: rotate(90deg); - width: 10px; - } - - &.inverse { - svg { transform: rotate(270deg); } - } - - &:hover { - - svg { - fill: $color-gray-30; - } - - } - - } - - &.group { - - &.open { - - .toggle-content { - flex-shrink: 0; - - svg { - transform: rotate(270deg); - } - - } - - } - - } - - span.element-name { - min-width: 40px; - min-height: 16px; - display: block; - - color: $color-gray-20; - font-size: $fs13; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.selected { - - .element-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - } - - } - - .selected { - - svg { - fill: $color-gray-20; - } - - } - - &:hover { - border-color: $color-primary; - - .element-icon { - - svg { - fill: $color-gray-20; - } - - } - - span { - color: $color-gray-60; - } - - } - - &.dragging { - // TODO: revisit this - background-color: #eee; - } - } - } - -} diff --git a/frontend/resources/styles/main/partials/sidebar-v2.scss b/frontend/resources/styles/main/partials/sidebar-v2.scss deleted file mode 100644 index 98f6ed6c7..000000000 --- a/frontend/resources/styles/main/partials/sidebar-v2.scss +++ /dev/null @@ -1,91 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.settings-bar { - background-color: $color-gray-50; - bottom: 0; - height: 100%; - position: fixed; - right: 0; - width: 230px; - z-index: 10; - - &.settings-bar-left { - left: 0 - } - - .settings-bar-inside { - align-items: center; - display: flex; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - padding-top: 50px; - height: 100%; - - .tool-window { - border-bottom: 1px solid $color-gray-20; - display: flex; - flex-direction: column; - flex: 1; - width: 100%; - - .tool-window-bar { - align-items: center; - border-bottom: 1px solid $color-gray-20; - display: flex; - flex-shrink: 0; - padding: 2px $x-small; - - svg { - fill: $color-gray-20; - height: 12px; - width: 12px; - } - - span { - color: $color-gray-60; - font-weight: bold; - } - - .tool-window-icon { - margin-right: $small; - } - - .tool-window-close { - cursor: pointer; - margin-left: auto; - transform: rotate(45deg); - - &:hover { - - svg { - fill: $color-danger; - } - - } - - } - - } - - .tool-window-content { - display: flex; - flex-wrap: wrap; - overflow-y: auto; - padding-bottom: $medium; - } - - &#layers { - padding-bottom: 30px; - } - - } - - } - -} diff --git a/frontend/resources/styles/main/partials/workspace-bar-v2.scss b/frontend/resources/styles/main/partials/workspace-bar-v2.scss deleted file mode 100644 index 2b255f39d..000000000 --- a/frontend/resources/styles/main/partials/workspace-bar-v2.scss +++ /dev/null @@ -1,292 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz - -.workspace-bar { - align-items: center; - background-color: $color-gray-50; - border-bottom: 1px solid $color-gray-60; - display: flex; - height: 50px; - padding: $x-small $medium $x-small 65px; - position: relative; - z-index: 11; - - .main-icon { - align-items: center; - background-color: $color-gray-60; - cursor: pointer; - display: flex; - height: 100%; - justify-content: center; - left: 0; - position: absolute; - top: 0; - width: 50px; - - a { - height: 35px; - - svg { - fill: $color-gray-30; - height: 35px; - width: 35px; - - } - - &:hover { - - svg { - fill: $color-primary; - } - - } - - } - - } - - .project-tree-btn { - align-items: center; - background-color: $color-gray-60; - border-radius: $br-small; - border: 1px solid transparent; - cursor: pointer; - display: flex; - padding: $x-small $x-small $x-small $medium; - width: 164px; - - svg { - fill: $color-gray-20; - height: 20px; - margin-right: $small; - width: 20px; - } - - span { - color: $color-gray-60; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &:hover { - background-color: $color-gray-10; - border-color: $color-gray-60; - } - - &.selected { - background-color: $color-primary; - - svg { - fill: $color-white; - } - - span { - color: $color-white; - } - - } - } - - .workspace-options { - display: flex; - - .options-btn { - align-items: center; - border-right: 4px double $color-gray-60; - display: flex; - margin: 0; - - &:last-child { - border: none; - } - - li { - align-items: center; - background-color: $color-gray-60; - border: 1px solid transparent; - border-radius: $br-small; - cursor: pointer; - display: flex; - flex-shrink: 0; - height: 30px; - justify-content: center; - margin: 0 $small; - position: relative; - width: 30px; - - a { - padding-top: 6px; - } - - svg { - fill: $color-gray-20; - height: 18px; - width: 18px; - } - - &:hover { - background-color: $color-gray-10; - border-color: $color-gray-60; - } - - &.selected { - background-color: $color-primary; - - svg { - fill: $color-white; - } - - } - - &.view-mode { - background-color: $color-gray-20; - - svg { - fill: $color-gray-60; - } - - &:hover { - background-color: $color-white; - border-color: $color-gray-60; - - svg { - fill: $color-gray-20; - } - - } - - } - - } - - } - - .options-view { - align-items: center; - display: flex; - justify-content: content; - margin: 0; - - li { - align-items: center; - display: flex; - flex-shrink: 0; - height: 30px; - margin: 0 $small; - position: relative; - width: 60px; - - &.zoom-input { - width: 85px; - padding: 0 25px; - position: relative; - - .add-zoom, - .remove-zoom { - align-items: center; - border-radius: 50%; - border: 1px solid $color-gray-40; - cursor: pointer; - color: $color-gray-40; - display: none; - flex-shrink: 0; - font-size: $fs20; - font-weight: bold; - height: 20px; - justify-content: center; - position: absolute; - top: 5px; - width: 20px; - - &:hover { - border-color: $color-primary; - color: $color-primary; - } - - } - - .add-zoom { - left: -5px; - } - - .remove-zoom { - padding-top: 4px; - right: -5px; - } - - &:hover { - - .add-zoom, - .remove-zoom { - display: flex; - @include animation(0s,.3s,fadeIn); - } - - } - - } - - } - - } - - } - -} - -.options-btn { - align-items: center; - border-right: 4px double $color-gray-60; - display: flex; - margin: 0; - - &:last-child { - border: none; - } - - li { - align-items: center; - background-color: $color-gray-60; - border: 1px solid transparent; - border-radius: $br-small; - cursor: pointer; - display: flex; - flex-shrink: 0; - height: 30px; - justify-content: center; - margin: 0 $small; - position: relative; - width: 30px; - - a { - padding-top: 6px; - } - - svg { - fill: $color-gray-20; - height: 18px; - width: 18px; - } - - &:hover { - background-color: $color-gray-10; - border-color: $color-gray-60; - } - - &.selected { - background-color: $color-primary; - - svg { - fill: $color-white; - } - - } - - } - -}