mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Update CSS guidelines + Prefer rem

Browse Source
This commit is contained in:
venashial
2022-06-07 14:00:53 -07:00
parent c9ec9f14de
commit eb171ecb21
52 changed files with 768 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/package/components/Avatar.svelte
View File

@@ -68,7 +68,7 @@
&--size {
&-xs {
--size: 2.25rem;
--size: 2.5rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
}

6
src/package/components/Badge.svelte
View File

@@ -13,8 +13,8 @@
font-weight: var(--font-weight-bold);
display: inline;
position: relative;
padding-left: 0.9rem;
line-height: 1rem;
padding-left: 1rem;
line-height: 1em;
&--color-green {
color: var(--color-badge-green-text);
@@ -40,7 +40,7 @@
content: '';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: var(--color-dot);
position: absolute;

20
src/package/components/Button.svelte
View File

@@ -61,11 +61,14 @@
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.25rem 1rem;
grid-gap: 14px;
justify-content: center;
padding: 0.5rem 1rem;
min-width: 2rem;
gap: 0.5rem;
cursor: pointer;
position: relative;
white-space: nowrap;
line-height: 100%;
color: var(--color-bg-contrast);
@@ -73,15 +76,21 @@
background-color: var(--color-button-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out;
transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out;
&:hover {
filter: brightness(0.85);
}
&:active {
transform: scale(0.95);
filter: brightness(0.8);
}
&--color {
&-raised {
background-color: var(--color-raised-bg);
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
}
&-primary {
@@ -146,10 +155,5 @@
top: 0.5rem;
right: 0.5rem;
}
/* Only child doesn't work as intended because text is passed through as `innerText` */
:global(.icon:only-child) {
margin: 4px -7px;
}
}
</style>

8
src/package/components/Checkbox.svelte
View File

@@ -25,16 +25,16 @@
display: inline-flex;
align-items: center;
grid-gap: 0.5rem;
gap: 0.5rem;
&__label {
display: flex;
align-items: center;
gap: 8px;
gap: 0.5rem;
> :global(.icon) {
width: 1.1rem;
margin-right: -0.1rem;
width: 1var (--unit-3);
margin-right: -0var (--unit-3);
}
&__box {

2
src/package/components/CheckboxList.svelte
View File

@@ -40,7 +40,7 @@
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
gap: 2rem;
}
}
</style>

2
src/package/components/Chips.svelte
View File

@@ -40,6 +40,6 @@
<style lang="postcss">
.chips {
display: flex;
grid-gap: 0.5rem;
gap: 0.5rem;
}
</style>

2
src/package/components/FormField.svelte
View File

@@ -18,6 +18,6 @@
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0.5rem;
}
</style>

7
src/package/components/NavRow.svelte
View File

@@ -7,6 +7,7 @@
}
export let links: Link[]
/** Query param name to use (to not use queries, leave this prop blank) */
export let query = ''
export let resetScroll = false
@@ -52,7 +53,7 @@
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
gap: 1rem;
flex-wrap: wrap;
&__link {
@@ -67,10 +68,10 @@
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
bottom: -0var (--unit-3);
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
height: 0.25rem;
background-color: var(--color-brand);
}
}

15
src/package/components/Pagination.svelte
View File

@@ -54,17 +54,24 @@
.pagination {
align-self: center;
display: flex;
grid-gap: 0.5rem;
gap: 0.5rem;
align-items: center;
:global(.button) {
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
}
:global(.icon) {
width: 1rem;
aspect-ratio: 1 / 1;
}
:global(&__dash) {
margin: 0 0.5rem;
width: 1rem;
height: 1rem;
}
@media (width <= 500px) {
grid-gap: 0.25rem;
gap: 0.25rem;
:global(> *:nth-child(4)),
:global(> *:nth-child(6)) {

79
src/package/components/Select.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import IconChevronDown from 'virtual:icons/lucide/chevron-down'
import IconCheck from 'virtual:icons/heroicons-outline/check'
import { debounce } from 'throttle-debounce'
import { clickOutside } from 'svelte-use-click-outside'
import { onMount } from 'svelte'
@@ -11,13 +12,21 @@
export let options: Option[] = []
export let value: string | number
export let selected: Option = options.find((option) => option.value === (value || ''))
export let selected: Option
export let color = ''
export let label = ''
export let icon = null
let open = false
$: if (options) {
setSelected()
}
function setSelected() {
selected = options.find((option) => option.value === (value || ''))
}
$: if (selected) {
value = selected.value
}
@@ -88,14 +97,14 @@
<div
class="select select--color-{color}"
class:is-open={open}
class:select--opens-up={shouldOpenUp}
class:select--opens-up={false}
use:clickOutside={() => {
open = false
}}
bind:this={element}
tabindex="0"
on:keydown={keydown}>
on:keydown={keydown}
on:click>
<div
class="select__input"
on:click={() => {
@@ -104,18 +113,17 @@
{#if icon}
<svelte:component this={icon} />
{/if}
<span class="select__input__value" style:min-width="{minWidth}px"
>{label || selected?.label || value || 'Choose...'}</span>
{#if !icon}
<div class="select__input__arrow">
<slot name="expandIcon">
<IconChevronDown />
</slot>
</div>
{/if}
<span class="select__input__value" style:min-width="{minWidth + 16 + 8}px">
{label || selected?.label || value || 'Choose...'}
</span>
<div class="select__input__arrow">
<slot name="expandIcon">
<IconChevronDown />
</slot>
</div>
</div>
{#if open}
<ul class="select__options">
<ul class="select__options" style:--selected-index={options.indexOf(selected)}>
{#each options as option (option.value)}
<li
on:click={() => {
@@ -124,6 +132,9 @@
}}
class:is-selected={selected?.value === option.value}>
{option.label || option.value}
{#if selected?.value === option.value}
<IconCheck />
{/if}
</li>
{/each}
</ul>
@@ -145,8 +156,8 @@
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0.9rem;
grid-gap: 0.4rem;
padding: 0.25rem 1rem;
gap: 0.5rem;
background-color: var(--color-button-bg);
box-shadow: var(--shadow-inset-sm);
border-radius: var(--rounded);
@@ -160,38 +171,32 @@
padding: 0;
margin: 0;
position: absolute;
top: 100%;
top: calc(100% * -1 * var(--selected-index));
background-color: var(--color-button-bg);
border-radius: var(--rounded-bottom);
border-radius: var(--rounded);
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
border: var(--border-width) solid var(--color-tertiary);
overflow: hidden;
border-top: 0.1rem solid var(--color-divider);
z-index: 5;
li {
padding: 0.25rem 1rem;
&:hover {
background-color: var(--color-button-bg-hover);
background-color: var(--color-brand-dark);
color: var(--color-brand-dark-contrast);
}
&.is-selected {
background-color: var(--color-brand-dark);
color: var(--color-brand-contrast);
background-color: var(--color-brand-light);
color: var(--color-text);
cursor: default;
}
}
}
display: flex;
align-items: center;
gap: 0.5rem;
&.is-open {
z-index: 10;
.select__input {
border-radius: var(--rounded-top);
box-shadow: none;
&__arrow {
transform: rotate(180deg);
:global(.icon) {
}
}
}
}
@@ -209,11 +214,7 @@
border-radius: var(--rounded-top);
box-shadow: none;
border-top: none;
border-bottom: 0.1rem solid var(--color-divider);
}
&.is-open .select__input {
border-radius: var(--rounded-bottom);
border-bottom: var(--border-width) solid var(--color-divider);
}
}
}

4
src/package/components/Slider.svelte
View File

@@ -15,7 +15,7 @@
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
gap: 0.5rem;
.slider-input {
-webkit-appearance: none;
@@ -35,7 +35,7 @@
-webkit-appearance: none;
appearance: none;
width: 0.5rem;
height: 1.25rem;
height: 0.5rem;
border-radius: var(--rounded-sm);
background-color: var(--color-brand);

27
src/package/components/TextInput.svelte
View File

@@ -6,9 +6,10 @@
export let value = ''
export let multiline = false
export let id: string = undefined
export let fill = false
</script>
<div class="text-input">
<div class="text-input" class:fill>
{#if multiline}
<textarea name={id} {placeholder} bind:value />
{:else}
@@ -23,18 +24,28 @@
.text-input {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0.5rem;
position: relative;
width: 20rem;
&.fill {
width: 100%;
flex: 1;
}
input,
textarea {
border-radius: var(--rounded-sm);
border-radius: var(--rounded);
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
border: none;
padding: 6px 14px;
width: 20rem;
padding: 0.25rem 1rem;
width: 100%;
max-width: 100%;
&.has-icon {
padding-left: 2.5rem;
}
}
textarea {
@@ -45,12 +56,8 @@
position: absolute;
display: flex;
height: 100%;
left: 14px;
left: 1rem;
opacity: 0.75;
}
input.has-icon {
padding-left: 40px;
}
}
</style>