From 244b3ac34584759dc4b524dfa1c39c86ac3928da Mon Sep 17 00:00:00 2001 From: Urii Frolkin Date: Tue, 17 Aug 2021 13:13:57 +0200 Subject: [PATCH 01/12] template ver.1 --- 03-lection1/01-button/button.css | 1 + 03-lection1/02-accordion/accordion.css | 31 +- 03-lection1/02-accordion/index.html | 43 +- 04-lection2/01-histogram/histogram.css | 17 + 04-lection2/02-skeleton/skeleton.css | 30 +- 05-lection3/01-tooltip/index.html | 11 +- 05-lection3/01-tooltip/tooltip.css | 29 +- 05-lection3/03-calendar/calendar.css | 15 +- 07-lection5/01-checkbox/checkbox.css | 1 + 07-lection5/02-radio/radio.css | 1 + 07-lection5/03-toggler/index.css | 2 +- 07-lection5/03-toggler/toggler.css | 5 +- 07-lection5/04-input/input.css | 4 +- 09-lection7/01-burger-menu/burger-menu.css | 31 + 09-lection7/01-burger-menu/index.html | 44 +- 10-lection8/01-theme-changer/index.html | 1 - assets/css/burger.css | 52 ++ assets/css/main.css | 4 + assets/css/template.css | 62 ++ assets/images/sprite.svg | 43 ++ components/card/card.css | 39 +- components/header/header.css | 28 +- components/preview/preview.css | 6 +- components/tabs/tabs.css | 121 ++++ index.html | 758 +++++++++++++++++++-- package.json | 6 +- pages/burger-menu.js | 19 + pages/template.html | 111 +++ 28 files changed, 1410 insertions(+), 105 deletions(-) create mode 100644 assets/css/burger.css create mode 100644 assets/css/template.css create mode 100644 assets/images/sprite.svg create mode 100644 components/tabs/tabs.css create mode 100644 pages/burger-menu.js create mode 100644 pages/template.html diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css index 0e0f4b8..bd1d47a 100644 --- a/03-lection1/01-button/button.css +++ b/03-lection1/01-button/button.css @@ -3,6 +3,7 @@ .button { padding: 0; + margin:5px; box-sizing: border-box; box-shadow: none; outline: none; diff --git a/03-lection1/02-accordion/accordion.css b/03-lection1/02-accordion/accordion.css index b36a7f1..e2bb79d 100644 --- a/03-lection1/02-accordion/accordion.css +++ b/03-lection1/02-accordion/accordion.css @@ -1,20 +1,24 @@ /* Стилизация аккордеона */ - -.accordion::-webkit-details-marker { - display: none; +.accordion{ + display:flex; + flex-direction: column; + flex-wrap: nowrap; } - -.accordion { - display: block; +.accordion__summary { + display:flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + } - .accordion__item { + display:block; border: 1px solid var(--grey-3); border-radius: 8px; box-sizing: border-box; padding: 32px; - width: 730px; + max-width: 730px; font-family: Inter; font-style: normal; @@ -27,4 +31,15 @@ .accordion__item:last-child { margin-bottom: 0; + } + + + .accordion__item[open] > .accordion__summary > .accordion__icon { + transform: rotate(-180deg); + } + .accordion__icon { + fill: none; + width: 20px; + height: 10px; + color: var(--black); } \ No newline at end of file diff --git a/03-lection1/02-accordion/index.html b/03-lection1/02-accordion/index.html index f646837..2faf3de 100644 --- a/03-lection1/02-accordion/index.html +++ b/03-lection1/02-accordion/index.html @@ -7,23 +7,30 @@ -
- - Accordion item 1 - -

- 1. Обратите внимание, что `summary` по-умолчанию имеет `display: inline`. Поменяйте, если это необходимо. - - 2. За стрелочку в `summary` отвечает псевдоэлемент `::-webkit-details-marker`. Так как пока что не изучали, как прибивать элементы к краям контейнера, то скрываем нативную так, а свою сделаем позже: -

-
-
- - Accordion item 2 - -

- В директории компонента лежат стили, картинки, которые использует только он, возможно, что-то еще, специфичное именно для него. -

-
+
+
+ + Accordion item 1 + + + + + +

+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. +

+
+
+ + Accordion item 2 + + + + +

+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. +

+
+
diff --git a/04-lection2/01-histogram/histogram.css b/04-lection2/01-histogram/histogram.css index 27a172a..679cce0 100644 --- a/04-lection2/01-histogram/histogram.css +++ b/04-lection2/01-histogram/histogram.css @@ -37,6 +37,8 @@ width: 100%; overflow:hidden; align-items: flex-end; + animation: ani 0.6s ease-out; + transform-origin:bottom; } .histogram__column { flex: 1 1 auto; @@ -47,4 +49,19 @@ } .histogram__column:first-child { margin: 0; +} + +@keyframes ani { + 0% { + transform: scaleY(0); + + } + 50% { + transform: scaleY(0); + + } + 100% { + transform: scaleY(1); + + } } \ No newline at end of file diff --git a/04-lection2/02-skeleton/skeleton.css b/04-lection2/02-skeleton/skeleton.css index ad9b114..a42975a 100644 --- a/04-lection2/02-skeleton/skeleton.css +++ b/04-lection2/02-skeleton/skeleton.css @@ -5,6 +5,8 @@ margin:0px; border: 1px solid var(--grey-3); border-radius: 8px; + width: 100%; + overflow: hidden; } .skeleton__column { display: flex; @@ -31,26 +33,52 @@ height:20px; margin:5px; background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% ); + background-size: 200%; + animation-name: go; + animation-iteration-count: infinite; + animation-duration: 1.5s; } + .skeleton__rectangle-mid { flex: 0 1 20px; max-width:calc(100% * 0.5); height:20px; margin:5px; background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% ); + background-size: 200%; + animation-name: go; + animation-iteration-count: infinite; + animation-duration: 1.5s; } .skeleton__rectangle-big { flex: 0 1 20px; max-width: 100%; margin:5px; background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% ); + background-size: 200%; + animation-name: go; + animation-iteration-count: infinite; + animation-duration: 1.5s; } .skeleton__circle { flex: 0 0 auto; flex-basis: 64px; height: 64px; border-radius: 32px; - background: var(--grey-2); + background: linear-gradient(to right, var(--grey-2) 0%, var(--grey-5) 33.33%, var(--grey-6)52.08%, var(--grey-7) 73.96%, var(--grey-2) 100% ); margin:5px; + background-size: 200%; + animation-name: go; + animation-iteration-count: infinite; + animation-duration: 1.5s; + } + + @keyframes go { + 0%{ + background-position:100%; + } + 100% { + background-position: -100%; + } } \ No newline at end of file diff --git a/05-lection3/01-tooltip/index.html b/05-lection3/01-tooltip/index.html index eeff33c..c867744 100644 --- a/05-lection3/01-tooltip/index.html +++ b/05-lection3/01-tooltip/index.html @@ -17,11 +17,14 @@
+ +
+ + + +
+
Helper Text
-
- -
-
Helper Text
diff --git a/05-lection3/01-tooltip/tooltip.css b/05-lection3/01-tooltip/tooltip.css index dc8b5fb..d712bef 100644 --- a/05-lection3/01-tooltip/tooltip.css +++ b/05-lection3/01-tooltip/tooltip.css @@ -5,19 +5,19 @@ } .tooltip__trigger { - + } .tooltip__help { - background-color: var(--blue); + background-color:var(--primary); box-shadow: 0px 2px 4px rgba(33, 36 41, 0.05); border-radius: 10px; width: 129px; padding: 13px 21px; position:absolute; - left: 50%; bottom:100%; - transform: translateX(-50%); + transform: translate(-50%, -5px); + left: 50%; font-family: Inter; font-style: normal; font-weight: 400; @@ -26,6 +26,21 @@ color: var(--grey-2); text-align: center; display: none; + + /* + height: 45px; + border-radius: 10px; + background: var(--primary); + position: absolute; + bottom: 100%; + transform: translate(-50%, -10px); + left: 50%; + color: var(--white); + padding: 13px 21px; + opacity: 0; + transition: opacity 0.2s linear, transform 0.1s linear; + pointer-events: none; + */ } .tooltip__help:before { content: ""; @@ -38,4 +53,10 @@ } .tooltip__trigger:hover ~ .tooltip__help { display: block; +} +.tooltip__icon { + fill: none; + width: 24px; + height: 24px; + color: var(--primary); } \ No newline at end of file diff --git a/05-lection3/03-calendar/calendar.css b/05-lection3/03-calendar/calendar.css index 1f9fafd..a1cae8d 100644 --- a/05-lection3/03-calendar/calendar.css +++ b/05-lection3/03-calendar/calendar.css @@ -2,25 +2,28 @@ box-sizing: border-box; border: 1px solid var(--grey-3); border-radius: 8px; - padding: 28px; + padding: 12px; width: 100%; - max-width: 358px; + max-height:280px; + max-width: 265px; + margin:auto; } .calendar__title { + display: block; font-weight: 600; - font-size: 20px; - line-height: 24px; + font-size: 16px; + line-height: 18px; color: var(--calendar); text-align: center; - margin-bottom: 20px; + margin: 0 auto; } .calendar__item { display: flex; justify-content: center; align-items: center; font-size: 14px; - line-height: 20px; + line-height: 18px; color: var(--calendar); } diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index 56fbd26..daf3d00 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -1,5 +1,6 @@ .checkbox { display: block; + margin:20px; } .checkbox__input { diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css index d55eb33..b65e12c 100644 --- a/07-lection5/02-radio/radio.css +++ b/07-lection5/02-radio/radio.css @@ -1,5 +1,6 @@ .radio { display: block; + margin:20px; } .radio__input { diff --git a/07-lection5/03-toggler/index.css b/07-lection5/03-toggler/index.css index 7ff525b..3205d10 100644 --- a/07-lection5/03-toggler/index.css +++ b/07-lection5/03-toggler/index.css @@ -24,5 +24,5 @@ p { line-height: 18px; letter-spacing: 0.04em; text-transform: uppercase; - color: #ACB5BD; + color: var(--black); } diff --git a/07-lection5/03-toggler/toggler.css b/07-lection5/03-toggler/toggler.css index 95ac794..42c5e79 100644 --- a/07-lection5/03-toggler/toggler.css +++ b/07-lection5/03-toggler/toggler.css @@ -43,6 +43,7 @@ top: 1px; background: #DDE2E5; border-radius: 50%; + transition: all 0.5s ease; } .toggler__input:focus ~ .toggler__state .toggler__legend { @@ -64,9 +65,11 @@ } .toggler__input:checked ~ .toggler__state .toggler__control .toggler__round { - left: unset; + /*left: unset;*/ + left: 1.5rem; right: 1px; background: #FFFFFF; + transition: all 0.5s ease; } .toggler__input:disabled ~ .toggler__state .toggler__control { diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index 897da18..e97cd0a 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -6,8 +6,8 @@ } .input__control { - width: 350px; - height: 56px; + width: 250px; + height: 36px; cursor: pointer; background: var(--white); border: 1px solid var(--grey-2); diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css index e69de29..3146657 100644 --- a/09-lection7/01-burger-menu/burger-menu.css +++ b/09-lection7/01-burger-menu/burger-menu.css @@ -0,0 +1,31 @@ +/*.burger-menu{ + padding: 24px; + background: var(--white); + position:fixed; + top:0; + left:0; + width:100vw; + height:100vw; + transform:translateX(-100vw); + transition: transform 200ms ease-in-out; + box-sizing: border-box; +} + +.burger-menu[data-open]{ + transform:translateX(0); +} +*/ +.burger-menu { + position: fixed; + top: 0; + right: 0; + width: 100vw; + height: 100vh; + transform: translateX(-100vw); + background: rgba(0, 0, 0, 0.5); + transition: transform 200ms ease-in-out; +} + +.burger-menu[data-open] { + transform: translateZ(0); +} \ No newline at end of file diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html index 7e3f2bd..f6b2d06 100644 --- a/09-lection7/01-burger-menu/index.html +++ b/09-lection7/01-burger-menu/index.html @@ -1,12 +1,50 @@ - + + + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/10-lection8/01-theme-changer/index.html b/10-lection8/01-theme-changer/index.html index b6cd1b6..c96b1e1 100644 --- a/10-lection8/01-theme-changer/index.html +++ b/10-lection8/01-theme-changer/index.html @@ -1,4 +1,3 @@ - + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Modal + Tooltip + Avatar + Calendar + Histogram + +
+
+
+
+
+

Calendar

+
+
Июль 2021
+
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 + 19 + 20 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 29 + 30 + 31 + +
+
+
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file From ec8aba515e2d2f1ec800b4139e5dd7a200fec24e Mon Sep 17 00:00:00 2001 From: Urii Frolkin Date: Tue, 17 Aug 2021 15:17:05 +0200 Subject: [PATCH 02/12] template ver.2 --- assets/css/burger.css | 8 +++++--- pages/burger-menu.js | 2 ++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/assets/css/burger.css b/assets/css/burger.css index a42d381..a0d3961 100644 --- a/assets/css/burger.css +++ b/assets/css/burger.css @@ -1,8 +1,9 @@ .burger__menu{ padding: 20px; background: var(--white); - position:fixed; - top:0; + /* position:fixed;*/ + position:relative; + top:0px; left:0; width:100vw; height:100vw; @@ -12,7 +13,7 @@ } .burger__menu-open { - + display:block; margin: 20px; color: var(--black); } @@ -35,6 +36,7 @@ font-weight: 400; font-size: 16px; line-height: 24px; + z-index: 5; } .burger__container-title { display: block; diff --git a/pages/burger-menu.js b/pages/burger-menu.js index 365dbb9..f52a515 100644 --- a/pages/burger-menu.js +++ b/pages/burger-menu.js @@ -6,6 +6,7 @@ if (menuOpen) { menuOpen.addEventListener('click', function() { if (menu) { menu.setAttribute('data-open', ''); + menuOpen.style="display:none;" } }); } @@ -14,6 +15,7 @@ if (menuClose) { menuClose.addEventListener('click', function() { if (menu) { menu.removeAttribute('data-open'); + menuOpen.style="display:block;" } }); } From 51b76c3739cb12032ba14e41d043ec9d9444fc83 Mon Sep 17 00:00:00 2001 From: Urii Frolkin Date: Wed, 18 Aug 2021 16:58:24 +0200 Subject: [PATCH 03/12] main page --- 07-lection5/01-checkbox/checkbox.css | 19 +++- 07-lection5/02-radio/radio.css | 15 ++- 07-lection5/03-toggler/toggler.css | 14 +++ 07-lection5/04-input/index.html | 2 +- assets/css/burger.css | 10 +- assets/css/main.css | 22 +++++ assets/css/template.css | 21 ++-- assets/images/sprite.svg | 22 ++++- components/card/card.css | 1 + components/footer/footer.css | 3 +- components/header/header.css | 45 +++++++-- index.html | 30 +++++- pages/accordion.html | 105 ++++++++++++++++++++ pages/avatar.html | 73 ++++++++++++++ pages/burger-menu.js | 4 +- pages/button.html | 81 ++++++++++++++++ pages/calendar.html | 117 ++++++++++++++++++++++ pages/checkbox.html | 108 +++++++++++++++++++++ pages/histogram.html | 90 +++++++++++++++++ pages/input.html | 140 +++++++++++++++++++++++++++ pages/modal.html | 85 ++++++++++++++++ pages/radio.html | 108 +++++++++++++++++++++ pages/skeleton.html | 83 ++++++++++++++++ pages/template.html | 62 +++--------- pages/toggler.html | 109 +++++++++++++++++++++ pages/tooltip.html | 78 +++++++++++++++ 26 files changed, 1362 insertions(+), 85 deletions(-) create mode 100644 pages/accordion.html create mode 100644 pages/avatar.html create mode 100644 pages/button.html create mode 100644 pages/calendar.html create mode 100644 pages/checkbox.html create mode 100644 pages/histogram.html create mode 100644 pages/input.html create mode 100644 pages/modal.html create mode 100644 pages/radio.html create mode 100644 pages/skeleton.html create mode 100644 pages/toggler.html create mode 100644 pages/tooltip.html diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index daf3d00..cee31e3 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -26,6 +26,7 @@ border-radius: 4px; position: relative; cursor: pointer; + } .checkbox__input:checked ~ .checkbox__state .checkbox__control{ background: var(--blue); @@ -69,4 +70,20 @@ line-height: 24px; color: var(--grey-4); margin-left: 12px; - } \ No newline at end of file + } + + .checkbox .checkbox__input:checked ~ .checkbox__state .checkbox__control { + animation: pulse .5s; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 #bdc3c7; + } + 100% { + box-shadow: 0 0 0 1.5rem rgba(189, 195, 199, 0); + } +} + + + diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css index b65e12c..f611531 100644 --- a/07-lection5/02-radio/radio.css +++ b/07-lection5/02-radio/radio.css @@ -69,4 +69,17 @@ line-height: 24px; color: var(--grey-4); margin-left: 12px; -} \ No newline at end of file +} + +.radio .radio__input:checked ~ .radio__state .radio__control { + animation: pulse .5s; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 #bdc3c7; + } + 100% { + box-shadow: 0 0 0 1.5rem rgba(189, 195, 199, 0); + } +} diff --git a/07-lection5/03-toggler/toggler.css b/07-lection5/03-toggler/toggler.css index 42c5e79..41b904e 100644 --- a/07-lection5/03-toggler/toggler.css +++ b/07-lection5/03-toggler/toggler.css @@ -80,3 +80,17 @@ .toggler__input:disabled ~ .toggler__state .toggler__legend { color: #DDE2E5; } + +.toggler .toggler__input:checked ~ .toggler__state .toggler__control { + animation: pulse .5s; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 #bdc3c7; + } + 100% { + box-shadow: 0 0 0 1.5rem rgba(189, 195, 199, 0); + } +} + diff --git a/07-lection5/04-input/index.html b/07-lection5/04-input/index.html index bfa3a77..28b0c69 100644 --- a/07-lection5/04-input/index.html +++ b/07-lection5/04-input/index.html @@ -79,6 +79,6 @@ - + diff --git a/assets/css/burger.css b/assets/css/burger.css index a0d3961..a654643 100644 --- a/assets/css/burger.css +++ b/assets/css/burger.css @@ -1,8 +1,8 @@ .burger__menu{ padding: 20px; background: var(--white); - /* position:fixed;*/ - position:relative; + position:fixed; + /* position:relative;*/ top:0px; left:0; width:100vw; @@ -36,8 +36,7 @@ font-weight: 400; font-size: 16px; line-height: 24px; - z-index: 5; -} + } .burger__container-title { display: block; font-family: Inter; @@ -48,7 +47,6 @@ } .burger{ display: block; - overflow: hidden; - width: 229px; + width: 100%; } diff --git a/assets/css/main.css b/assets/css/main.css index b2d4f6f..b61df36 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -47,3 +47,25 @@ --value-10:60; } +html[data-theme-dark] { + --white: #212429; + --black: #ffffff; + --blue: #4263EB; + --purple: #7048E8; + --pink: #F784AD; + --red: #F03D3E; + --grey-1: #495057; + --grey-2: #ACB5BD; + --grey-3: #ACB5BD; + --grey-4: #F8F9FA; + + --grey-5: #E2E6E8; + --grey-6: #ACB5BD; + --grey-7: #DDE2E5; + --grey-bg: #444444; + + --active-text-color: var(--black); +} +.main { + display: block; +} \ No newline at end of file diff --git a/assets/css/template.css b/assets/css/template.css index f0ce6e4..9d78e33 100644 --- a/assets/css/template.css +++ b/assets/css/template.css @@ -11,7 +11,7 @@ align-items: center; justify-items:end; height: 64px; - background-color: red; + background-color: var(--grey-1); } .page__icon{ @@ -25,7 +25,7 @@ display: grid; grid-template-columns: auto 1fr; grid-column-gap: 20px; - background-color: yellow; + background-color: var(--grey-1); place-content: center; } @@ -36,27 +36,32 @@ justify-content: center; align-items: center; letter-spacing: 0.04em; - color:#acb5bd; + color:var(--grey-4); font-size: 12px; line-height: 18px; - background-color: blue; + background-color: var(--grey-1); } .menu { - width:229px; - background-color: gray; + width:40px; + background-color: var(--grey-1); overflow: hidden; + z-index: 1; } .component { display: block; - background-color: violet; + margin:40px; + background-color: var(--white); + width: 400px; } .component__title { + margin: 40px; height: 40px; - text-align: center; + /* text-align: center;*/ font-family: Inter; font-style: normal; font-weight: 500; font-size: 24px; line-height: 28px; + color:var(--grey-4) } \ No newline at end of file diff --git a/assets/images/sprite.svg b/assets/images/sprite.svg index 51a6502..b242d17 100644 --- a/assets/images/sprite.svg +++ b/assets/images/sprite.svg @@ -1,8 +1,8 @@ @@ -35,6 +35,24 @@ + + + + + + + + + + + + + + + + + + diff --git a/components/card/card.css b/components/card/card.css index 8a0be21..421598a 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -60,4 +60,5 @@ overflow: hidden; text-overflow: ellipsis; white-space: pre; + color: var(--black); } \ No newline at end of file diff --git a/components/footer/footer.css b/components/footer/footer.css index f457cf5..5312057 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -10,7 +10,7 @@ font-weight: 500; font-size: 38px; line-height: 48px; - color:--black; + color:var(--black); margin-top: 71px; margin-bottom: 32px; text-align: center; @@ -24,4 +24,5 @@ width: 640px; margin: 0 auto; margin-bottom: 136px; + color:var(--grey-2); } \ No newline at end of file diff --git a/components/header/header.css b/components/header/header.css index 2529296..24a6fec 100644 --- a/components/header/header.css +++ b/components/header/header.css @@ -1,28 +1,57 @@ .header { - background-color: --white; + background-color: var(--white); border-bottom: 1px solid var(--grey-2); font-family: Inter; - padding: 25px 0; + padding: 0; } .header__title { - padding: 48px 0px 96px; + padding: 24px 0px 0px; /*font-family: Inter;*/ font-style: normal; font-weight: 500; font-size: 50px; - line-height: 64px; - color:--black; + line-height: 24px; + color:var(--black); margin-left: 16px; } - +.header__logo{ + display: flex; + justify-content:space-between; +} .header__logo-icon { - display: block; - margin: 0 auto; + display:inline; + margin: 24px; + color: var(--black); + height: 32px; + width: 128px; +} +.header__switch { + display:inline-block; + margin: 24px; + color: var(--black); + height: 32px; + width: 200px; + right:24px; +} +.header__switch-icon { + display:inline; + margin: 10px; + color: var(--black); + height: 24px; + width: 24px; +} +.header__toggler { + display:inline-block; + margin: 10px; color: var(--black); + height: 24px; + width: 52px; } + + @media all and (min-width: 768px) { .header__inner { display: flex; diff --git a/index.html b/index.html index 1eb4f60..49da0c3 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@ height: 100%; } .page { - background-color: var(--main); + background-color: var(--white); display: flex; flex-direction: column; height: 100%; @@ -46,9 +46,30 @@
- - - + +

Reusable component library

@@ -761,4 +782,5 @@

About

+ diff --git a/pages/accordion.html b/pages/accordion.html new file mode 100644 index 0000000..8efc345 --- /dev/null +++ b/pages/accordion.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip + +
+
+
+
+
+

Accordion

+
+
+ + Accordion item 1 + + + + + +

+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. +

+
+
+ + Accordion item 2 + + + + +

+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. +

+
+
+ + Accordion item 3 + + + + +

+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. +

+
+
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/avatar.html b/pages/avatar.html new file mode 100644 index 0000000..510417f --- /dev/null +++ b/pages/avatar.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Avatar

+ +
+ +
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/burger-menu.js b/pages/burger-menu.js index f52a515..9add402 100644 --- a/pages/burger-menu.js +++ b/pages/burger-menu.js @@ -6,7 +6,7 @@ if (menuOpen) { menuOpen.addEventListener('click', function() { if (menu) { menu.setAttribute('data-open', ''); - menuOpen.style="display:none;" + // menuOpen.style="display:none;" } }); } @@ -15,7 +15,7 @@ if (menuClose) { menuClose.addEventListener('click', function() { if (menu) { menu.removeAttribute('data-open'); - menuOpen.style="display:block;" + // menuOpen.style="display:block;" } }); } diff --git a/pages/button.html b/pages/button.html new file mode 100644 index 0000000..a6f92d8 --- /dev/null +++ b/pages/button.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Button

+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/calendar.html b/pages/calendar.html new file mode 100644 index 0000000..8b07d3f --- /dev/null +++ b/pages/calendar.html @@ -0,0 +1,117 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Calendar

+
+
Июль 2021
+
+
+ Пн + Вт + Ср + Чт + Пт + Сб + Вс + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 + 19 + 20 + 22 + 23 + 24 + 25 + 26 + 27 + 28 + 29 + 30 + 31 + +
+
+
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/checkbox.html b/pages/checkbox.html new file mode 100644 index 0000000..26c1d87 --- /dev/null +++ b/pages/checkbox.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Checkbox

+ + + + + + +
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/histogram.html b/pages/histogram.html new file mode 100644 index 0000000..7f5bacc --- /dev/null +++ b/pages/histogram.html @@ -0,0 +1,90 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Histogram

+
+
+
Total orders
+
View all
+
+
+
50254
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/input.html b/pages/input.html new file mode 100644 index 0000000..5858123 --- /dev/null +++ b/pages/input.html @@ -0,0 +1,140 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Input

+ + + + + + + +
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/modal.html b/pages/modal.html new file mode 100644 index 0000000..adcd650 --- /dev/null +++ b/pages/modal.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Modal

+
+ +
+ + +
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/radio.html b/pages/radio.html new file mode 100644 index 0000000..4db7445 --- /dev/null +++ b/pages/radio.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Radio

+
+ + + + + +
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/skeleton.html b/pages/skeleton.html new file mode 100644 index 0000000..b55812e --- /dev/null +++ b/pages/skeleton.html @@ -0,0 +1,83 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Skeleton

+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/template.html b/pages/template.html index fe6b768..eb335f7 100644 --- a/pages/template.html +++ b/pages/template.html @@ -40,66 +40,26 @@
Components
- Modal - Tooltip + Accordion Avatar + Button Calendar + Checkbox Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip
-

Calendar

-
-
Июль 2021
-
-
- Пн - Вт - Ср - Чт - Пт - Сб - Вс - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15 - 16 - 17 - 18 - 19 - 20 - 22 - 23 - 24 - 25 - 26 - 27 - 28 - 29 - 30 - 31 - -
-
-
+

Component

+
diff --git a/pages/toggler.html b/pages/toggler.html new file mode 100644 index 0000000..ba2a102 --- /dev/null +++ b/pages/toggler.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Toggler

+
+
+ toggler + + + + +
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file diff --git a/pages/tooltip.html b/pages/tooltip.html new file mode 100644 index 0000000..93f9c09 --- /dev/null +++ b/pages/tooltip.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + +
+
Components
+ Accordion + Avatar + Button + Calendar + Checkbox + Histogram + Input + Modal + Radio + Skeleton + Toggler + Tooltip +
+
+
+
+
+

Tooltip

+
+ +
+ + + +
+
Helper Text
+ +
+
+ +
+ +
Reusable component library
+
+ + + \ No newline at end of file From 1f37e698e3aa391c57f2a03ccc3864cd196fdfd8 Mon Sep 17 00:00:00 2001 From: Urii Frolkin Date: Sun, 22 Aug 2021 23:03:04 +0200 Subject: [PATCH 04/12] main page ver.1 --- 03-lection1/01-button/button.css | 2 +- 05-lection3/01-tooltip/index.html | 1 + 05-lection3/01-tooltip/tooltip.css | 22 +- 05-lection3/02-modal/modal.css | 3 +- 05-lection3/03-calendar/calendar.css | 4 +- 07-lection5/01-checkbox/checkbox.css | 2 +- 07-lection5/02-radio/radio.css | 2 +- 07-lection5/04-input/input.css | 1 - .../01-theme-changer/theme-changer-main.js | 6 + assets/css/burger.css | 78 ++++- assets/css/main.css | 5 + assets/css/template.css | 111 ++++-- assets/images/sprite.svg | 5 +- components/card/card.css | 44 +-- components/footer/footer.css | 2 +- components/header/header.css | 26 +- components/preview/preview.css | 18 +- index.html | 331 ++---------------- pages/accordion.html | 78 +++-- pages/avatar.html | 71 +++- pages/burger-menu.js | 2 - pages/button.html | 71 +++- pages/calendar.html | 71 +++- pages/checkbox.html | 71 +++- pages/histogram.html | 71 +++- pages/input.html | 71 +++- pages/modal.html | 73 +++- pages/radio.html | 71 +++- pages/skeleton.html | 89 ++++- pages/template.html | 71 +++- pages/toggler.html | 78 +++-- pages/tooltip.html | 71 +++- 32 files changed, 961 insertions(+), 661 deletions(-) create mode 100644 10-lection8/01-theme-changer/theme-changer-main.js diff --git a/03-lection1/01-button/button.css b/03-lection1/01-button/button.css index bd1d47a..764b972 100644 --- a/03-lection1/01-button/button.css +++ b/03-lection1/01-button/button.css @@ -3,7 +3,7 @@ .button { padding: 0; - margin:5px; + margin:0; box-sizing: border-box; box-shadow: none; outline: none; diff --git a/05-lection3/01-tooltip/index.html b/05-lection3/01-tooltip/index.html index c867744..5f39317 100644 --- a/05-lection3/01-tooltip/index.html +++ b/05-lection3/01-tooltip/index.html @@ -16,6 +16,7 @@ +
diff --git a/05-lection3/01-tooltip/tooltip.css b/05-lection3/01-tooltip/tooltip.css index d712bef..a52befd 100644 --- a/05-lection3/01-tooltip/tooltip.css +++ b/05-lection3/01-tooltip/tooltip.css @@ -2,10 +2,14 @@ .tooltip { display: block; position:relative; + height: 100px; } .tooltip__trigger { - + display: flex; + flex-direction: column; + align-items: center; + padding-top: 0px; } .tooltip__help { @@ -27,20 +31,6 @@ text-align: center; display: none; - /* - height: 45px; - border-radius: 10px; - background: var(--primary); - position: absolute; - bottom: 100%; - transform: translate(-50%, -10px); - left: 50%; - color: var(--white); - padding: 13px 21px; - opacity: 0; - transition: opacity 0.2s linear, transform 0.1s linear; - pointer-events: none; - */ } .tooltip__help:before { content: ""; @@ -59,4 +49,4 @@ width: 24px; height: 24px; color: var(--primary); -} \ No newline at end of file +} diff --git a/05-lection3/02-modal/modal.css b/05-lection3/02-modal/modal.css index d310d84..b9535de 100644 --- a/05-lection3/02-modal/modal.css +++ b/05-lection3/02-modal/modal.css @@ -29,6 +29,7 @@ right: 16px; top: 10px; cursor:pointer; + color:var(--modal-text); } @@ -47,7 +48,7 @@ .modal__prompt { - color: var(--gray-4); + color: var(--modal-text); font-family: Inter; font-style: normal; font-weight: 400; diff --git a/05-lection3/03-calendar/calendar.css b/05-lection3/03-calendar/calendar.css index a1cae8d..d6272e4 100644 --- a/05-lection3/03-calendar/calendar.css +++ b/05-lection3/03-calendar/calendar.css @@ -6,7 +6,7 @@ width: 100%; max-height:280px; max-width: 265px; - margin:auto; + margin:0; } .calendar__title { @@ -16,7 +16,7 @@ line-height: 18px; color: var(--calendar); text-align: center; - margin: 0 auto; + margin: 0; } .calendar__item { display: flex; diff --git a/07-lection5/01-checkbox/checkbox.css b/07-lection5/01-checkbox/checkbox.css index cee31e3..d530d12 100644 --- a/07-lection5/01-checkbox/checkbox.css +++ b/07-lection5/01-checkbox/checkbox.css @@ -1,6 +1,6 @@ .checkbox { display: block; - margin:20px; + margin:0; } .checkbox__input { diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css index f611531..ae81b2d 100644 --- a/07-lection5/02-radio/radio.css +++ b/07-lection5/02-radio/radio.css @@ -1,6 +1,6 @@ .radio { display: block; - margin:20px; + margin:0; } .radio__input { diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css index e97cd0a..9b5d2d4 100644 --- a/07-lection5/04-input/input.css +++ b/07-lection5/04-input/input.css @@ -73,7 +73,6 @@ font-size: 16px; line-height: 24px; color: var(--grey-4); - margin-left: 12px; } .input__icon-invalid, .input__icon-success { diff --git a/10-lection8/01-theme-changer/theme-changer-main.js b/10-lection8/01-theme-changer/theme-changer-main.js new file mode 100644 index 0000000..8cc36b5 --- /dev/null +++ b/10-lection8/01-theme-changer/theme-changer-main.js @@ -0,0 +1,6 @@ +const changer_main = document.getElementById('theme-changer-main'); +const html_main = document.documentElement; + +changer_main.addEventListener('change', function() { + html_main.toggleAttribute('data-theme-dark'); +}); diff --git a/assets/css/burger.css b/assets/css/burger.css index a654643..b1615c2 100644 --- a/assets/css/burger.css +++ b/assets/css/burger.css @@ -1,52 +1,94 @@ +.burger{ + display: block; + width: 100%; + height: 100%; +} + + .burger__menu{ - padding: 20px; + display: flex; + flex-direction: column; + align-items: flex-start; + padding:20px; background: var(--white); position:fixed; - /* position:relative;*/ top:0px; - left:0; + left:0px; width:100vw; height:100vw; transform:translateX(-100vw); transition: transform 200ms ease-in-out; box-sizing: border-box; } - -.burger__menu-open { - display:block; - margin: 20px; - color: var(--black); - } .burger__menu-close { margin: 0px; color: var(--black); + height: 42px; + width: 36px; } .burger__menu[data-open]{ transform:translateX(0); } + +.burger__switch { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 0px; + color: var(--black); + height: 32px; + width: 200px; + right:24px; +} + +.burger__toggler { + margin: 0px; + color: var(--black); + height: 24px; + width: 52px; +} + .burger__container { display: flex; flex-direction: column; align-items: flex-start; + width:100%; height: 100%; - font-family: Inter; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; } + .burger__container-title { - display: block; + padding: 0px; + display: inline; font-family: Inter; font-style: normal; font-weight: 600; font-size: 20px; line-height: 24px; + color: var(--grey-3); } - .burger{ - display: block; - width: 100%; + + .burger__container-href { + font-family: Inter; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-decoration:none; + color: var(--grey-3); + } + .burger__container-href:active { + color:var(--red); } + @media screen and (min-width:768px) { + .burger__switch{ + display: none; + } +} + + + + diff --git a/assets/css/main.css b/assets/css/main.css index b61df36..8bb7170 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -27,6 +27,8 @@ --calendar: #334D6E; --modal:#C4C4C4; --active-text-color: var(--black); + --black-logo: #212429; + --modal-text: var(--grey-4); } @@ -65,7 +67,10 @@ html[data-theme-dark] { --grey-bg: #444444; --active-text-color: var(--black); + --modal:#C4C4C4; + --modal-text:#ffffff; } .main { display: block; + background-color: var(--grey-1); } \ No newline at end of file diff --git a/assets/css/template.css b/assets/css/template.css index 9d78e33..0efa430 100644 --- a/assets/css/template.css +++ b/assets/css/template.css @@ -1,41 +1,110 @@ .page { - background-color: var(--main); - height: 100%; display: grid; grid-template-rows: auto 1fr auto; - gap: 0px; + place-items: center; + background-color: var(--grey-1); + grid-gap:16px; + } + .page__header{ - display:flex; + + display:grid; + grid-template-columns: 60px 1fr; + justify-items: center; align-items: center; - justify-items:end; height: 64px; + width: 100%; background-color: var(--grey-1); } -.page__icon{ - margin: 0 auto; +.page__icon-burger { color: var(--black); - width: 128px; - height: 32px; - } + height: 24px; + width: 24px; +} +.page__header{ + display:grid; + grid-template-columns: 60px 1fr; + justify-items: center; + align-items: center; + height: 64px; + width: 100%; + background-color: var(--grey-1); +} .page__main { display: grid; - grid-template-columns: auto 1fr; - grid-column-gap: 20px; + width: 100%; + grid-template-columns: auto 1fr 20px; + grid-gap: 16px; + place-items: center; background-color: var(--grey-1); - place-content: center; } +.page__icon-logo{ + margin: 0 auto; + color: var(--black-logo); + height: 32px; + width: 112px; + } + .header__switch { + justify-self:self-end; + display:flex; + flex-direction: row; + justify-content: space-between; + align-content:center; + margin: 0px; + color: var(--black); + height: 32px; + width: 180px; + right:24px; + } + .header__switch-icon { + display:inline; + margin: 10px; + color: var(--black); + height: 24px; + width: 24px; + } + .header__toggler { + display:inline-block; + margin: 10px; + color: var(--black); + height: 24px; + width: 52px; +} + + @media screen and (max-width:768px) { + .header__switch{ + display: none; + } +} + +@media screen and (min-width:768px) { + .page__header{ + grid-template-columns: 60px 136px 1fr; + } + + .page__main { + grid-template-columns: auto 1fr 20px; + grid-gap: 40px; + } + .page__footer { + height: 130px; + } + +} + + .page__footer { - text-transform: uppercase; - height: 130px; display: flex; - justify-content: center; + flex-direction: row; align-items: center; - letter-spacing: 0.04em; + justify-items: center; + text-transform: uppercase; + height: 80px; color:var(--grey-4); font-size: 12px; line-height: 18px; @@ -45,19 +114,19 @@ width:40px; background-color: var(--grey-1); overflow: hidden; + height: 100%; z-index: 1; } .component { display: block; - margin:40px; background-color: var(--white); - width: 400px; + padding:20px; + width: 100%; } .component__title { - margin: 40px; + margin: 0px; height: 40px; - /* text-align: center;*/ font-family: Inter; font-style: normal; font-weight: 500; diff --git a/assets/images/sprite.svg b/assets/images/sprite.svg index b242d17..b82cb15 100644 --- a/assets/images/sprite.svg +++ b/assets/images/sprite.svg @@ -21,11 +21,10 @@ - - + + - diff --git a/components/card/card.css b/components/card/card.css index 421598a..fb01cdb 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -1,33 +1,3 @@ -/* -.card { - display: flex; - flex-direction: row; - align-items:inherit; - flex-basis: 350px; - width:350; - border-radius: 12px; - background-color: var( --white); - box-shadow: 0px 2px 4px rgba(33, 36, 41, 0.05); - height: 367px; -} - -.card__title { - - width:150; - font-family: Roboto; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 24px; - color: var(--black); - text-align: center; - margin: 0 auto; - vertical-align: bottom; - margin-bottom: 30px; - -} -*/ - .card { background: var(--white); box-shadow: 0 2px 4px rgba(33, 36, 41, 0.05); @@ -35,16 +5,28 @@ padding: 2rem; display: flex; flex-direction: column; - min-width:350px; + width:100%; + /* flex-basis: 350px;*/ } .card__body { display: flex; + flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; + width:100%; } +@media screen and (min-width:768px) { + .card__body{ + min-height: 350px; + } + .card{ + width:350px; + + } +} .card__title { margin-top: 1.5rem; display: flex; diff --git a/components/footer/footer.css b/components/footer/footer.css index 5312057..3542137 100644 --- a/components/footer/footer.css +++ b/components/footer/footer.css @@ -21,7 +21,7 @@ font-size: 16px; line-height: 24px; text-align: center; - width: 640px; + width: 90%; margin: 0 auto; margin-bottom: 136px; color:var(--grey-2); diff --git a/components/header/header.css b/components/header/header.css index 24a6fec..d256baa 100644 --- a/components/header/header.css +++ b/components/header/header.css @@ -7,12 +7,11 @@ } .header__title { - padding: 24px 0px 0px; - /*font-family: Inter;*/ + /* padding: 24px 0px 0px;*/ font-style: normal; font-weight: 500; font-size: 50px; - line-height: 24px; + line-height: 54px; color:var(--black); margin-left: 16px; } @@ -28,11 +27,14 @@ width: 128px; } .header__switch { - display:inline-block; - margin: 24px; + display:flex; + flex-direction: row; + justify-content: space-between; + align-content:center; + margin: 0px; color: var(--black); height: 32px; - width: 200px; + width: 180px; right:24px; } .header__switch-icon { @@ -48,14 +50,4 @@ color: var(--black); height: 24px; width: 52px; -} - - - -@media all and (min-width: 768px) { - .header__inner { - display: flex; - justify-content: space-between; - } -} - +} \ No newline at end of file diff --git a/components/preview/preview.css b/components/preview/preview.css index e39cbb3..1fa8199 100644 --- a/components/preview/preview.css +++ b/components/preview/preview.css @@ -2,14 +2,16 @@ display:flex; flex-wrap: wrap; gap: 30px; + background-color: var(--grey-1); + margin:20px; } - -.preview-element { - display:flex; +.page { + background-color: var(--white); + display: flex; flex-direction: column; - align-items: center; - justify-content:center; - flex: 1 1 100%; - gap: 10px; - + +} +.page__box { + width: 90%; + margin: 0 auto; } \ No newline at end of file diff --git a/index.html b/index.html index 49da0c3..b859e51 100644 --- a/index.html +++ b/index.html @@ -30,79 +30,43 @@ html,body { height: 100%; } - .page { - background-color: var(--white); - display: flex; - flex-direction: column; - height: 100%; - } - .page__box { - max-width: 1110px; - width: 100%; - margin: 0 auto; - } +
-
- -
- - - - - -
-
-
-
+
+
@@ -121,25 +85,7 @@

Reusable component library

Tooltip
-
-
-
- -
- - -
-
Modal dialog
-
+
@@ -169,6 +115,7 @@

Reusable component library

Histogram
+
@@ -284,41 +231,9 @@

Reusable component library

Calendar
-
-
-
+ - -
-
-
- -
-
-
- -
- - - -
-
Helper Text
- -
- -
-
Tooltip
-
- -
-
-
- -
- -
-
Avatar
-
+
@@ -340,56 +255,7 @@

Reusable component library

-
-
-
-
- checkbox - - - - - -
-
- -
-
Custom form elements
-
- +
@@ -438,15 +304,7 @@

Reusable component library

Custom form elements
-
-
-
- - -
-
-
- +
@@ -497,61 +355,7 @@

Reusable component library

Custom form elements
-
-
-
-
Июль 2021
-
-
- Пн - Вт - Ср - Чт - Пт - Сб - Вс - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15 - 16 - 17 - 18 - 19 - 20 - 22 - 23 - 24 - 25 - 26 - 27 - 28 - 29 - 30 - 31 - -
-
-
- -
-
Calendar
-
- +
@@ -655,65 +459,7 @@

Reusable component library

Custom form elements
-
-
-
- -
- -
-
- -
-
-
- -
- - -
-
Modal dialog
-
- -
-
-
-
-
Total orders
-
View all
-
-
-
50254
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
Histogram
-
- - - +
@@ -723,7 +469,7 @@

Reusable component library

Accordion item 1 - + @@ -735,7 +481,7 @@

Reusable component library

Accordion item 2 - +

@@ -746,7 +492,7 @@

Reusable component library

Accordion item 3 - +

@@ -763,13 +509,8 @@

Reusable component library

- - -
-
+
-
-