Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 15:56:11 -05:00
Code Issues Activity

💥 removed old scss files

Browse source
This commit is contained in:
alonso.torres 2020-03-10 13:21:38 +01:00 • committed by Andrey Antukh
parent eeb2f39ada
commit 39836fc821
8 changed files with 0 additions and 1681 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/resources/styles/main/partials/dashboard-bar-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}

419
frontend/resources/styles/main/partials/dashboard-grid-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}

123
frontend/resources/styles/main/partials/library-bar-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}
}
}

121
frontend/resources/styles/main/partials/main-bar-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}
}

265
frontend/resources/styles/main/partials/sidebar-layers-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}

279
frontend/resources/styles/main/partials/sidebar-sitemap-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}

91
frontend/resources/styles/main/partials/sidebar-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}

292
frontend/resources/styles/main/partials/workspace-bar-v2.scss
View file

@ -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 <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.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;
}
}
}
}