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

restructure settings bar styles

Browse source
This commit is contained in:
elhombretecla 2016-02-14 20:37:01 +01:00
parent fefd863957
commit 54d1d750e9
9 changed files with 301 additions and 291 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -826,6 +826,7 @@ input[type=range]:focus::-ms-fill-upper {
justify-content: center;
left: 0;
top: 0;
white-space: normal;
width: 100%;
}

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

@ -37,6 +37,10 @@
@import 'partials/tool-bar';
@import 'partials/project-bar';
@import 'partials/settings-bar';
@import 'partials/settings-bar-tools';
@import 'partials/settings-bar-icons';
@import 'partials/settings-bar-layers';
@import 'partials/settings-bar-sitemap';
@import 'partials/dashboard-bar';
@import 'partials/dashboard-grid';
@import 'partials/activity-bar';

42
resources/public/styles/partials/settings-bar-icons.scss Normal file
View file

@ -0,0 +1,42 @@
.figures-catalog {
width: 100%;
padding: $medium $medium 0 $medium;
select {
width: 100%;
margin-bottom: 0;
}
}
.figure-btn {
align-items: center;
background-color: $color-gray-light;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 54px;
justify-content: center;
margin: $medium 0 0 $medium;
width: 54px;
svg {
fill: $color-gray-darker;
height: 40px;
width: 40px;
}
&:hover {
background-color: $color-white;
}
&.selected {
background-color: $color-gray-darker;
svg {
fill: $color-primary;
}
}
}

218
resources/public/styles/partials/settings-bar-layers.scss Normal file
View file

@ -0,0 +1,218 @@
.layers-tools {
background-color: $color-gray-darker;
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: 80px;
li {
cursor: pointer;
svg {
fill: $color-gray;
height: 16px;
width: 16px;
&:hover {
fill: $color-white;
}
}
&.delete-layer {
svg {
&:hover {
fill: $color-danger;
}
}
}
}
}
}
.element-list {
margin: 0;
width: 100%;
ul {
margin: 0;
}
li {
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
width: 100%;
&.open {
ul {
li {
.element-list-body {
border-style: dashed;
}
}
}
}
.element-list-body {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box;
background-color: $color-gray-dark;
display: flex;
padding: $small;
width: 100%;
svg {
fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 62px;
}
.element-icon,
.sublevel-element {
svg {
fill: $color-gray-darker;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $color-gray-darker;
transform: rotate(90deg);
width: 12px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $color-white;
}
}
}
&.group {
&.open {
.toggle-content {
flex-shrink: 0;
svg {
transform: rotate(270deg);
}
}
}
}
span {
color: darken($color-gray-darker, 8%);
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
}
&.selected {
background-color: lighten($color-gray-darker, 5%);
.element-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
}
.selected {
svg {
fill: $color-gray-lighter;
}
}
&:hover {
border-color: $color-gray-light;
.element-icon {
svg {
fill: $color-gray-lighter;
}
}
span {
color: $color-gray-lighter;
}
}
&.drag-top {
border-top: 2px solid $color-primary;
}
&.drag-bottom {
border-bottom: 2px solid $color-primary;
}
&.drag-inside {
border: 2px solid $color-primary;
}
}
}
}

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

31
resources/public/styles/partials/settings-bar-tools.scss Normal file
View file

@ -0,0 +1,31 @@
.tool-btn {
align-items: center;
background-color: $color-gray-light;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 54px;
justify-content: center;
margin: $medium 0 0 $medium;
width: 54px;
svg {
fill: $color-gray-darker;
height: 35px;
width: 35px;
}
&:hover {
background-color: $color-white;
}
&.selected {
background-color: $color-gray-darker;
svg {
fill: $color-primary;
}
}
}

291
resources/public/styles/partials/settings-bar.scss
View file

@ -4,7 +4,7 @@
height: 100%;
position: fixed;
right: 0;
width: 250px;
width: 230px;
z-index: 10;
&.settings-bar-left {
@ -21,6 +21,7 @@
height: 100%;
.tool-window {
border-bottom: 1px solid $color-gray-darker;
display: flex;
flex-direction: column;
height: 100%;
@ -72,294 +73,6 @@
flex-wrap: wrap;
overflow-y: auto;
padding-bottom: $medium;
.figures-catalog {
width: 100%;
padding: $medium $medium 0 $medium;
select {
width: 100%;
margin-bottom: 0;
}
}
}
}
}
.layers-tools {
background-color: $color-gray-darker;
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: 80px;
li {
cursor: pointer;
svg {
fill: $color-gray;
height: 16px;
width: 16px;
&:hover {
fill: $color-white;
}
}
&.delete-layer {
svg {
&:hover {
fill: $color-danger;
}
}
}
}
}
}
}
.tool-btn {
align-items: center;
background-color: $color-gray-light;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 94px;
justify-content: center;
margin: $medium 0 0 $big;
width: 94px;
svg {
fill: $color-gray-darker;
height: 52px;
width: 52px;
}
&:hover {
background-color: $color-white;
}
&.selected {
background-color: $color-gray-darker;
svg {
fill: $color-primary;
}
}
}
.figure-btn {
align-items: center;
background-color: $color-gray-light;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 62px;
justify-content: center;
margin: $medium 0 0 $medium;
width: 62px;
svg {
fill: $color-gray-darker;
height: 50px;
width: 50px;
}
&:hover {
background-color: $color-white;
}
&.selected {
background-color: $color-gray-darker;
svg {
fill: $color-primary;
}
}
}
.element-list {
margin: 0;
width: 100%;
ul {
margin: 0;
}
li {
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
width: 100%;
&.open {
ul {
li {
.element-list-body {
border-style: dashed;
}
}
}
}
.element-list-body {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box;
background-color: $color-gray-dark;
display: flex;
padding: $small;
width: 100%;
svg {
fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 62px;
}
.element-icon,
.sublevel-element {
svg {
fill: $color-gray-darker;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $color-gray-darker;
transform: rotate(90deg);
width: 12px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $color-white;
}
}
}
&.group {
&.open {
.toggle-content {
flex-shrink: 0;
svg {
transform: rotate(270deg);
}
}
}
}
span {
color: darken($color-gray-darker, 8%);
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
}
&.selected {
background-color: lighten($color-gray-darker, 5%);
.element-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
}
.selected {
svg {
fill: $color-gray-lighter;
}
}
&:hover {
border-color: $color-gray-light;
.element-icon {
svg {
fill: $color-gray-lighter;
}
}
span {
color: $color-gray-lighter;
}
}
&.drag-top {
border-top: 2px solid $color-primary;
}
&.drag-bottom {
border-bottom: 2px solid $color-primary;
}
&.drag-inside {
border: 2px solid $color-primary;
}
}

3
resources/public/styles/partials/workspace-bar.scss
View file

@ -1,6 +1,7 @@
.workspace-bar {
align-items: center;
background-color: $color-gray;
border-bottom: 1px solid $color-gray-dark;
display: flex;
height: 40px;
padding: $x-small $medium $x-small 65px;
@ -48,7 +49,7 @@
box-sizing: border-box;
cursor: pointer;
display: flex;
min-width: 180px;
min-width: 164px;
padding: $x-small $x-big+$x-small $x-small $medium;
svg {

2
resources/public/styles/partials/workspace-canvas.scss
View file

@ -1,7 +1,7 @@
.workspace-canvas {
box-sizing: border-box;
height: calc(100vh - 50px);
margin: 0 250px 0 250px;
margin: 0 230px 0 230px;
overflow: scroll;
width: 100%;
transition: none;