Skip to content

Commit

Permalink
chore: use css nesting (#223)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ignatiusmb
ignatiusmb authored Jul 26, 2024
1 parent 2fba75f commit 1506614
Show file tree
Hide file tree
Showing 12 changed files with 236 additions and 200 deletions.
80 changes: 40 additions & 40 deletions workspace/extension/src/lib/components/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,58 +26,58 @@
border-radius: 0.2rem;
outline: none;
background-color: transparent;
background: transparent;
color: rgb(12, 12, 13);
line-height: 0;
}
button.active {
color: rgb(0, 96, 223);
}
button:hover {
background: rgb(237, 237, 240);
}
button:active:hover {
color: inherit;
}
&:active {
color: rgba(12, 12, 13, 0.8);
}
button:active {
color: rgba(12, 12, 13, 0.8);
}
&:hover {
background: rgb(237, 237, 240);
button:disabled {
color: rgba(12, 12, 13, 0.2);
}
&:active {
color: inherit;
}
}
:global(.dark) button {
color: rgba(249, 249, 250, 0.7);
}
&:disabled {
cursor: default;
background: transparent;
color: rgba(12, 12, 13, 0.2);
}
:global(.dark) button.active {
color: rgb(117, 186, 255);
}
&.active {
color: rgb(0, 96, 223);
}
:global(.dark) button:hover {
background-color: rgb(37, 37, 38);
& :global(svg) {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
}
:global(.dark) button:active {
color: rgba(249, 249, 250, 0.8);
}
:global(.dark) button {
color: rgba(249, 249, 250, 0.7);
:global(.dark) button:disabled {
color: rgba(249, 249, 250, 0.2);
}
&:active {
color: rgba(249, 249, 250, 0.8);
}
:global(.dark) button:disabled,
button:disabled {
background-color: transparent;
cursor: default;
}
&:hover {
background-color: rgb(37, 37, 38);
}
&:disabled {
cursor: default;
background: transparent;
color: rgba(249, 249, 250, 0.2);
}
button :global(svg) {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
&.active {
color: rgb(117, 186, 255);
}
}
</style>
90 changes: 50 additions & 40 deletions workspace/extension/src/lib/components/Resizable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,54 +30,64 @@
position: relative;
display: grid;
color: rgb(57, 63, 76);
}
aside.x {
grid-template-columns: auto 1fr;
}
aside.y {
grid-template-rows: auto 1fr;
&.x {
grid-template-columns: auto 1fr;
}
&.y {
grid-template-rows: auto 1fr;
}
}
.resize {
top: 0;
left: 0;
width: 0.25rem;
background: rgb(224, 224, 226);
}
.resize:hover {
background: rgb(177, 177, 179);
}
.resize.x {
cursor: ew-resize;
bottom: 0;
width: 0.2rem;
}
.resize.y {
cursor: ns-resize;
right: 0;
height: 0.2rem;
}
.resize + div {
display: grid;
gap: 0.625rem;
align-content: flex-start;
padding-top: 1rem;
}
.resize.x + div {
overflow-x: hidden;
}
.resize.y + div {
overflow-y: hidden;
}
:global(.dark) aside {
background: rgb(36, 36, 36);
color: rgb(177, 177, 179);
}
:global(.dark) .resize {
background: rgb(60, 60, 61);
&:hover {
background: rgb(177, 177, 179);
}
&.x {
cursor: ew-resize;
bottom: 0;
width: 0.2rem;
& + div {
overflow-x: hidden;
}
}
&.y {
cursor: ns-resize;
right: 0;
height: 0.2rem;
& + div {
overflow-y: hidden;
}
}
& + div {
display: grid;
gap: 0.625rem;
align-content: flex-start;
padding-top: 1rem;
}
}
:global(.dark) .resize:hover {
background: rgb(107, 107, 108);
:global(.dark) {
aside {
background: rgb(36, 36, 36);
color: rgb(177, 177, 179);
}
.resize {
background: rgb(60, 60, 61);
&:hover {
background: rgb(107, 107, 108);
}
}
}
</style>
7 changes: 4 additions & 3 deletions workspace/extension/src/lib/nodes/Ellipsis.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
background: var(--background);
color: var(--color);
font-size: 0.5rem;
}
button:hover {
background: rgba(255, 255, 255, 0.1);
&:hover {
background: rgba(255, 255, 255, 0.1);
}
}
</style>
82 changes: 45 additions & 37 deletions workspace/extension/src/lib/nodes/Node.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,48 +93,56 @@
align-items: center;
line-height: 1.5;
font-size: 0.75rem;
}
ul {
width: 100%;
position: relative;
}
li :global(div) {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-left: calc(var(--indent) + 6px);
}
li[data-hovered] > :global(div) {
background: #f0f9fe;
}
li[data-current] > ul::before {
content: '';
z-index: 1;
width: 0.125rem;
position: absolute;
top: 0.2rem;
bottom: 0.15rem;
left: calc(var(--indent) - 0.75rem);
background: #e0e0e2;
}
ul {
width: 100%;
position: relative;
}
li[data-current] > :global(div:first-child),
li[data-current][data-hovered] > :global(div) {
background: rgba(0, 116, 232, 0.2);
}
li[data-current] > :global(div:first-child:after) {
content: '== $n';
margin-left: 0.5rem;
}
&[data-hovered] > :global(div) {
background: #f0f9fe;
}
&[data-current] {
& > ul::before {
content: '';
z-index: 1;
width: 0.125rem;
position: absolute;
top: 0.2rem;
bottom: 0.15rem;
left: calc(var(--indent) - 0.75rem);
background: #e0e0e2;
}
& > :global(div:first-child),
&[data-hovered] > :global(div) {
background: rgb(0, 116, 232);
}
& > :global(div:first-child:after) {
content: '== $n';
margin-left: 0.5rem;
}
}
:global(.dark) li[data-hovered] > :global(div) {
background: rgb(53, 59, 72);
& :global(div) {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-left: calc(var(--indent) + 6px);
}
}
:global(.dark) li[data-current] > :global(div:first-child),
:global(.dark) li[data-current][data-hovered] > :global(div) {
background: rgb(32, 78, 138);
:global(.dark) {
li[data-hovered] > :global(div) {
background: rgb(53, 59, 72);
}
li[data-current] > :global(div:first-child),
li[data-current][data-hovered] > :global(div) {
background: rgb(32, 78, 138);
}
}
/* flash animation for updates */
Expand Down
36 changes: 19 additions & 17 deletions workspace/extension/src/lib/panel/Editable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,32 +72,34 @@
{/if}

<style>
span,
input {
flex-grow: 1;
}
input {
padding: 0.15rem 0.375rem;
border: none;
border-radius: inherit;
font-size: inherit;
}
span:not(.readonly) {
cursor: pointer;
}
span.string {
color: rgb(221, 0, 169);
}
span.number {
color: rgb(5, 139, 0);
}
span.null {
color: rgb(115, 115, 115);
span {
flex-grow: 1;
&:not(.readonly) {
cursor: pointer;
}
&.string {
color: rgb(221, 0, 169);
}
&.number {
color: rgb(5, 139, 0);
}
&.null {
color: rgb(115, 115, 115);
}
}
:global(.dark) span.string {
color: rgb(255, 125, 233);
:global(.dark) {
span.string {
color: rgb(255, 125, 233);
}
}
</style>
23 changes: 13 additions & 10 deletions workspace/extension/src/lib/panel/PropertyList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,13 @@
align-items: center;
padding: 0.25rem;
border-radius: 0.25rem;
}
li[data-tooltip] {
background: rgba(179, 0, 0, 0.8);
}
li:hover {
background: rgba(135, 135, 137, 0.075);
&:hover {
background: rgba(135, 135, 137, 0.075);
}
&[data-tooltip] {
background: rgba(179, 0, 0, 0.8);
}
}
.function,
Expand All @@ -129,9 +130,11 @@
color: rgb(0, 116, 232);
}
:global(.dark) .function,
:global(.dark) .symbol,
:global(.dark) .object {
color: rgb(117, 191, 255);
:global(.dark) {
.function,
.symbol,
.object {
color: rgb(117, 191, 255);
}
}
</style>
Loading

0 comments on commit 1506614

Please sign in to comment.