Skip to content

Commit

Permalink
Merge pull request #19 from BQXBQX/dev-bqx
Browse files Browse the repository at this point in the history 
Dev bqx
  • Loading branch information
@BQXBQX
BQXBQX authored Feb 12, 2024
2 parents 6686e98 + 3eee3cc commit 83b924b
Show file tree
Hide file tree
Showing 14 changed files with 35 additions and 69 deletions.
8 changes: 4 additions & 4 deletions packages/ui/lib/Accordion/Accordion.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: grid;
grid-template-rows: 0fr 0fr;
overflow: hidden;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
&.show {
grid-template-rows: 0fr 1fr;
}
Expand All @@ -16,14 +16,14 @@
font-size: 14px;
padding: 16px 20px;
font-weight: bolder;
transition: all 0.1s ease-in-out;
transition: all 0.1s $cubic-bezier;
&:hover:not(.disabled) {
background-color: #fcfcfc;
text-decoration: underline;
transition: all 0.1s ease-in-out;
transition: all 0.1s $cubic-bezier;
}
.icon {
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
&.rotate {
transform: rotate(180deg);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/lib/Calendar/Calendar.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
background-color: var(--background-blue);
color: var(--primary-color);
border-radius: $radius-5;
transition: all $duration-200 ease-in-out;
transition: all $duration-200 $cubic-bezier;
}
&.today {
background-color: var(--background-blue);
Expand All @@ -62,7 +62,7 @@
background-color: var(--primary-color);
border-radius: 5px;
color: var(--white-color);
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/lib/Card/Card.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
padding: 0;
height: 300px;
object-fit: cover;
transition: all 0.3s ease-in-out;
transition: all 0.3s $cubic-bezier;
&:hover {
scale: 1.1;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/lib/Checkbox/Checkbox.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
border: 2px solid var(--shadow-color);
border-radius: 6px;
cursor: inherit;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
.checkPath {
stroke-dasharray: 24;
stroke-dashoffset: 24;
Expand All @@ -34,15 +34,15 @@
height: 22px;
width: 22px;
border-radius: 8px;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
}
&:hover::after {
background-color: rgba(var(--shadow-color-rgb), 0.2);
}
&.checked {
background-color: var(--primary-color);
border: unset;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
}
&.checked:hover {
box-shadow: 0 0px 15px rgba(var(--primary-color-rgb), 0.5);
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/lib/DatePicker/DatePicker.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
@mixin animation($type) {
animation-name: #{$type};
animation-duration: $duration-200;
animation-timing-function: ease-in-out;
animation-timing-function: $cubic-bezier;
animation-fill-mode: forwards;
}
.date-picker-button {
display: flex;
align-items: center;
gap: 10px;
color: var(--shadow-color) !important;
transition: all $duration-200 ease-in-out;
transition: all $duration-200 $cubic-bezier;
padding: 10px 15px !important;
width: 250px;
height: 42px;
Expand All @@ -30,7 +30,7 @@
}
svg {
fill: var(--shadow-color);
transition: all $duration-200 ease-in-out;
transition: all $duration-200 $cubic-bezier;
}
&:hover {
color: var(--primary-color) !important;
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/lib/Dialog/Dialog.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@mixin animation($name) {
animation-name: $name;
animation-duration: 400ms;
animation-timing-function: ease-in-out;
animation-timing-function: $cubic-bezier;
animation-fill-mode: forwards;
}

Expand All @@ -13,7 +13,7 @@
width: 100%;
position: absolute;
box-sizing: border-box;
background-color: rgba(var(--black-color-rgb), $alpha: 0.4);
background-color: $background-shadow-color;
&.background-in {
@include animation(in);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/lib/Input/Input.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $animation-duration: $duration-200;
box-sizing: border-box;
color: var(--shadow-color);
position: relative;
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
font-weight: 500;
background-color: var(--white-color);
&.border {
Expand All @@ -27,7 +27,7 @@ $animation-duration: $duration-200;
cursor: text;
.inputLabel {
position: absolute;
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
top: 50%;
transform: translate(0, -50%);
left: $padding-left-right;
Expand Down
36 changes: 0 additions & 36 deletions packages/ui/lib/Pagination/Pagination.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,4 @@
justify-content: center;
font-size: 13px !important;
}
// &.disabled {
// .item {
// opacity: 0.4 !important;
// cursor: not-allowed !important;
// }
// }
// .item {
// height: 32px;
// width: 32px;
// border-radius: 8px;
// display: flex;
// justify-content: center;
// align-items: center;
// border: solid 1px #f1f1f1;
// font-size: 13px;
// font-weight: 500;
// cursor: pointer;
// transition: none;
// &:hover:not(&.more):not(&.active) {
// background-color: #f1f1f1;
// transition: all 0.2s ease-in-out;
// }
// &.active {
// background-color: var(--primary-color);
// color: var(--white-color);
// transition: all 0.1s ease-in-out;
// }
// &.disabled {
// opacity: 0.4;
// cursor: not-allowed;
// }
// &.more:hover {
// opacity: 0.6 !important;
// transition: all 0.2s ease-in-out;
// }
// }
}
6 changes: 3 additions & 3 deletions packages/ui/lib/Radio/Radio.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
cursor: pointer;
appearance: none;
position: relative;
transition: all 0.25s ease-in-out;
transition: all 0.25s $cubic-bezier;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -134,15 +134,15 @@
box-sizing: border-box;
display: inline-block;
border-radius: 50%;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
}
&::after {
content: '';
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
}
&:active {
scale: 0.95;
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/lib/Select/Select.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
opacity: 0;
transform: scaleY(0);
background-color: var(--white-color);
transition: all 0.2s ease-in-out;
transition: all 0.2s $cubic-bezier;
display: flex;
.nothing-img-container {
margin: 15px;
Expand All @@ -38,7 +38,7 @@
height: 35px;
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
transition: all 0.3s $cubic-bezier;
&:hover {
background-color: rgba(var(--shadow-color-rgb), 0.1);
padding: 0 0 0 4px;
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/lib/Sheet/Sheet.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $padding-left-right-distance: 20px;
@mixin animation($name) {
animation-name: $name;
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-timing-function: $cubic-bezier;
animation-fill-mode: forwards;
}

Expand Down Expand Up @@ -83,7 +83,7 @@ $padding-left-right-distance: 20px;
align-items: center;
justify-content: center;
svg {
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
}
&:hover {
svg {
Expand All @@ -97,10 +97,10 @@ $padding-left-right-distance: 20px;
}

.wrapper {
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
border-radius: 15px;
& > div {
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
}
&.show {
padding: 12px;
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/lib/Switch/Switch.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ $switch-sizes: (
@mixin animation($isChecked) {
animation-duration: $animation-duration;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-timing-function: $cubic-bezier;
}

@mixin generate-animations($sizes, $ball-margin, $ball-center-width) {
Expand Down Expand Up @@ -76,7 +76,7 @@ $switch-sizes: (
background-color: var(--shadow-color);
box-shadow: $shadow-inner;
cursor: pointer;
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
&.medium {
$switch-size-anim: $switch-size-medium;
@include switch-size($switch-size-medium, 'medium');
Expand All @@ -101,7 +101,7 @@ $switch-sizes: (
}
&.isChecked {
background-color: var(--primary-color);
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
}
&.disabled {
@include disabled;
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/lib/Toast/Toast.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $border-radius: $radius-5;
@mixin animation($name) {
animation-name: $name;
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-timing-function: $cubic-bezier;
}
@mixin type($type-name) {
color: var(--#{$type-name}-color);
Expand All @@ -21,7 +21,7 @@ $border-radius: $radius-5;
opacity: 0;
transform: translateY(100px);
overflow: hidden;
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
padding: 12px 10px 16px 20px;
display: flex !important;
@include shadow;
Expand Down Expand Up @@ -67,7 +67,7 @@ $border-radius: $radius-5;
display: flex;
justify-content: center;
align-items: center;
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
&:hover {
scale: 1.05;
}
Expand Down Expand Up @@ -125,7 +125,7 @@ $border-radius: $radius-5;
right: 10px;
bottom: 10px;
@include animation(slideIn);
transition: all $animation-duration ease-in-out;
transition: all $animation-duration $cubic-bezier;
}
.toastHide {
bottom: -100px;
Expand Down
2 changes: 2 additions & 0 deletions packages/ui/lib/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,5 @@ $font-size-14: 14px;

//background color
$background-shadow-color: rgb(var(--black-color-rgb), 0.6);

$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);

0 comments on commit 83b924b

Please sign in to comment.