Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

create new styles for sidebar element options

Browse source
This commit is contained in:
Juan de la Cruz 2016-02-18 21:08:10 +01:00
parent a312559b26
commit bf44c61020
10 changed files with 63 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
resources/public/styles/framework.scss
View file

@ -676,7 +676,7 @@ input[type=range]::-webkit-slider-runnable-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -686,13 +686,13 @@ input[type=range]::-webkit-slider-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $color-gray-lighter; background: $dark-ui-icons;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -8px; margin-top: -8px;
} }
input[type=range]:focus::-webkit-slider-runnable-track { input[type=range]:focus::-webkit-slider-runnable-track {
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
} }
input[type=range]::-moz-range-track { input[type=range]::-moz-range-track {
width: 100%; width: 100%;
@ -700,7 +700,7 @@ input[type=range]::-moz-range-track {
cursor: pointer; cursor: pointer;
animate: 0.2s; animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
border-radius: 25px; border-radius: 25px;
border: 0px solid #000101; border: 0px solid #000101;
} }
@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $color-gray-lighter; background: $dark-ui-icons;
cursor: pointer; cursor: pointer;
} }
input[type=range]::-ms-track { input[type=range]::-ms-track {
@ -724,13 +724,13 @@ input[type=range]::-ms-track {
color: transparent; color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
} }
input[type=range]::-ms-fill-upper { input[type=range]::-ms-fill-upper {
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
border: 0px solid #000101; border: 0px solid #000101;
border-radius: 50px; border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@ -741,14 +741,14 @@ input[type=range]::-ms-thumb {
height: 24px; height: 24px;
width: 8px; width: 8px;
border-radius: 7px; border-radius: 7px;
background: $color-gray-lighter; background: $dark-ui-icons;
cursor: pointer; cursor: pointer;
} }
input[type=range]:focus::-ms-fill-lower { input[type=range]:focus::-ms-fill-lower {
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
} }
input[type=range]:focus::-ms-fill-upper { input[type=range]:focus::-ms-fill-upper {
background: darken($color-gray-darker, 12%); background: $secondary-ui-bg;
} }
// Scroll bar (chrome) // Scroll bar (chrome)
@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
&::after { &::after {
background-color: $color-white; background-color: $color-white;
border-radius: $br-small; border-radius: $br-small;
color: $color-gray-dark; color: $light-ui-text;
content: attr(alt); content: attr(alt);
font-size: $fs11; font-size: $fs11;
font-weight: bold; font-weight: bold;
@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
background-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.7);
box-sizing: border-box; box-sizing: border-box;
border-radius: 0; border-radius: 0;
color: $color-gray-darker; color: $dark-ui-text;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;

12
resources/public/styles/main.scss
View file

@ -35,12 +35,12 @@
@import 'partials/workspace-canvas'; @import 'partials/workspace-canvas';
@import 'partials/tool-bar'; @import 'partials/tool-bar';
@import 'partials/project-bar'; @import 'partials/project-bar';
@import 'partials/settings-bar'; @import 'partials/sidebar';
@import 'partials/settings-bar-tools'; @import 'partials/sidebar-tools';
@import 'partials/element-options'; @import 'partials/sidebar-element-options';
@import 'partials/settings-bar-icons'; @import 'partials/sidebar-icons';
@import 'partials/settings-bar-layers'; @import 'partials/sidebar-layers';
@import 'partials/settings-bar-sitemap'; @import 'partials/sidebar-sitemap';
@import 'partials/dashboard-bar'; @import 'partials/dashboard-bar';
@import 'partials/dashboard-grid'; @import 'partials/dashboard-grid';
@import 'partials/activity-bar'; @import 'partials/activity-bar';

4
resources/public/styles/partials/colorpicker.scss
View file

@ -1,6 +1,8 @@
.colorpicker { .colorpicker {
canvas { canvas {
border: 1px solid #111111; border: 1px solid #111111;
cursor: cell; cursor: cell;
} }
}
}

98
resources/public/styles/partials/element-options.scss → resources/public/styles/partials/sidebar-element-options.scss
View file

@ -1,27 +1,26 @@
.element-options { .element-options {
display: flex; display: flex;
position: absolute;
transition: all .1s ease;
.element-icons { .element-icons {
background-color: $color-white; background-color: $primary-ui-bg;
border: 1px solid darken($color-gray-lighter, 5%); border: 1px solid $bright-ui-border;
border-radius: $br-small; border-radius: $br-small;
display: flex; display: flex;
flex-direction: column;
height: 100%; height: 100%;
margin: 0; margin: $x-small 0 $x-small $x-small;
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $color-gray-lighter; border-right: 1px solid $bright-ui-border;
border-radius: $br-small; border-radius: $br-small;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex: 1;
justify-content: center;
padding: $small; padding: $small;
svg { svg {
fill: $color-gray; fill: $dark-ui-icons;
height: 15px; height: 15px;
width: 15px; width: 15px;
} }
@ -35,10 +34,10 @@
} }
&.selected { &.selected {
background-color: $color-gray-darker; background-color: $main-ui-color;
svg { svg {
fill: $main-ui-color; fill: $color-white;
} }
} }
@ -52,18 +51,13 @@
} }
.element-set { .element-set {
background-color: $color-gray-darker; color: $light-ui-text;
border-radius: $br-small;
color: $color-gray-light;
margin-left: $x-small; margin-left: $x-small;
width: 220px;
.element-set-title { .element-set-title {
background-color: $color-gray-dark;
border-top-left-radius: $br-small;
border-top-right-radius: $br-small;
box-sizing: border-box; box-sizing: border-box;
color: $color-gray-lighter; border-bottom: 1px dashed $bright-ui-border;
color: $light-ui-text;
font-weight: bold; font-weight: bold;
padding: 2px $x-small; padding: 2px $x-small;
width: 100%; width: 100%;
@ -80,30 +74,32 @@
.input-text { .input-text {
background-color: transparent; background-color: transparent;
border-color: $color-gray; border-color: $bright-ui-border;
box-sizing: border-box; box-sizing: border-box;
color: $dark-ui-text;
font-size: $fs13; font-size: $fs13;
margin: $x-small; margin: $x-small;
padding: $x-small; padding: $x-small;
width: 100%; width: 100%;
&:focus { &:focus {
color: $color-white; color: darken($dark-ui-text, 8%);
border-color: $color-white; border-color: $dark-ui-border;
} }
} }
.input-select { .input-select {
color: $dark-ui-text;
&:focus { &:focus {
color: $color-gray; color: darken($dark-ui-text, 8%);
} }
} }
span { span {
color: darken($color-gray-darker, 20%); color: $light-ui-text;
font-size: $fs12; font-size: $fs12;
} }
@ -112,7 +108,7 @@
width: 20%; width: 20%;
svg { svg {
fill: $color-gray-light; fill: $light-ui-text;
height: 15px; height: 15px;
width: 15px; width: 15px;
@ -135,74 +131,57 @@
} }
.color-th { .color-th {
background-color: $color-gray-light; background-color: $color-gray-lighter;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
height: 25px; height: 25px;
margin: 5px 4px 0 4px; margin: 5px 4px 0 4px;
width: 25px; width: 25px;
&.palette-th { &.palette-th {
align-items: center; align-items: center;
background-color: $color-gray-darker; border: 2px solid $light-ui-icons;
border: 2px solid $color-gray-light;
display: flex; display: flex;
justify-content: center; justify-content: center;
svg { svg {
fill: $color-gray-light; fill: $light-ui-icons;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
&:hover { &:hover {
border-color: $main-ui-color; border-color: $main-ui-color;
svg { svg {
fill: $main-ui-color; 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 { .align-icons {
cursor: pointer; cursor: pointer;
svg { svg {
fill: $color-gray-light; fill: $light-ui-icons;
height: 20px; height: 20px;
margin: 5px 7px 0 7px; margin: 5px 7px 0 7px;
width: 20px; width: 20px;
} }
&:hover, &:hover,
&.current { &.current {
svg { svg {
fill: $main-ui-color; fill: $main-ui-color;
} }
} }
} }
.element-color-picker { .element-color-picker {
@ -216,6 +195,7 @@
height: 100%; height: 100%;
margin-right: 15px; margin-right: 15px;
} }
.color-picker-bar { .color-picker-bar {
height: 165px; height: 165px;
position: relative; position: relative;
@ -229,5 +209,7 @@
width: 23px; width: 23px;
top: 30%; top: 30%;
} }
} }
} }

0
resources/public/styles/partials/settings-bar-icons.scss → resources/public/styles/partials/sidebar-icons.scss
View file

0
resources/public/styles/partials/settings-bar-layers.scss → resources/public/styles/partials/sidebar-layers.scss
View file

0
resources/public/styles/partials/settings-bar-sitemap.scss → resources/public/styles/partials/sidebar-sitemap.scss
View file

0
resources/public/styles/partials/settings-bar-tools.scss → resources/public/styles/partials/sidebar-tools.scss
View file

0
resources/public/styles/partials/settings-bar.scss → resources/public/styles/partials/sidebar.scss
View file

4
src/uxbox/ui/workspace/sidebar/options.cljs
View file

@ -525,11 +525,11 @@
(html (html
[:div.elementa-options.tool-window [:div.elementa-options.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:div.tool-window-icon i/project-tree] [:div.tool-window-icon i/shapes]
[:span (tr "ds.element-options")] [:span (tr "ds.element-options")]
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content
[:div.element-options.tool-window [:div.element-options
(if shape (if shape
(options-menus shape))]]]))) (options-menus shape))]]])))