diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 623a62b..c6f63e1 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -1,6 +1,8 @@
-
+
diff --git a/src/style/molecules/_switcher.scss b/src/style/molecules/_switcher.scss
index 1a6034a..0de2532 100644
--- a/src/style/molecules/_switcher.scss
+++ b/src/style/molecules/_switcher.scss
@@ -1,27 +1,32 @@
.switcher {
+ --offset: 16px;
+ --button-size: 44px;
$shadow-color: rgba(0, 0, 0, 0.05);
position: fixed;
z-index: 101;
- bottom: 16px;
- left: 16px;
+ bottom: var(--offset);
+ left: var(--offset);
pointer-events: none;
@include bp (sm) {
- bottom: 20px;
- left: 20px;
+ --offset: 20px;
}
@include bp (md) {
- bottom: 40px;
- left: 40px;
+ --offset: 40px;
+ --button-size: 56px;
}
// Links
&__links {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: 0;
+ min-width: 240px;
opacity: 0;
padding: 8px;
background: $color-primary-tertiary20;
border-radius: 12px;
- margin-bottom: 16px;
transform: translate3d(0, 8px, 0);
box-shadow: 0 6px 6px $shadow-color, 0 12px 12px $shadow-color, 0 24px 24px $shadow-color;
transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart);
@@ -58,8 +63,8 @@
// Button
&__button {
$shadow-color: rgba(0, 0, 0, 0.05);
- width: 56px;
- height: 56px;
+ width: var(--button-size);
+ height: var(--button-size);
display: flex;
align-items: center;
justify-content: center;
@@ -78,12 +83,18 @@
// Dot
i {
display: block;
- width: 6px;
- height: 6px;
- margin: 2px 0;
+ width: 4px;
+ height: 4px;
+ margin: 1.5px 0;
border-radius: 100%;
background: #fff;
transition: transform 0.8s var(--ease-quart);
+
+ @include bp (md) {
+ width: 6px;
+ height: 6px;
+ margin: 2px 0;
+ }
}
// Hover
@@ -98,7 +109,10 @@
}
- // Open state
+ /*
+ ** States
+ */
+ // Open
&.is-open {
.switcher {
&__links {
@@ -113,11 +127,56 @@
&__button {
i {
- &:nth-child(1) { transform: translate3d(-7px, 8px, 0); }
- &:nth-child(2) { transform: translate3d(7px, -2px, 0); }
- &:nth-child(3) { transform: translate3d(0px, -3px, 0); }
+ &:nth-child(1) {
+ transform: translate3d(-6px, 5px, 0);
+
+ @include bp (md) {
+ transform: translate3d(-7px, 8px, 0);
+ }
+ }
+ &:nth-child(2) {
+ transform: translate3d(6px, -2px, 0);
+
+ @include bp (md) {
+ transform: translate3d(7px, -2px, 0);
+ }
+ }
+ &:nth-child(3) {
+ transform: translate3d(0px, -2px, 0);
+
+ @include bp (md) {
+ transform: translate3d(0px, -3px, 0);
+ }
+ }
}
}
}
}
+
+ // Over (for Photo viewer)
+ &.is-over {
+ top: var(--offset);
+ right: var(--offset);
+ left: auto;
+ bottom: auto;
+
+ // Links
+ .switcher__links {
+ top: calc(var(--button-size) + 8px);
+ right: 0;
+ left: auto;
+
+ @include bp (md) {
+ top: auto;
+ bottom: calc(var(--button-size) + 24px);
+ }
+ }
+
+ @include bp (md) {
+ top: auto;
+ right: var(--offset);
+ left: auto;
+ bottom: var(--offset);
+ }
+ }
}
\ No newline at end of file