mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 16:00:19 -05:00
♻️ Update dashboard hero and template icons
This commit is contained in:
Eva Marco
Andrey Antukh
parent
ef99ad349b
commit
92425fcbaf
6 changed files with 301 additions and 300 deletions
|
|
@ -24,6 +24,9 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private menu-icon
|
||||
(i/icon-xref :menu-refactor (stl/css :menu-icon)))
|
||||
|
||||
(mf/defc header
|
||||
[{:keys [project create-fn] :as props}]
|
||||
(let [local (mf/use-state
|
||||
|
|
@ -92,14 +95,13 @@
|
|||
:on-import on-import}]
|
||||
|
||||
[:div {:class (stl/css :dashboard-header-actions)}
|
||||
[:a
|
||||
{:class (stl/css :btn-secondary :btn-small :new-file)
|
||||
:tab-index "0"
|
||||
:on-click on-create-click
|
||||
:data-test "new-file"
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-create-click event)))}
|
||||
[:a {:class (stl/css :btn-secondary :btn-small :new-file)
|
||||
:tab-index "0"
|
||||
:on-click on-create-click
|
||||
:data-test "new-file"
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-create-click event)))}
|
||||
(tr "dashboard.new-file")]
|
||||
|
||||
(when-not (:is-default project)
|
||||
|
|
@ -109,15 +111,14 @@
|
|||
:on-click toggle-pin
|
||||
:on-key-down (fn [event] (when (kbd/enter? event) (toggle-pin event)))}])
|
||||
|
||||
[:div
|
||||
{:class (stl/css :icon :tooltip :tooltip-bottom-left)
|
||||
:tab-index "0"
|
||||
:on-click on-menu-click
|
||||
:alt (tr "dashboard.options")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-menu-click event)))}
|
||||
i/actions]]]))
|
||||
[:div {:class (stl/css :icon)
|
||||
:tab-index "0"
|
||||
:on-click on-menu-click
|
||||
:title (tr "dashboard.options")
|
||||
:on-key-down (fn [event]
|
||||
(when (kbd/enter? event)
|
||||
(on-menu-click event)))}
|
||||
menu-icon]]]))
|
||||
|
||||
(mf/defc files-section
|
||||
[{:keys [project team] :as props}]
|
||||
|
|
|
|||
|
|
@ -30,3 +30,8 @@
|
|||
.new-file {
|
||||
margin-inline-end: $s-8;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,9 @@
|
|||
(def ^:private show-more-icon
|
||||
(i/icon-xref :arrow-refactor (stl/css :show-more-icon)))
|
||||
|
||||
(def ^:private close-icon
|
||||
(i/icon-xref :close-refactor (stl/css :close-icon)))
|
||||
|
||||
(mf/defc header
|
||||
{::mf/wrap [mf/memo]}
|
||||
[]
|
||||
|
|
@ -44,10 +47,9 @@
|
|||
[:header {:class (stl/css :dashboard-header)}
|
||||
[:div#dashboard-projects-title {:class (stl/css :dashboard-title)}
|
||||
[:h1 (tr "dashboard.projects-title")]]
|
||||
[:button
|
||||
{:class (stl/css :btn-secondary :btn-small)
|
||||
:on-click on-click
|
||||
:data-test "new-project-button"}
|
||||
[:button {:class (stl/css :btn-secondary :btn-small)
|
||||
:on-click on-click
|
||||
:data-test "new-project-button"}
|
||||
(tr "dashboard.new-project")]]))
|
||||
|
||||
(mf/defc team-hero
|
||||
|
|
@ -84,11 +86,10 @@
|
|||
:on-click on-invite-click}
|
||||
(tr "onboarding.choice.team-up.invite-members")]]
|
||||
|
||||
[:button
|
||||
{:class (stl/css :close)
|
||||
:on-click on-close-click
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span i/close]]]))
|
||||
[:button {:class (stl/css :close)
|
||||
:on-click on-close-click
|
||||
:aria-label (tr "labels.close")}
|
||||
close-icon]]))
|
||||
|
||||
(def builtin-templates
|
||||
(l/derived :builtin-templates st/state))
|
||||
|
|
@ -139,11 +140,10 @@
|
|||
:importing [:span.loader i/loader-pencil]
|
||||
:success "")]]
|
||||
|
||||
[:button
|
||||
{:class (stl/css :close)
|
||||
:on-click close-tutorial
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span {:class (stl/css :icon)} i/close]]]))
|
||||
[:button {:class (stl/css :close)
|
||||
:on-click close-tutorial
|
||||
:aria-label (tr "labels.close")}
|
||||
close-icon]]))
|
||||
|
||||
(mf/defc interface-walkthrough
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
@ -163,11 +163,10 @@
|
|||
:target "_blank"
|
||||
:on-click handle-walkthrough-link}
|
||||
(tr "dasboard.walkthrough-hero.start")]]
|
||||
[:button
|
||||
{:class (stl/css :close)
|
||||
:on-click close-walkthrough
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span {:class (stl/css :icon)} i/close]]]))
|
||||
[:button {:class (stl/css :close)
|
||||
:on-click close-walkthrough
|
||||
:aria-label (tr "labels.close")}
|
||||
close-icon]]))
|
||||
|
||||
(mf/defc project-item
|
||||
[{:keys [project first? team files] :as props}]
|
||||
|
|
@ -310,13 +309,12 @@
|
|||
(when-not (:is-default project)
|
||||
[:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
|
||||
|
||||
[:button
|
||||
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
|
||||
:on-click on-create-click
|
||||
:alt (tr "dashboard.new-file")
|
||||
:aria-label (tr "dashboard.new-file")
|
||||
:data-test "project-new-file"
|
||||
:on-key-down handle-create-click}
|
||||
[:button {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
|
||||
:on-click on-create-click
|
||||
:alt (tr "dashboard.new-file")
|
||||
:aria-label (tr "dashboard.new-file")
|
||||
:data-test "project-new-file"
|
||||
:on-key-down handle-create-click}
|
||||
i/add-refactor]
|
||||
|
||||
[:button
|
||||
|
|
|
|||
|
|
@ -141,6 +141,7 @@
|
|||
stroke: currentColor;
|
||||
}
|
||||
|
||||
// Team hero
|
||||
.team-hero {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
|
|
@ -150,60 +151,6 @@
|
|||
padding: $s-8;
|
||||
position: relative;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
padding: $s-20 $s-20;
|
||||
}
|
||||
.title {
|
||||
font-size: $fs-24;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
font-size: $fs-16;
|
||||
span {
|
||||
color: $df-secondary;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
color: $da-primary;
|
||||
}
|
||||
padding: $s-8 0;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: $s-20;
|
||||
right: $s-20;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
}
|
||||
}
|
||||
.invite {
|
||||
height: $s-32;
|
||||
width: $s-180;
|
||||
}
|
||||
.img-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $s-200;
|
||||
height: $s-200;
|
||||
overflow: hidden;
|
||||
border-radius: $br-4;
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
height: $s-200;
|
||||
|
|
@ -214,8 +161,70 @@
|
|||
width: 0;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
padding: $s-20 $s-20;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $fs-24;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
font-size: $fs-16;
|
||||
span {
|
||||
color: $df-secondary;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
color: $da-primary;
|
||||
}
|
||||
padding: $s-8 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
--close-icon-foreground-color: var(--icon-foreground);
|
||||
position: absolute;
|
||||
top: $s-20;
|
||||
right: $s-24;
|
||||
width: $s-24;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
--close-icon-foreground-color: var(--button-icon-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--close-icon-foreground-color);
|
||||
}
|
||||
|
||||
.invite {
|
||||
height: $s-32;
|
||||
width: $s-180;
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $s-200;
|
||||
height: $s-200;
|
||||
overflow: hidden;
|
||||
border-radius: $br-4;
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -279,30 +288,6 @@
|
|||
width: $s-180;
|
||||
height: $s-40;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $s-24;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: $s-20;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.icon {
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
transform: rotate(45deg);
|
||||
&:hover {
|
||||
fill: $da-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.walkthrough {
|
||||
.thumbnail {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,12 @@
|
|||
[potok.v2.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private arrow-icon
|
||||
(i/icon-xref :arrow-refactor (stl/css :arrow-icon)))
|
||||
|
||||
(def ^:private download-icon
|
||||
(i/icon-xref :download-refactor (stl/css :download-icon)))
|
||||
|
||||
(def builtin-templates
|
||||
(l/derived :builtin-templates st/state))
|
||||
|
||||
|
|
@ -76,10 +82,16 @@
|
|||
|
||||
[:div {:class (stl/css :title)}
|
||||
[:button {:tab-index "0"
|
||||
:class (stl/css :title-btn)
|
||||
:on-click on-click
|
||||
:on-key-down on-key-down}
|
||||
[:span (tr "dashboard.libraries-and-templates")]
|
||||
[:span {:class (stl/css :icon)} (if ^boolean collapsed i/arrow-up i/arrow-down)]]]))
|
||||
[:span {:class (stl/css :title-text)}
|
||||
(tr "dashboard.libraries-and-templates")]
|
||||
(if ^boolean collapsed
|
||||
[:span {:class (stl/css :title-icon :title-icon-collapsed)}
|
||||
arrow-icon]
|
||||
[:span {:class (stl/css :title-icon)}
|
||||
arrow-icon])]]))
|
||||
|
||||
(mf/defc card-item
|
||||
{::mf/wrap-props false}
|
||||
|
|
@ -112,8 +124,8 @@
|
|||
[:img {:src (dm/str thb)
|
||||
:alt (:name item)}]]
|
||||
[:div {:class (stl/css :card-name)}
|
||||
[:span (:name item)]
|
||||
[:span {:class (stl/css :icon)} i/download-refactor]]]]))
|
||||
[:span {:class (stl/css :card-text)} (:name item)]
|
||||
download-icon]]]))
|
||||
|
||||
(mf/defc card-item-link
|
||||
{::mf/wrap-props false}
|
||||
|
|
@ -260,18 +272,16 @@
|
|||
:total total}]]
|
||||
|
||||
(when (< card-offset 0)
|
||||
[:button
|
||||
{:class (stl/css :button :left)
|
||||
:tab-index (if ^boolean collapsed "-1" "0")
|
||||
:on-click on-move-left
|
||||
:on-key-down on-move-left-key-down}
|
||||
i/go-prev])
|
||||
[:button {:class (stl/css :move-button :move-left)
|
||||
:tab-index (if ^boolean collapsed "-1" "0")
|
||||
:on-click on-move-left
|
||||
:on-key-down on-move-left-key-down}
|
||||
arrow-icon])
|
||||
|
||||
(when more-cards
|
||||
[:button
|
||||
{:class (stl/css :button :right)
|
||||
:tab-index (if collapsed "-1" "0")
|
||||
:on-click on-move-right
|
||||
:aria-label (tr "labels.next")
|
||||
:on-key-down on-move-right-key-down}
|
||||
i/go-next])]))
|
||||
[:button {:class (stl/css :move-button :move-right)
|
||||
:tab-index (if collapsed "-1" "0")
|
||||
:on-click on-move-right
|
||||
:aria-label (tr "labels.next")
|
||||
:on-key-down on-move-right-key-down}
|
||||
arrow-icon])]))
|
||||
|
|
|
|||
|
|
@ -20,173 +20,175 @@
|
|||
bottom: calc(-1 * $s-228);
|
||||
transition: bottom 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
pointer-events: all;
|
||||
width: fit-content;
|
||||
top: calc(-1 * $s-56);
|
||||
text-align: right;
|
||||
height: $s-56;
|
||||
position: absolute;
|
||||
right: calc(-1 * $s-24);
|
||||
.title {
|
||||
pointer-events: all;
|
||||
width: fit-content;
|
||||
top: calc(-1 * $s-56);
|
||||
text-align: right;
|
||||
height: $s-56;
|
||||
position: absolute;
|
||||
right: calc(-1 * $s-24);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: $s-56;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: $br-10;
|
||||
border-top-right-radius: $br-10;
|
||||
margin-right: $s-32;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $db-quaternary;
|
||||
.title-btn {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: $s-56;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-top-left-radius: $br-10;
|
||||
border-top-right-radius: $br-10;
|
||||
margin-right: $s-32;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2;
|
||||
font-size: $fs-16;
|
||||
margin-left: $s-16;
|
||||
margin-right: $s-8;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
&.icon {
|
||||
margin-left: $s-16;
|
||||
margin-right: $s-16;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
fill: $df-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2;
|
||||
font-size: $fs-16;
|
||||
margin-left: $s-16;
|
||||
margin-right: $s-8;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
top: $s-136;
|
||||
border: $s-2 solid $df-secondary;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: $s-36;
|
||||
height: $s-36;
|
||||
cursor: pointer;
|
||||
background-color: $df-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: all;
|
||||
svg {
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
fill: $df-secondary;
|
||||
}
|
||||
.title-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: $s-16;
|
||||
margin-right: $s-8;
|
||||
color: $df-primary;
|
||||
margin-left: $s-16;
|
||||
margin-right: $s-16;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
margin-left: $s-44;
|
||||
}
|
||||
.title-icon-collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
margin-right: $s-44;
|
||||
}
|
||||
.arrow-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $s-2 solid $da-tertiary;
|
||||
}
|
||||
}
|
||||
.move-button {
|
||||
position: absolute;
|
||||
top: $s-136;
|
||||
border: $s-2 solid $df-secondary;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
width: $s-36;
|
||||
height: $s-36;
|
||||
cursor: pointer;
|
||||
background-color: $df-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: all;
|
||||
|
||||
.content {
|
||||
pointer-events: all;
|
||||
width: 200%;
|
||||
height: $s-228;
|
||||
margin-left: $s-6;
|
||||
position: absolute;
|
||||
border-top-left-radius: $s-8;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
.card-container {
|
||||
width: $s-276;
|
||||
margin-top: $s-20;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
display: inline-block;
|
||||
width: $s-256;
|
||||
font-size: $fs-16;
|
||||
cursor: pointer;
|
||||
color: $df-primary;
|
||||
padding: $s-3 $s-6 $s-16 $s-6;
|
||||
border-radius: $br-8;
|
||||
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: $s-136;
|
||||
margin-bottom: $s-16;
|
||||
border-radius: $br-5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
}
|
||||
}
|
||||
|
||||
.card-name {
|
||||
padding: 0 $s-6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $s-24;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
}
|
||||
svg {
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
span {
|
||||
font-weight: $fw500;
|
||||
font-size: $fs-16;
|
||||
}
|
||||
}
|
||||
|
||||
.template-link {
|
||||
border: $s-2 solid transparent;
|
||||
margin: $s-32;
|
||||
padding: $s-32 0;
|
||||
}
|
||||
|
||||
.template-link-title {
|
||||
font-size: $fs-14;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.template-link-text {
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-8;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-tertiary;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: $s-2 solid $da-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.move-left {
|
||||
left: 0;
|
||||
margin-left: $s-44;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.move-right {
|
||||
right: 0;
|
||||
margin-right: $s-44;
|
||||
}
|
||||
|
||||
.content {
|
||||
pointer-events: all;
|
||||
width: 200%;
|
||||
height: $s-228;
|
||||
margin-left: $s-6;
|
||||
position: absolute;
|
||||
border-top-left-radius: $s-8;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: $s-276;
|
||||
margin-top: $s-20;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
display: inline-block;
|
||||
width: $s-256;
|
||||
font-size: $fs-16;
|
||||
cursor: pointer;
|
||||
color: $df-primary;
|
||||
padding: $s-3 $s-6 $s-16 $s-6;
|
||||
border-radius: $br-8;
|
||||
|
||||
&:hover {
|
||||
background-color: $db-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.img-container {
|
||||
width: 100%;
|
||||
height: $s-136;
|
||||
margin-bottom: $s-16;
|
||||
border-radius: $br-5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
border-radius: $br-4;
|
||||
}
|
||||
}
|
||||
|
||||
.card-name {
|
||||
padding: 0 $s-6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $s-24;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-weight: $fw500;
|
||||
font-size: $fs-16;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.template-link {
|
||||
border: $s-2 solid transparent;
|
||||
margin: $s-32;
|
||||
padding: $s-32 0;
|
||||
}
|
||||
|
||||
.template-link-title {
|
||||
font-size: $fs-14;
|
||||
color: $df-primary;
|
||||
font-weight: $fw400;
|
||||
}
|
||||
|
||||
.template-link-text {
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-8;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue