mirror of
https://github.com/penpot/penpot.git
synced 2025-02-09 16:48:16 -05:00
create new styles for sidebar element options
This commit is contained in:
Juan de la Cruz
parent
a312559b26
commit
bf44c61020
10 changed files with 63 additions and 79 deletions
|
|
@ -676,7 +676,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
|||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
border-radius: 25px;
|
||||
border: 0px solid #000101;
|
||||
}
|
||||
|
|
@ -686,13 +686,13 @@ input[type=range]::-webkit-slider-thumb {
|
|||
height: 24px;
|
||||
width: 8px;
|
||||
border-radius: 7px;
|
||||
background: $color-gray-lighter;
|
||||
background: $dark-ui-icons;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -8px;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
|
|
@ -700,7 +700,7 @@ input[type=range]::-moz-range-track {
|
|||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
border-radius: 25px;
|
||||
border: 0px solid #000101;
|
||||
}
|
||||
|
|
@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
|
|||
height: 24px;
|
||||
width: 8px;
|
||||
border-radius: 7px;
|
||||
background: $color-gray-lighter;
|
||||
background: $dark-ui-icons;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]::-ms-track {
|
||||
|
|
@ -724,13 +724,13 @@ input[type=range]::-ms-track {
|
|||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
border: 0px solid #000101;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
border: 0px solid #000101;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
|
|
@ -741,14 +741,14 @@ input[type=range]::-ms-thumb {
|
|||
height: 24px;
|
||||
width: 8px;
|
||||
border-radius: 7px;
|
||||
background: $color-gray-lighter;
|
||||
background: $dark-ui-icons;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: darken($color-gray-darker, 12%);
|
||||
background: $secondary-ui-bg;
|
||||
}
|
||||
|
||||
// Scroll bar (chrome)
|
||||
|
|
@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
&::after {
|
||||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
color: $color-gray-dark;
|
||||
color: $light-ui-text;
|
||||
content: attr(alt);
|
||||
font-size: $fs11;
|
||||
font-weight: bold;
|
||||
|
|
@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
|
|||
background-color: rgba(255,255,255,.7);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
color: $color-gray-darker;
|
||||
color: $dark-ui-text;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -35,12 +35,12 @@
|
|||
@import 'partials/workspace-canvas';
|
||||
@import 'partials/tool-bar';
|
||||
@import 'partials/project-bar';
|
||||
@import 'partials/settings-bar';
|
||||
@import 'partials/settings-bar-tools';
|
||||
@import 'partials/element-options';
|
||||
@import 'partials/settings-bar-icons';
|
||||
@import 'partials/settings-bar-layers';
|
||||
@import 'partials/settings-bar-sitemap';
|
||||
@import 'partials/sidebar';
|
||||
@import 'partials/sidebar-tools';
|
||||
@import 'partials/sidebar-element-options';
|
||||
@import 'partials/sidebar-icons';
|
||||
@import 'partials/sidebar-layers';
|
||||
@import 'partials/sidebar-sitemap';
|
||||
@import 'partials/dashboard-bar';
|
||||
@import 'partials/dashboard-grid';
|
||||
@import 'partials/activity-bar';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.colorpicker {
|
||||
|
||||
canvas {
|
||||
border: 1px solid #111111;
|
||||
cursor: cell;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,26 @@
|
|||
.element-options {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
transition: all .1s ease;
|
||||
|
||||
.element-icons {
|
||||
background-color: $color-white;
|
||||
border: 1px solid darken($color-gray-lighter, 5%);
|
||||
background-color: $primary-ui-bg;
|
||||
border: 1px solid $bright-ui-border;
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
margin: $x-small 0 $x-small $x-small;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
border-right: 1px solid $bright-ui-border;
|
||||
border-radius: $br-small;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: $small;
|
||||
|
||||
svg {
|
||||
fill: $color-gray;
|
||||
fill: $dark-ui-icons;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
|
@ -35,10 +34,10 @@
|
|||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $color-gray-darker;
|
||||
background-color: $main-ui-color;
|
||||
|
||||
svg {
|
||||
fill: $main-ui-color;
|
||||
fill: $color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -52,18 +51,13 @@
|
|||
}
|
||||
|
||||
.element-set {
|
||||
background-color: $color-gray-darker;
|
||||
border-radius: $br-small;
|
||||
color: $color-gray-light;
|
||||
color: $light-ui-text;
|
||||
margin-left: $x-small;
|
||||
width: 220px;
|
||||
|
||||
.element-set-title {
|
||||
background-color: $color-gray-dark;
|
||||
border-top-left-radius: $br-small;
|
||||
border-top-right-radius: $br-small;
|
||||
box-sizing: border-box;
|
||||
color: $color-gray-lighter;
|
||||
border-bottom: 1px dashed $bright-ui-border;
|
||||
color: $light-ui-text;
|
||||
font-weight: bold;
|
||||
padding: 2px $x-small;
|
||||
width: 100%;
|
||||
|
|
@ -80,30 +74,32 @@
|
|||
|
||||
.input-text {
|
||||
background-color: transparent;
|
||||
border-color: $color-gray;
|
||||
border-color: $bright-ui-border;
|
||||
box-sizing: border-box;
|
||||
color: $dark-ui-text;
|
||||
font-size: $fs13;
|
||||
margin: $x-small;
|
||||
padding: $x-small;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
color: $color-white;
|
||||
border-color: $color-white;
|
||||
color: darken($dark-ui-text, 8%);
|
||||
border-color: $dark-ui-border;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input-select {
|
||||
color: $dark-ui-text;
|
||||
|
||||
&:focus {
|
||||
color: $color-gray;
|
||||
color: darken($dark-ui-text, 8%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: darken($color-gray-darker, 20%);
|
||||
color: $light-ui-text;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +108,7 @@
|
|||
width: 20%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $light-ui-text;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
|
|
@ -135,74 +131,57 @@
|
|||
}
|
||||
|
||||
.color-th {
|
||||
background-color: $color-gray-light;
|
||||
background-color: $color-gray-lighter;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
height: 25px;
|
||||
margin: 5px 4px 0 4px;
|
||||
width: 25px;
|
||||
|
||||
&.palette-th {
|
||||
align-items: center;
|
||||
background-color: $color-gray-darker;
|
||||
border: 2px solid $color-gray-light;
|
||||
border: 2px solid $light-ui-icons;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $light-ui-icons;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $main-ui-color;
|
||||
svg {
|
||||
fill: $main-ui-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .border-element {
|
||||
// align-items: center;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// margin: 5px 2% 0 2%;
|
||||
// svg {
|
||||
// fill: $color-gray-light;
|
||||
// height: 12px;
|
||||
// width: 12px;
|
||||
// }
|
||||
// &.top-left {
|
||||
// svg {
|
||||
// transform: rotate(270deg);
|
||||
// }
|
||||
// }
|
||||
// &.bottom-left {
|
||||
// svg {
|
||||
// transform: rotate(180deg);
|
||||
// }
|
||||
// }
|
||||
// &.bottom-right {
|
||||
// svg {
|
||||
// transform: rotate(90deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.align-icons {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-light;
|
||||
fill: $light-ui-icons;
|
||||
height: 20px;
|
||||
margin: 5px 7px 0 7px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.current {
|
||||
|
||||
svg {
|
||||
fill: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-color-picker {
|
||||
|
|
@ -216,6 +195,7 @@
|
|||
height: 100%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.color-picker-bar {
|
||||
height: 165px;
|
||||
position: relative;
|
||||
|
|
@ -229,5 +209,7 @@
|
|||
width: 23px;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -525,11 +525,11 @@
|
|||
(html
|
||||
[:div.elementa-options.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/project-tree]
|
||||
[:div.tool-window-icon i/shapes]
|
||||
[:span (tr "ds.element-options")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.element-options.tool-window
|
||||
[:div.element-options
|
||||
(if shape
|
||||
(options-menus shape))]]])))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue