Skip to content

Commit

Permalink
fix(input): clean up styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@dvcol
dvcol committed Dec 16, 2024
1 parent 005ad27 commit b1ba008
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 180 deletions.
28 changes: 14 additions & 14 deletions src/lib/cards/NeoCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,15 +248,15 @@
@use 'src/lib/styles/mixin' as mixin;
.neo-card {
--neo-card-full-spacing: var(--neo-card-spacing, 1.5rem);
--neo-card-half-spacing: calc(var(--neo-card-spacing, 1.5rem) / 2);
$full-spacing: var(--neo-card-spacing, 1.5rem);
$half-spacing: calc(var(--neo-card-spacing, 1.5rem) / 2);
display: flex;
flex-direction: column;
box-sizing: border-box;
width: fit-content;
margin: var(--neo-card-margin, var(--neo-shadow-margin, 0.625rem));
padding: var(--neo-card-full-spacing);
padding: $full-spacing;
color: var(--neo-card-text-color, inherit);
background-color: var(--neo-card-bg-color, transparent);
border: var(--neo-card-border-width, var(--neo-border-width, 1px)) var(--neo-card-border-color, transparent) solid;
Expand Down Expand Up @@ -307,29 +307,29 @@
}
.neo-card-divider {
margin: 0.5rem calc(var(--neo-card-full-spacing) - 0.25rem);
margin: 0.5rem calc(#{$full-spacing} - 0.25rem);
}
.neo-card-segment {
transition: border-radius 0.3s ease;
&:not(.neo-card-media) {
padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing);
padding: $half-spacing $full-spacing;
&:first-child {
padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
padding: $full-spacing $full-spacing $half-spacing;
border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
}
&:last-child {
padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
padding: $half-spacing $full-spacing $full-spacing;
border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius));
}
}
}
.neo-card-media {
margin: var(--neo-card-full-spacing);
margin: $full-spacing;
overflow: hidden;
border-radius: var(--neo-card-border-radius, var(--neo-border-radius));
scrollbar-gutter: auto;
Expand All @@ -338,7 +338,7 @@
padding: 0;
&:not(:only-child) {
margin: 0 0 var(--neo-card-full-spacing);
margin: 0 0 $full-spacing;
border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
}
Expand Down Expand Up @@ -389,7 +389,7 @@
&.neo-segmented {
.neo-card-segment:not(.neo-card-media) {
padding: var(--neo-card-full-spacing);
padding: $full-spacing;
}
.neo-card-segment:not(.neo-card-media, :last-child) {
Expand Down Expand Up @@ -432,20 +432,20 @@
}
.neo-card-media.neo-cover:not(.neo-inset, :only-child) {
margin: 0 var(--neo-card-full-spacing) 0 0;
margin: 0 $full-spacing 0 0;
border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
}
.neo-card-segment:not(.neo-card-media) {
padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing);
padding: $full-spacing $half-spacing;
&:first-child {
padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
padding: $full-spacing $half-spacing $full-spacing $full-spacing;
border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
}
&:last-child {
padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
padding: $full-spacing $full-spacing $full-spacing $half-spacing;
border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0;
}
}
Expand Down
165 changes: 83 additions & 82 deletions src/lib/inputs/NeoCheckbox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,103 +179,104 @@
<style lang="scss">
@use 'src/lib/styles/mixin' as mixin;
.neo-checkbox-container {
--neo-label-margin: 0 0 0 0.75rem;
--neo-label-padding: 0;
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0;
padding: calc(0.375rem + var(--neo-checkbox-border-width, var(--neo-border-width-md, 2px))) 0.5rem 0.375rem;
border-radius: var(--neo-border-radius);
transition:
box-shadow 0.3s ease,
border-radius 0.3s ease;
&.neo-rounded {
border-radius: var(--neo-border-radius-lg);
}
.neo-checkbox {
&-container {
--neo-label-margin: 0 0 0 0.75rem;
--neo-label-padding: 0;
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0;
padding: calc(0.375rem + var(--neo-checkbox-border-width, var(--neo-border-width, 1px))) 0.5rem 0.375rem;
border-radius: var(--neo-border-radius);
transition:
box-shadow 0.3s ease,
border-radius 0.3s ease;
&.neo-rounded {
border-radius: var(--neo-border-radius-lg);
}
&.neo-flat {
--neo-label-margin: 0 0 0 0.625rem;
&.neo-flat {
--neo-label-margin: 0 0 0 0.625rem;
}
}
}
.neo-checkbox-button {
box-sizing: border-box;
min-width: fit-content;
margin: 0 0 0.125rem;
padding: 0.125rem;
color: inherit;
text-decoration: none;
background: transparent;
border: var(--neo-checkbox-border-width, var(--neo-border-width-md, 2px)) var(--neo-checkbox-border-color, transparent) solid;
border-radius: var(--neo-border-radius-sm);
outline: none;
box-shadow: var(--neo-checkbox-box-shadow, var(--neo-box-shadow-raised-2));
cursor: pointer;
transition:
color 0.3s ease,
box-shadow 0.3s ease,
border-radius 0.3s ease,
border-color 0.3s ease;
&.neo-flat {
border-color: var(--neo-input-border-color, var(--neo-border-color));
border-width: var(--neo-border-width, 1px);
&-input {
display: none;
}
&:focus-visible,
&.neo-checked {
box-shadow: var(--neo-checkbox-checked-shadow, var(--neo-box-shadow-pressed-2));
}
&-button {
box-sizing: border-box;
min-width: fit-content;
margin: 0 0 0.125rem;
padding: 0.125rem;
color: inherit;
text-decoration: none;
background: transparent;
border: var(--neo-checkbox-border-width, var(--neo-border-width, 1px)) var(--neo-checkbox-border-color, transparent) solid;
border-radius: var(--neo-border-radius-sm);
outline: none;
box-shadow: var(--neo-checkbox-box-shadow, var(--neo-box-shadow-raised-2));
cursor: pointer;
transition:
color 0.3s ease,
box-shadow 0.3s ease,
border-radius 0.3s ease,
border-color 0.3s ease;
&.neo-flat {
border-color: var(--neo-input-border-color, var(--neo-border-color));
}
&.neo-disabled {
color: var(--neo-text-color-disabled);
box-shadow: var(--neo-box-shadow-flat);
cursor: not-allowed;
opacity: var(--neo-card-opacity-disabled, var(--neo-opacity-disabled));
}
&:focus-visible,
&.neo-checked {
box-shadow: var(--neo-checkbox-checked-shadow, var(--neo-box-shadow-pressed-2));
}
&.neo-rounded {
border-radius: 50%;
}
&.neo-disabled {
color: var(--neo-text-color-disabled);
box-shadow: var(--neo-box-shadow-flat);
cursor: not-allowed;
opacity: var(--neo-card-opacity-disabled, var(--neo-opacity-disabled));
}
.neo-checkbox-input {
display: none;
}
&.neo-rounded {
border-radius: 50%;
}
&.neo-glass {
@include mixin.glass;
&.neo-glass {
@include mixin.glass;
background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
border-color: var(
--neo-checkbox-border-color,
var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color)
);
border-width: var(--neo-border-width, 1px);
backdrop-filter: var(--neo-checkbox-glass-blur, var(--neo-blur-2) var(--neo-saturate-2));
}
background-color: var(--neo-btn-bg-color, var(--neo-glass-background-color));
border-color: var(
--neo-checkbox-border-color,
var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color)
var(--neo-glass-left-border-color)
);
backdrop-filter: var(--neo-checkbox-glass-blur, var(--neo-blur-2) var(--neo-saturate-2));
}
&.neo-start {
@starting-style {
box-shadow: var(--neo-box-shadow-flat);
&.neo-start {
@starting-style {
box-shadow: var(--neo-box-shadow-flat);
}
}
}
&.neo-skeleton {
box-shadow: var(--neo-box-shadow-flat);
pointer-events: none;
&.neo-skeleton {
box-shadow: var(--neo-box-shadow-flat);
pointer-events: none;
@include mixin.skeleton;
@include mixin.skeleton;
}
}
}
.neo-checkbox-suffix {
width: 1rem;
height: 1rem;
margin-bottom: 0.125rem;
margin-left: 0.5rem;
&-suffix {
width: 1rem;
height: 1rem;
margin-bottom: 0.125rem;
margin-left: 0.5rem;
}
}
</style>
2 changes: 0 additions & 2 deletions src/lib/inputs/NeoFilePicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,8 +469,6 @@
}
.neo-drop-container {
--neo-drop-spacing: 0.375rem;
position: relative;
display: inline-flex;
align-items: center;
Expand Down
Loading

0 comments on commit b1ba008

Please sign in to comment.