0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
penpot/frontend/resources/styles/main/partials/dashboard-fonts.scss

234 lines
4 KiB
SCSS
Raw Normal View History

.dashboard-fonts {
display: flex;
flex-direction: column;
align-items: center;
.dashboard-installed-fonts {
max-width: 1000px;
width: 100%;
display: flex;
2021-10-05 10:16:44 +02:00
margin-top: $size-5;
flex-direction: column;
h3 {
font-size: $fs14;
color: $color-gray-30;
2021-10-05 10:16:44 +02:00
margin: $size-1;
}
.font-item {
color: $color-black;
}
}
.installed-fonts-header {
color: $color-gray-40;
display: flex;
height: 40px;
font-size: $fs12;
background-color: $color-white;
align-items: center;
2021-10-05 10:16:44 +02:00
padding: 0px $size-5;
> .family {
min-width: 200px;
width: 200px;
}
> .variants {
padding-left: 12px;
}
.search-input {
display: flex;
flex-grow: 1;
justify-content: flex-end;
input {
font-size: $fs12;
border: 1px solid $color-gray-30;
border-radius: $br-small;
width: 130px;
2021-10-05 10:16:44 +02:00
padding: $size-1;
margin: 0px;
}
}
}
.font-item {
2021-10-05 10:16:44 +02:00
margin-top: $size-5;
color: $color-gray-40;
font-size: $fs14;
background-color: $color-white;
display: flex;
min-width: 1000px;
width: 100%;
min-height: 97px;
align-items: center;
2021-10-05 10:16:44 +02:00
padding: $size-5;
justify-content: space-between;
&:not(:first-child) {
border-top: 1px solid $color-gray-10;
}
input {
border: 1px solid $color-gray-30;
border-radius: $br-small;
margin: 0px;
2021-10-05 10:16:44 +02:00
padding: $size-2;
font-size: $fs12;
}
> .family {
min-width: 200px;
width: 200px;
}
> .filenames {
min-width: 200px;
}
> .variants {
font-size: $fs14;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
.variant {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: pointer;
.icon {
display: flex;
height: 16px;
width: 16px;
margin-left: 6px;
align-items: center;
svg {
fill: transparent;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
}
&:hover {
.icon svg {
fill: $color-gray-30;
}
}
}
}
.filenames {
display: flex;
flex-direction: column;
font-size: $fs12;
}
.options {
display: flex;
justify-content: flex-end;
.icon {
2021-10-05 10:16:44 +02:00
width: $size-5;
cursor: pointer;
display: flex;
margin-left: 10px;
justify-content: center;
align-items: center;
svg {
width: 16px;
height: 16px;
}
&.close {
svg {
transform: rotate(45deg);
}
}
}
}
}
.dashboard-fonts-upload {
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
.upload-button {
width: 100px;
}
}
.dashboard-fonts-hero {
font-size: $fs14;
2021-10-05 10:16:44 +02:00
padding: $size-6;
background-color: $color-white;
2021-10-05 10:16:44 +02:00
margin-top: $size-6;
display: flex;
justify-content: space-between;
.banner {
background-color: unset;
2021-06-14 18:08:27 -06:00
display: flex;
.icon {
display: flex;
align-items: center;
padding-left: 0px;
padding-right: 10px;
svg {
fill: $color-info;
}
}
}
.desc {
h2 {
2021-10-05 10:16:44 +02:00
margin-bottom: $size-4;
color: $color-black;
}
width: 80%;
color: $color-gray-40;
}
2021-06-14 18:08:27 -06:00
.btn-primary {
flex-shrink: 0;
}
}
.fonts-placeholder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1000px;
width: 100%;
height: 161px;
border: 1px dashed $color-gray-20;
margin-top: 16px;
.icon {
svg {
fill: $color-gray-40;
width: 32px;
height: 32px;
}
}
.label {
color: $color-gray-40;
font-size: $fs14;
}
}
}