From eb28244fc8f98e28728c7b3f951e102b9cc56590 Mon Sep 17 00:00:00 2001 From: piotrruss Date: Mon, 16 Aug 2021 21:22:32 +0200 Subject: styles moved to scss --- styles/Main.module.scss | 125 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/_animations.scss | 4 -- styles/global.scss | 39 +++++++++++++++ styles/styles.scss | 3 -- 4 files changed, 164 insertions(+), 7 deletions(-) create mode 100644 styles/Main.module.scss delete mode 100644 styles/_animations.scss create mode 100644 styles/global.scss delete mode 100644 styles/styles.scss (limited to 'styles') diff --git a/styles/Main.module.scss b/styles/Main.module.scss new file mode 100644 index 0000000..15be72a --- /dev/null +++ b/styles/Main.module.scss @@ -0,0 +1,125 @@ +.icon { + text-decoration: none; + display: inline-block; + width: 4em; + cursor: pointer; + + img { + width: 4em; + } + + p { + padding-top: .5em; + text-align: center; + color: #333; + } +} + +.userForm { + label, + & { + display: flex; + flex-flow: column; + } + + label > span { + font-weight: 600; + } + + input[type=email], + input[type=password] { + padding: .5em; + margin: .5em 0; + border: 1px solid #ccc; + border-radius: .25px; + } + .error { + text-align: center; + color: brown; + margin: 1rem 0 0; + } +} + +.header { + height: 2em; + padding: 0.5rem; + background-color: rgba(255, 255, 255, 0.4); + border-bottom: 1px solid rgba(255, 255, 255, 0.5); + + nav { + display: flex; + + & > ul:first-of-type { + flex-grow: 1; + overflow: auto; + } + } + + li { + margin-left: 1em; + margin-right: 1em; + display: inline-block; + cursor: pointer; + + & > span, + & > a { + color: #333; + font-weight: 600; + text-decoration: none; + align-items: center; + } + } +} + +.user { + font-weight: 600; + cursor: pointer; + position: relative; + +} + +.submenu { + position: absolute; + right: 4px; + top: 2.1em; + width: 10em; + padding: .5em; + background-color: rgba(255, 255, 255, .9); + border: 1px solid rgba(255, 255, 255, .5); + + & > li { + margin: 0; + padding:.5em; + width: 100%; + line-height: em; + + &:hover { + background-color: #ddd; + } + } +} + +.verify { + & > form { + padding: .5em 0; + + & > input { + padding: .75em; + border: 1px dashed #333; + border-radius: .5em; + } + } + + p { + line-height: 1.33; + padding: .5em 0; + } + + .email { + color: blue; + cursor: pointer; + } + .error { + color: brown; + } +} diff --git a/styles/_animations.scss b/styles/_animations.scss deleted file mode 100644 index b195c60..0000000 --- a/styles/_animations.scss +++ /dev/null @@ -1,4 +0,0 @@ -@keyframes fade-in { - from {opacity: 0;} - to {opacity: 1;} -} diff --git a/styles/global.scss b/styles/global.scss new file mode 100644 index 0000000..222bc44 --- /dev/null +++ b/styles/global.scss @@ -0,0 +1,39 @@ +@import "reset"; +@import "window"; + +main { + position: fixed; + top: 2em; + left: 0; + bottom: 0; + right: 0; +} + +body { + margin: 0; + color: #222; + height: 100vh; + overflow: hidden; + + background: #50a3a2; + background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); + background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); + background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); + background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); + + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +} + +textarea, input { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; +} + +.container { + margin: 1.5rem auto; + padding-left: 2rem; + padding-right: 2rem; +} diff --git a/styles/styles.scss b/styles/styles.scss deleted file mode 100644 index 73ef2ee..0000000 --- a/styles/styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "reset"; -@import "animations"; -@import "window"; -- cgit v1.2.3