diff --git a/app/app.vue b/app/app.vue index 9a6378a..fe9d35b 100644 --- a/app/app.vue +++ b/app/app.vue @@ -72,6 +72,7 @@ // Reset default button styles button { border: none; + padding: 0; } } diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss index e0a8cb6..96f7c2a 100644 --- a/app/assets/styles/_base.scss +++ b/app/assets/styles/_base.scss @@ -11,6 +11,7 @@ --screen-mobile-m: #{$screen-mobile-m}; --screen-mobile-l: #{$screen-mobile-l}; --screen-tablet: #{$screen-tablet}; + --screen-laptop: #{$screen-laptop}; --screen-desktop-s: #{$screen-desktop-s}; --screen-desktop-m: #{$screen-desktop-m}; --screen-desktop-l: #{$screen-desktop-l}; diff --git a/app/assets/styles/_media.scss b/app/assets/styles/_media.scss index d58754c..161c564 100644 --- a/app/assets/styles/_media.scss +++ b/app/assets/styles/_media.scss @@ -6,8 +6,20 @@ } } +@mixin mobileMedium() { + @media screen and (min-width: $screen-mobile-m) { + @content; + } +} + @mixin tablet() { @media screen and (min-width: $screen-tablet) { @content; } } + +@mixin laptop() { + @media screen and (min-width: $screen-laptop) { + @content; + } +} diff --git a/app/assets/styles/_variables.scss b/app/assets/styles/_variables.scss index c0393ec..60ace67 100644 --- a/app/assets/styles/_variables.scss +++ b/app/assets/styles/_variables.scss @@ -3,6 +3,7 @@ $screen-mobile-s: 320px; $screen-mobile-m: 375px; $screen-mobile-l: 414px; $screen-tablet: 768px; +$screen-laptop: 1024px; $screen-desktop-s: 1280px; $screen-desktop-m: 1440px; $screen-desktop-l: 1920px; diff --git a/app/components/ImageUpload.vue b/app/components/ImageUpload.vue new file mode 100644 index 0000000..a4df13c --- /dev/null +++ b/app/components/ImageUpload.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/app/components/PerdInput.vue b/app/components/PerdInput.vue index f5348fa..1a37809 100644 --- a/app/components/PerdInput.vue +++ b/app/components/PerdInput.vue @@ -64,7 +64,7 @@ .label { position: absolute; - left: 0; + left: var(--input-spacing-horizontal); top: 0; bottom: 0; right: 0; @@ -72,7 +72,6 @@ align-items: center; pointer-events: none; color: var(--input-color-main); - left: var(--input-spacing-horizontal); transform-origin: top left; user-select: none; transition: diff --git a/app/components/PerdMenu/OptionBase.vue b/app/components/PerdMenu/OptionBase.vue index f7714a9..038a49b 100644 --- a/app/components/PerdMenu/OptionBase.vue +++ b/app/components/PerdMenu/OptionBase.vue @@ -25,7 +25,7 @@ background-color: var(--color-background); color: var(--color-blue-600); cursor: pointer; - transition: background-color 0.2s ease-out; + transition: background-color var(--transition-time-quick) ease-out; font-size: var(--font-size-14); white-space: nowrap; diff --git a/app/components/PerdSelect.vue b/app/components/PerdSelect.vue new file mode 100644 index 0000000..a977644 --- /dev/null +++ b/app/components/PerdSelect.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/app/components/PerdTextArea.vue b/app/components/PerdTextArea.vue new file mode 100644 index 0000000..4f10bb0 --- /dev/null +++ b/app/components/PerdTextArea.vue @@ -0,0 +1,108 @@ +