mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
box size refactor
This commit is contained in:
parent
1c168234b8
commit
8f17ee1fc5
15 changed files with 12 additions and 29 deletions
|
@ -10,6 +10,7 @@ body {
|
|||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
transition: all .4s ease;
|
||||
}
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
}
|
||||
|
||||
.dashboard-content {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 60px);
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -23,7 +23,6 @@
|
|||
|
||||
.date-ribbon {
|
||||
background-color: lighten($color-gray-light, 12%);
|
||||
box-sizing: border-box;
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
font-weight: bold;
|
||||
|
@ -34,7 +33,6 @@
|
|||
|
||||
.activity-input {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: $fs13;
|
||||
padding: $small;
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
background-color: $color-white;
|
||||
border-top: 1px solid $color-gray-lighter;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
left: 0;
|
||||
padding: 1rem;
|
||||
|
|
|
@ -3,9 +3,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $fs14;
|
||||
padding: $medium 250px $medium $medium;
|
||||
height: 100%;
|
||||
padding: $medium;
|
||||
// ACTIVITY BAR PADDING
|
||||
//padding: $medium 250px $medium $medium;
|
||||
|
||||
.dashboard-title {
|
||||
margin: $medium 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
|
@ -47,16 +51,12 @@
|
|||
|
||||
.dashboard-grid-content {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: $big;
|
||||
max-height: 77vh;
|
||||
min-height: 60vh;
|
||||
overflow: scroll;
|
||||
padding-bottom: 30px;
|
||||
width: 100%;
|
||||
|
||||
.grid-item {
|
||||
|
@ -72,11 +72,11 @@
|
|||
padding: $medium;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
width: 18%;
|
||||
|
||||
&.small-item {
|
||||
max-width: 12%;
|
||||
min-width: 150px;
|
||||
min-width: 190px;
|
||||
}
|
||||
|
||||
&.add-project {
|
||||
|
@ -128,7 +128,6 @@
|
|||
|
||||
.project-th-actions {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
left: 0;
|
||||
|
|
|
@ -54,6 +54,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
|
||||
.element-title {
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: $br-medium;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $medium $x-big;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
align-items: center;
|
||||
background-color: $primary-ui-bg;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
padding: $x-small $medium;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
@ -71,7 +71,6 @@
|
|||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
border: 1px solid $soft-ui-border;
|
||||
box-sizing: border-box;
|
||||
min-width: 150px;
|
||||
padding: 0 $small;
|
||||
position: absolute;
|
||||
|
|
|
@ -21,7 +21,6 @@
|
|||
|
||||
.project-name {
|
||||
border-bottom: 1px solid $color-gray-lighter;
|
||||
box-sizing: border-box;
|
||||
font-size: $fs14;
|
||||
font-weight: bold;
|
||||
padding: 0 $small;
|
||||
|
@ -45,7 +44,6 @@
|
|||
|
||||
li {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $x-small $small;
|
||||
|
|
|
@ -55,7 +55,6 @@
|
|||
margin-left: $x-small;
|
||||
|
||||
.element-set-title {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dashed $soft-ui-border;
|
||||
color: $medium-ui-text;
|
||||
font-weight: bold;
|
||||
|
@ -75,7 +74,6 @@
|
|||
.input-text {
|
||||
background-color: transparent;
|
||||
border-color: $soft-ui-border;
|
||||
box-sizing: border-box;
|
||||
color: $intense-ui-text;
|
||||
font-size: $fs13;
|
||||
margin: $x-small;
|
||||
|
|
|
@ -55,7 +55,6 @@
|
|||
}
|
||||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -80,7 +79,6 @@
|
|||
.element-list-body {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $soft-ui-border;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: $small;
|
||||
width: 100%;
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
.project-title {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $soft-ui-border;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding: $x-small;
|
||||
width: 100%;
|
||||
|
@ -49,7 +48,6 @@
|
|||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $soft-ui-border;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: $x-small;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.settings-bar {
|
||||
background-color: $primary-ui-bg;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
|
@ -14,7 +13,6 @@
|
|||
|
||||
.settings-bar-inside {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
background-color: $primary-ui-bg;
|
||||
border-bottom: 1px solid $soft-ui-border;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
height: 50px;
|
||||
padding: $x-small $medium $x-small 65px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
@ -46,7 +46,6 @@
|
|||
align-items: center;
|
||||
background-color: $secondary-ui-bg;
|
||||
border-radius: $br-small;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
min-width: 164px;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
.workspace-content {
|
||||
background-color: $canvas-bg;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
@ -20,7 +19,6 @@
|
|||
}
|
||||
|
||||
.workspace-canvas {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 50px);
|
||||
overflow: scroll;
|
||||
transition: none;
|
||||
|
|
Loading…
Add table
Reference in a new issue