From ad1f0c4f9b93d70c91f174e98dafd6fdf3005baa Mon Sep 17 00:00:00 2001 From: Jakub Szajna Date: Mon, 18 Jan 2021 14:54:52 +0100 Subject: [PATCH] Global styles --- index.html | 19 +- src/subpages/sportSubpage/SportSubpage.css | 230 --------------------- src/subpages/sportSubpage/sport.html | 35 ---- styles/App.css | 195 ++++++++++++++++- 4 files changed, 199 insertions(+), 280 deletions(-) diff --git a/index.html b/index.html index c0a3f8d..b360aa7 100644 --- a/index.html +++ b/index.html @@ -19,18 +19,21 @@ -
-
diff --git a/src/subpages/sportSubpage/SportSubpage.css b/src/subpages/sportSubpage/SportSubpage.css index 74728ff..2a930a0 100644 --- a/src/subpages/sportSubpage/SportSubpage.css +++ b/src/subpages/sportSubpage/SportSubpage.css @@ -1,233 +1,3 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"); -:root { - --delay: 0s; -} - -* { - outline: none; - box-sizing: border-box; - --yellow: #fdd92a; - --navy-blue: #333439; - --dark-gray: #393834; - --background-gray: #efefed; -} - -.hidden { - display: none !important; -} - -html { - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - background: #ffffff; -} - -img { - max-width: 100%; -} - -body { - font-family: "Inter", sans-serif; - background-color: var(--background-gray); - color: var(--dark-gray); - max-width: 1600px; - height: 100%; - margin-left: auto; - margin-right: auto; -} - -.wrapper { - max-width: 1600px; - background-color: var(--background-gray); - display: flex; - margin: 0 auto; - background-image: url(./images/background.svg); - background-size: contain; - background-repeat: no-repeat; -} - -.left-side { - width: 6rem; - display: flex; - flex-direction: column; - flex-shrink: 0; - align-items: center; - padding: 117px 0 40px; - background: var(--background-gray); - position: sticky; - top: 0; - left: 0; - max-height: 100vh; - -webkit-animation: left 1s var(--delay) both; - animation: left 1s var(--delay) both; -} - -.left-side .fa { - width: 32px; - text-align: center; - cursor: pointer; -} -.left-side .fa + .fa { - margin-top: 34px; -} -.left-side .fa:last-child { - margin-top: auto; -} -.left-side .fa.active, -.left-side .fa:hover { - color: var(--yellow); -} - -@-webkit-keyframes left { - 0% { - transform: translateX(-30px); - opacity: 0; - } - 100% { - opacity: 1; - transform: none; - } -} - -@keyframes left { - 0% { - transform: translateX(-30px); - opacity: 0; - } - 100% { - opacity: 1; - transform: none; - } -} -@-webkit-keyframes top { - 0% { - transform: translateY(-30px); - opacity: 0; - } - 100% { - opacity: 1; - transform: none; - } -} -@keyframes top { - 0% { - transform: translateY(-30px); - opacity: 0; - } - 100% { - opacity: 1; - transform: none; - } -} -.main-container { - display: flex; - flex-direction: column; - flex-grow: 1; - padding: 25px; - padding-left: 0; -} - -.header { - background: var(--yellow); - width: calc(100% + 25px); - padding: 0 30px; - -webkit-animation: top 1s both; - animation: top 1s both; - display: flex; - align-items: center; - font-size: 15px; - white-space: nowrap; - position: -webkit-sticky; - position: sticky; - top: -2px; - left: 0; - z-index: 10; - border-radius: 0 0 12px 0; -} -.header:before { - content: ""; - width: 100%; - height: 25px; - position: absolute; - top: -25px; - left: 0; -} -.header-link { - color: var(--dark-gray); - text-decoration: none; - display: flex; - align-items: center; - padding: 20px; - transition: 0.3s; - border-bottom: 3px solid transparent; - transition: 0.3s; - opacity: 0.4; -} -.header-link svg { - width: 20px; - margin-right: 14px; -} - -.header-link .fa { - width: 20px; - margin-right: 14px; -} - -.header-link.active, -.header-link:hover { - border-bottom: 3px solid var(--navy-blue); - opacity: 1; -} - -.logo { - padding: 20px 50px 20px 0; - font-size: 16px; - color: var(--dark-grey); -} -.logo-det { - background: lightgray; - padding: 8px; - margin-left: -2px; - border-radius: 50%; - font-size: 15px; -} - -.user-info { - margin-left: auto; - display: flex; - align-items: center; -} -.user-info svg { - width: 20px; -} -.user-info .fa { - width: 20px; - margin-left: 12px; -} -.user-info .profile { - margin: 0 20px 0 12px; - width: 18px; -} - -.button { - display: flex; - align-items: center; - color: #9b9ca7; - border: none; - padding: 2px 12px; - border-radius: 4px; - margin-right: 20px; -} -.button svg { - margin-left: 10px; - width: 16px; -} - -.button .fa { - margin-left: 10px; - width: 16px; -} - .user-box { margin: 25px 0 0 25px; display: flex; diff --git a/src/subpages/sportSubpage/sport.html b/src/subpages/sportSubpage/sport.html index 939fc25..e941044 100644 --- a/src/subpages/sportSubpage/sport.html +++ b/src/subpages/sportSubpage/sport.html @@ -1,40 +1,5 @@
-
- - - - - -
-
- - - Bookings - - - Controller - - - Map - - - Reports - - -
diff --git a/styles/App.css b/styles/App.css index 6fa61b8..7544337 100644 --- a/styles/App.css +++ b/styles/App.css @@ -1,9 +1,186 @@ -@import 'calendar-widget/dist/index.css'; +@import "calendar-widget/dist/index.css"; + +:root { + --delay: 0s; +} + +* { + outline: none; + box-sizing: border-box; + --yellow: #fdd92a; + --navy-blue: #333439; + --dark-gray: #393834; + --background-gray: #efefed; +} + +.hidden { + display: none !important; +} + +html { + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + background: #ffffff; +} + +img { + max-width: 100%; +} body { font-family: "Montserrat", sans-serif; margin: 0; padding: 0; + background-color: var(--background-gray); + color: var(--dark-gray); + max-width: 1600px; + height: 100%; + margin-left: auto; + margin-right: auto; +} + +.wrapper { + max-width: 1600px; + background-color: var(--background-gray); + display: flex; + margin: 0 auto; + background-image: url(./images/background.svg); + background-size: contain; + background-repeat: no-repeat; +} + +@-webkit-keyframes left { + 0% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + opacity: 1; + transform: none; + } +} + +@keyframes left { + 0% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + opacity: 1; + transform: none; + } +} +@-webkit-keyframes top { + 0% { + transform: translateY(-30px); + opacity: 0; + } + 100% { + opacity: 1; + transform: none; + } +} +@keyframes top { + 0% { + transform: translateY(-30px); + opacity: 0; + } + 100% { + opacity: 1; + transform: none; + } +} +.main-container { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 25px; + padding-left: 0; + padding-top: 0; +} + +.header { + background: var(--yellow); + width: 100%; + padding: 0 30px; + -webkit-animation: top 1s both; + animation: top 1s both; + display: flex; + align-items: center; + font-size: 15px; + white-space: nowrap; + position: -webkit-sticky; + position: sticky; + top: -2px; + left: 0; + z-index: 10; + border-radius: 0 0 12px 0; +} +.header:before { + content: ""; + width: 100%; + height: 25px; + position: absolute; + top: -25px; + left: 0; +} +.header-link { + color: var(--dark-gray); + text-decoration: none; + display: flex; + align-items: center; + padding: 20px; + transition: 0.3s; + border-bottom: 3px solid transparent; + transition: 0.3s; + opacity: 0.4; +} +.header-link svg { + width: 20px; + margin-right: 14px; +} + +.header-link .fa { + width: 20px; + margin-right: 14px; +} + +.header-link.active, +.header-link:hover { + border-bottom: 3px solid var(--navy-blue); + opacity: 1; +} + +.logo { + padding: 20px 50px 20px 0; + font-size: 16px; + color: var(--dark-grey); +} +.logo-det { + background: lightgray; + padding: 8px; + margin-left: -2px; + border-radius: 50%; + font-size: 15px; +} + +.button { + display: flex; + align-items: center; + color: #9b9ca7; + border: none; + padding: 2px 12px; + border-radius: 4px; + margin-right: 20px; +} +.button svg { + margin-left: 10px; + width: 16px; +} + +.button .fa { + margin-left: 10px; + width: 16px; } .container { @@ -19,6 +196,11 @@ body { padding: 12px; } +.homepage { + text-decoration: none; + color: var(--dark-gray); +} + .page-slider .container { margin: auto; } @@ -116,15 +298,14 @@ body { /*Style the footer*/ .page-footer { - background-color: rgb(138, 138, 138); + background-color: var(--yellow); overflow: hidden; - max-width: 1200px; margin: auto; - + width: 100%; } .page-footer p { - color: #f2f2f2; + color: var(--dark-gray); text-align: center; padding: 14px 14px; text-decoration: none; @@ -133,5 +314,5 @@ body { } .page-footer p:hover { - color: black -} \ No newline at end of file + color: black; +}