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

♻️ Remove refer css from files

Browse source
This commit is contained in:
Eva 2024-01-02 11:15:02 +01:00 • committed by Alonso Torres
parent dc4bf82684
commit 0a123a3917
8 changed files with 401 additions and 600 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/ui/components/search_bar.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.search-bar
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.icons :as i]
[app.util.dom :as dom]
@ -45,16 +45,16 @@
node (dom/get-target event)]
(when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))]
[:span {:class (dom/classnames (css :search-box) true
(css :has-children) (some? children))}
[:span {:class (stl/css-case :search-box true
:has-children (some? children))}
children
[:div {:class (dom/classnames (css :search-input-wrapper) true)}
[:div {:class (stl/css :search-input-wrapper)}
icon
[:input {:on-change handle-change
:value value
:placeholder placeholder
:on-key-down handle-key-down}]
(when (not= "" value)
[:button {:class (dom/classnames (css :clear) true)
[:button {:class (stl/css :clear)
:on-click handle-clear}
i/delete-text-refactor])]]))

93
frontend/src/app/main/ui/components/search_bar.scss
View file

@ -13,55 +13,56 @@
width: 100%;
border-radius: $br-8;
background-color: var(--search-bar-background-color);
}
.search-input-wrapper {
@include flexCenter;
height: $s-32;
.search-input-wrapper {
@include flexCenter;
height: $s-32;
width: 100%;
border: $s-1 solid var(--search-bar-input-border-color);
border-radius: $br-8;
background-color: var(--search-bar-input-background-color);
input {
width: 100%;
border: $s-1 solid var(--search-bar-input-border-color);
border-radius: $br-8;
background-color: var(--search-bar-input-background-color);
input {
width: 100%;
height: 100%;
margin: 0 $s-8 0 $s-4;
border: 0;
background-color: var(--input-background-color);
font-size: $fs-12;
color: var(--input-foreground-color);
&:focus {
outline: none;
}
}
&:hover {
border: $s-1 solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
input {
background-color: var(--input-background-color-hover);
}
}
&:focus-within {
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
border: $s-1 solid var(--input-border-color-focus);
input {
background-color: var(--input-background-color-active);
}
}
.clear {
@extend .button-tag;
border-radius: $br-8;
height: 100%;
svg {
@extend .button-icon-small;
color: transparent;
stroke: var(--icon-foreground);
}
height: 100%;
margin: 0 $s-8 0 $s-4;
border: 0;
background-color: var(--input-background-color);
font-size: $fs-12;
color: var(--input-foreground-color);
&:focus {
outline: none;
}
}
&.has-children .search-input-wrapper {
border-radius: $br-2 $br-8 $br-8 $br-2;
margin-left: 0;
&:hover {
border: $s-1 solid var(--input-background-color-hover);
background-color: var(--input-background-color-hover);
input {
background-color: var(--input-background-color-hover);
}
}
&:focus-within {
background-color: var(--input-background-color-active);
color: var(--input-foreground-color-active);
border: $s-1 solid var(--input-border-color-focus);
input {
background-color: var(--input-background-color-active);
}
}
}
.clear {
@extend .button-tag;
border-radius: $br-8;
height: 100%;
svg {
@extend .button-icon-small;
color: transparent;
stroke: var(--icon-foreground);
}
}
.search-box.has-children .search-input-wrapper {
border-radius: $br-2 $br-8 $br-8 $br-2;
margin-left: 0;
}