penpot/resources/public/styles/partials/settings-bar.scss
2016-02-14 20:37:09 +01:00

83 lines
1.4 KiB
SCSS

.settings-bar {
background-color: $color-gray-dark;
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;
padding-bottom: 30px;
padding-top: 50px;
height: 100%;
.tool-window {
border-bottom: 1px solid $color-gray-darker;
display: flex;
flex-direction: column;
height: 100%;
max-height: 40%;
//flex: 1;
width: 100%;
.tool-window-bar {
align-items: center;
background-color: $color-gray-darker;
display: flex;
flex-shrink: 0;
padding: 2px $x-small;
svg {
fill: $color-gray;
height: 12px;
width: 12px;
}
span {
color: $color-gray-light;
font-weight: bold;
}
.tool-window-icon {
margin-right: $small;
}
.tool-window-close {
cursor: pointer;
margin-left: auto;
transform: rotate(45deg);
&:hover {
svg {
fill: $color-gray-lighter;
}
}
}
}
.tool-window-content {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
padding-bottom: $medium;
}
}
}
}