3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

📎 Minor changes on scss code style on framework.scss.

Browse source
This commit is contained in:
Andrey Antukh 2020-10-20 17:26:48 +02:00 • committed by Hirunatan
parent 9f917603d8
commit 4705656d29
1 changed files with 97 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

157
frontend/resources/styles/common/framework.scss
View file

@ -1046,7 +1046,7 @@ input[type=range]:focus::-ms-fill-upper {
@include animation(0, .6s, fadeOutUp); @include animation(0, .6s, fadeOutUp);
} }
& .icon { .icon {
display: flex; display: flex;
svg { svg {
@ -1056,11 +1056,11 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
& .content { .content {
&.bottom-actions { &.bottom-actions {
flex-direction: column; flex-direction: column;
& .actions { .actions {
margin-top: $medium; margin-top: $medium;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -1072,7 +1072,7 @@ input[type=range]:focus::-ms-fill-upper {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
& .actions { .actions {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -1083,12 +1083,12 @@ input[type=range]:focus::-ms-fill-upper {
} }
} }
& .btn-close { .btn-close {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0px; top: 0px;
width: 40px; width: 48px;
height: 40px; height: 48px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1107,31 +1107,30 @@ input[type=range]:focus::-ms-fill-upper {
opacity: .8; opacity: .8;
} }
} }
}
.banner.fixed { &.fixed {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 40px; height: 48px;
z-index: 13; z-index: 13;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
& .wrapper { .wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
max-width: 60%; max-width: 60%;
& .icon { .icon {
margin-right: $medium; margin-right: $medium;
} }
& .content { .content {
color: $color-white; color: $color-white;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1139,21 +1138,20 @@ input[type=range]:focus::-ms-fill-upper {
font-size: $fs15; font-size: $fs15;
} }
} }
} }
.banner.floating, &.floating, &.inline {
.banner.inline {
min-height: 40px; min-height: 40px;
& .wrapper { .wrapper {
display: flex; display: flex;
& .icon { .icon {
padding: $small; padding: $small;
width: 40px; width: 40px;
} }
& .content { .content {
color: $color-black; color: $color-black;
display: flex; display: flex;
font-size: $fs14; font-size: $fs14;
@ -1163,31 +1161,31 @@ input[type=range]:focus::-ms-fill-upper {
} }
&.error { &.error {
& .content { .content {
background-color: lighten($color-danger,30%); background-color: lighten($color-danger,30%);
} }
} }
&.success { &.success {
& .content { .content {
background-color: lighten($color-success,30%); background-color: lighten($color-success,30%);
} }
} }
&.warning { &.warning {
& .content { .content {
background-color: lighten($color-warning,30%); background-color: lighten($color-warning,30%);
} }
} }
&.info { &.info {
& .content { .content {
background-color: lighten($color-info,30%); background-color: lighten($color-info,30%);
} }
} }
} }
.banner.floating { &.floating {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.18);
position: absolute; position: absolute;
top: 70px; top: 70px;
@ -1213,117 +1211,14 @@ input[type=range]:focus::-ms-fill-upper {
&.info { &.info {
border: 1px solid $color-info; border: 1px solid $color-info;
} }
} }
.banner.inline { &.inline {
width: 100%; width: 100%;
margin-bottom: $big; margin-bottom: $big;
}
} }
// .inline-banner {
// // display: flex;
// // margin-bottom: $big;
// // min-height: 40px;
// // width: 100%;
//
// // .icon {
// // display: flex;
// // flex-shrink: 0;
// // justify-content: center;
// // margin-right: $small;
// // padding: $small;
// // width: 40px;
// //
// // svg {
// // fill: $color-white;
// // height: 20px;
// // width: 20px;
// // }
// // }
//
// .content {
// display: flex;
// flex-direction: column;
// }
//
// .main {
// display: flex;
// }
//
// .extra {
// display: flex;
// justify-content: flex-end;
// padding: $small;
//
// > div:not(:last-child) {
// margin-right: $small;
// }
// }
//
// .text {
// display: flex;
// font-size: $fs14;
// color: $color-black;
// padding: $small;
// }
//
// &.error {
// background-color: lighten($color-danger,30%);
// .icon {
// background-color: $color-danger;
// }
// }
//
// &.success {
// background-color: lighten($color-success,30%);
// .icon {
// background-color: $color-success;
// }
// }
//
// &.warning {
// background-color: lighten($color-warning,30%);
// .icon {
// background-color: $color-warning;
// }
// }
//
// &.info {
// background-color: lighten($color-info,30%);
// .icon {
// background-color: $color-info;
// }
// }
//
// .btn-close {
// width: 40px;
// height: 40px;
// flex-shrink: 0;
// display: flex;
// justify-content: center;
// align-items: center;
// cursor: pointer;
// opacity: .35;
//
// svg {
// fill: $color-black;
// height: 18px;
// width: 18px;
// transform: rotate(45deg);
// }
//
// &:hover {
// opacity: .8;
// }
// }
//
// &.quick {
// .btn-close {
// display: none;
// }
// }
// }
.close-bezier { .close-bezier {
fill: $color-danger; fill: $color-danger;
stroke: $color-danger-dark; stroke: $color-danger-dark;