matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: styles

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-13 13:27:54 +01:00
parent 389cbff281
commit cf39766087
3 changed files with 97 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/nicolium/src/styles/new/accounts.scss
View File

@ -1,4 +1,5 @@
@use 'mixins';
@use 'variables';
.⁂-account-layout {
display: flex;
@ -8,7 +9,11 @@
.⁂-account-header {
&__container {
@apply -mx-4 -mt-4 sm:-mx-6 sm:-mt-6;
margin: -1rem -1rem 0;
@media (min-width: variables.$breakpoint-sm) {
margin: -1.5rem -1.5rem 0;
}
}
}

90
packages/nicolium/src/styles/new/components.scss
View File

@ -1329,20 +1329,54 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
&__track {
@apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 0.25rem;
border-radius: 9999px;
background-color: rgb(var(--color-primary-200));
.dark & {
background-color: rgb(var(--color-primary-700));
}
}
&__fill {
@apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] duration-0 ease-in-out;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 0.25rem;
border-radius: 9999px;
background-color: rgb(var(--color-accent-500));
transition: width 0ms ease-in-out;
}
&__thumb {
@apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-0 ease-in-out;
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
width: 0.75rem;
height: 0.75rem;
margin-left: -0.375rem;
border-radius: 9999px;
background-color: rgb(var(--color-accent-500));
box-shadow: 0 1px 2px 0 #0001;
transition: left 0ms ease-in-out;
}
&--animate {
.⁂-slider__fill {
@apply duration-150;
transition-duration: 150ms;
}
}
}
@ -1359,18 +1393,58 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
&__track {
@apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 0.25rem;
border-radius: 9999px;
background-color: rgb(var(--color-primary-200));
.dark & {
background-color: rgb(var(--color-primary-700));
}
}
&__fill {
@apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 0.25rem;
border-radius: 9999px;
background-color: rgb(var(--color-secondary-500));
}
&__step {
@apply absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300;
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
width: 0.25rem;
height: 0.75rem;
background-color: rgb(var(--color-primary-500));
}
&__thumb {
@apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out;
position: absolute;
z-index: 10;
top: 50%;
transform: translateY(-50%);
width: 0.75rem;
height: 0.75rem;
margin-left: -0.375rem;
border-radius: 9999px;
background-color: rgb(var(--color-secondary-500));
box-shadow: 0 1px 2px 0 #0001;
transition: left 100ms ease-in-out;
}
}

14
packages/nicolium/src/styles/ui.scss
View File

@ -6,20 +6,21 @@
&::-moz-focus-inner,
&:focus,
&:active {
@apply outline-0 #{!important};
outline: 0 !important;
}
&:hover,
&:active,
&:focus {
@apply opacity-60 transition-colors duration-200 ease-out;
opacity: 0.6;
@apply transition-colors duration-200 ease-out;
}
@apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
}
.react-datepicker-popper {
@apply z-[9999] #{!important};
z-index: 9999 !important;
}
.ellipsis::after {
@ -27,11 +28,14 @@
}
.react-swipeable-view-container {
@apply h-full;
height: 100%;
}
.react-swipeable-view-container > * {
@apply flex items-center justify-center h-full;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
::-webkit-scrollbar-thumb {