From d8b23563ef7ffdd9488382b5c7e3df4f6dbd492f Mon Sep 17 00:00:00 2001 From: Ivan Sinchuk <000cuiquesuum000@gmail.com> Date: Wed, 31 Aug 2022 05:01:52 +0300 Subject: [PATCH 1/3] Created HTML CSS Popup --- submissions/sinchUK/HTML-CSS-Popup/index.html | 167 ++++++++++++++++++ submissions/sinchUK/HTML-CSS-Popup/styles.css | 155 ++++++++++++++++ 2 files changed, 322 insertions(+) create mode 100644 submissions/sinchUK/HTML-CSS-Popup/index.html create mode 100644 submissions/sinchUK/HTML-CSS-Popup/styles.css diff --git a/submissions/sinchUK/HTML-CSS-Popup/index.html b/submissions/sinchUK/HTML-CSS-Popup/index.html new file mode 100644 index 0000000000..e6e1b4b59a --- /dev/null +++ b/submissions/sinchUK/HTML-CSS-Popup/index.html @@ -0,0 +1,167 @@ + + + + + + + + + + + Popup + + +
+ +
+ + diff --git a/submissions/sinchUK/HTML-CSS-Popup/styles.css b/submissions/sinchUK/HTML-CSS-Popup/styles.css new file mode 100644 index 0000000000..2af30f17ed --- /dev/null +++ b/submissions/sinchUK/HTML-CSS-Popup/styles.css @@ -0,0 +1,155 @@ +body { + font-size: 14px; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; +} + /** HEADER **/ +::-webkit-scrollbar { + width: 0px; + fill: #757575; +} +.menu-items { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 2px; + height: 30px; +} +.menu-item { + border: 2px solid transparent; + margin: 0px 15px; + list-style: none; + padding: 3px 3px 0px; +} +.menu-item a:focus-visible, .menu-item img:focus-visible, .menu-item input:focus-visible { + outline: 2px solid #a6c8ff; + border-radius: 1px; +} +.menu-item a { + text-decoration: none; + color: #757575; +} +.menu-item img { + box-sizing: border-box; + width: 25px; +} +.tooltip { + text-align: left; + position: absolute; + top: 65px; + width: 300px; + height: 475px; + overflow-y: scroll; + overflow-x: hidden; + z-index: 1; + box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; + transition: height 0.3s ease-in-out 0s; + right: 115px; + max-height: calc(-65px + 100vh); + visibility: hidden; +} +.menu-item__input { + width: 17px; + position: absolute; + height: 17px; + appearance: none; + top: 19px; +} +.menu-item__input:focus ~.menu-item { + border: 2px solid #a6c8ff; + border-radius: 3px; +} +.menu-item__input:checked ~.tooltip { + visibility: visible; + opacity: 1; +} +.menu-item__inner .tooltip::before { + content: ""; + position: absolute; + bottom: 100%; + left: 80%; + margin-left: -7px; + border:10px solid #000; + border-color: transparent transparent white transparent; +} +.tooltip-items { + padding: 50px 20px 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.tooltip-item { + width: 80px; + height: 80px; + margin-bottom: 15px; +} +.tooltip-item:hover { + border: 1px solid lightgray; + box-sizing: border-box; +} +.tooltip-item:focus { + border: 1px solid lightblue; + box-sizing: border-box; +} +.tooltip-item a { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + flex-wrap: wrap; + list-style: none; + text-decoration: none; + justify-content: space-around; + align-items: center; +} +.tooltip-item a img { + width: 45px; + margin-bottom: 15px; +} +.tooltip-item .width-30 { + width: 30px; +} +.tooltip-item .width-65 { + width: 65px; +} +.tooltip-more-box { + display: none; + flex-wrap: wrap; +} +.tooltip-more-btn { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + height: 35px; + background-color: #f5f5f5; +} +.tooltip-more__input { + position: absolute; + width: 100%; + height: 35px; + appearance: none; + margin: 0px; +} +.tooltip-more { + width: 100%; + display: flex; + padding: 10px 20px; + justify-content: space-between; + flex-wrap: wrap; +} +.tooltip-more__input:checked ~.tooltip-more-box { + display: flex; + justify-content: space-between; +} +.tooltip-more__input:checked +.tooltip-more-btn{ + display: none; +} +.tooltip-more__input:checked { + display: none; +} +.tooltip-more__input:checked ~.tooltip { + overflow: scroll; +} From 9e718fd93fbe40e737c14541e941bad699c296d2 Mon Sep 17 00:00:00 2001 From: Ivan Sinchuk <000cuiquesuum000@gmail.com> Date: Fri, 2 Sep 2022 03:15:25 +0300 Subject: [PATCH 2/3] Fixed mistake element and added scrollbar in popup --- submissions/sinchUK/HTML-CSS-Popup/index.html | 4 +- submissions/sinchUK/HTML-CSS-Popup/styles.css | 63 +++++++++++++++++-- 2 files changed, 60 insertions(+), 7 deletions(-) diff --git a/submissions/sinchUK/HTML-CSS-Popup/index.html b/submissions/sinchUK/HTML-CSS-Popup/index.html index e6e1b4b59a..93ef617e16 100644 --- a/submissions/sinchUK/HTML-CSS-Popup/index.html +++ b/submissions/sinchUK/HTML-CSS-Popup/index.html @@ -147,7 +147,9 @@ - ` + + +
  • diff --git a/submissions/sinchUK/HTML-CSS-Popup/styles.css b/submissions/sinchUK/HTML-CSS-Popup/styles.css index 2af30f17ed..e7c752e42d 100644 --- a/submissions/sinchUK/HTML-CSS-Popup/styles.css +++ b/submissions/sinchUK/HTML-CSS-Popup/styles.css @@ -5,8 +5,12 @@ body { } /** HEADER **/ ::-webkit-scrollbar { - width: 0px; + width: 15px; fill: #757575; + background: #f5f5f5; +} +::-webkit-scrollbar-thumb { + background: #c1c1c1; } .menu-items { display: flex; @@ -40,7 +44,6 @@ body { top: 65px; width: 300px; height: 475px; - overflow-y: scroll; overflow-x: hidden; z-index: 1; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; @@ -144,12 +147,60 @@ body { display: flex; justify-content: space-between; } -.tooltip-more__input:checked +.tooltip-more-btn{ +.tooltip-more__input:checked +.tooltip-more-btn { display: none; } -.tooltip-more__input:checked { +.hidden { display: none; } -.tooltip-more__input:checked ~.tooltip { - overflow: scroll; +.tooltip-more__input:checked ~ .more-btn { + display: flex; + background-color: transparent; +} +.tooltip-more__input:checked { + display: block; +} + /* Buttons */ +::-webkit-scrollbar-button:single-button { + display: block; + height: 13px; + width: 16px; +} +::-webkit-scrollbar { + width: 18px; + height: 18px; +} +::-webkit-scrollbar-track { + background-color: #f1f1f1; +} +::-webkit-scrollbar-thumb { + background-color: #c1c1c1; + background-clip: padding-box; + border: 2px solid transparent; +} +::-webkit-scrollbar-thumb:hover { + background-color: rgb(168, 166, 166); +} +::-webkit-scrollbar-thumb:active { + background-color: rgb(148, 146, 146); +} +/* Buttons */ +::-webkit-scrollbar-button:single-button { + display: block; + background-size: 10px; + background-repeat: no-repeat; +} +/* Up */ +::-webkit-scrollbar-button:single-button:vertical:decrement { + height: 12px; + width: 16px; + background-position: center 4px; + background-image: url("data:image/svg+xml;utf8,"); +} +/* Down */ +::-webkit-scrollbar-button:single-button:vertical:increment { + height: 12px; + width: 16px; + background-position: center 2px; + background-image: url("data:image/svg+xml;utf8,"); } From 106e0fd7ca6989cea60bf813bfe3d6bd1411d2e4 Mon Sep 17 00:00:00 2001 From: Ivan Sinchuk <000cuiquesuum000@gmail.com> Date: Fri, 2 Sep 2022 04:35:14 +0300 Subject: [PATCH 3/3] Fixed media size popup and refactor css rules --- submissions/sinchUK/HTML-CSS-Popup/index.html | 79 +++++++++++++------ submissions/sinchUK/HTML-CSS-Popup/styles.css | 28 +++---- 2 files changed, 70 insertions(+), 37 deletions(-) diff --git a/submissions/sinchUK/HTML-CSS-Popup/index.html b/submissions/sinchUK/HTML-CSS-Popup/index.html index 93ef617e16..125002468e 100644 --- a/submissions/sinchUK/HTML-CSS-Popup/index.html +++ b/submissions/sinchUK/HTML-CSS-Popup/index.html @@ -27,82 +27,105 @@
  • - submenu-icon + submenu-icon
    - Calendar +
    + Calendar +
    Calendar
    - Mail +
    + Mail +
    Mail
    - News +
    + News +
    News
    - Map +
    + Map +
    Map
    - Files +
    + Files +
    Files
    - Contacts +
    + Contacts +
    Contacts
    - Translate +
    + Translate +
    Translate
    - Videos +
    + Videos +
    Videos
    - Search +
    + Search +
    Search
    - Photo +
    + Photo +
    Photo
    - Apps +
    + Apps +
    Apps
    - Document +
    + Document +
    Document
    -
    @@ -111,37 +134,49 @@
    - Chat +
    + Chat +
    Chat
    - Classroom +
    + Classroom +
    Classroom
    - Collection +
    + Collection +
    Collection
    - Mars +
    + Mars +
    Mars
    - Blogs +
    + Blogs +
    Blogs
    - Promos +
    + Promos +
    Promos
    @@ -154,12 +189,12 @@
  • - notification-icon + notification-icon
  • - avatar-icon + avatar-icon
    • diff --git a/submissions/sinchUK/HTML-CSS-Popup/styles.css b/submissions/sinchUK/HTML-CSS-Popup/styles.css index e7c752e42d..2e904ecec4 100644 --- a/submissions/sinchUK/HTML-CSS-Popup/styles.css +++ b/submissions/sinchUK/HTML-CSS-Popup/styles.css @@ -34,7 +34,7 @@ body { text-decoration: none; color: #757575; } -.menu-item img { +.menu-item-img { box-sizing: border-box; width: 25px; } @@ -42,13 +42,13 @@ body { text-align: left; position: absolute; top: 65px; - width: 300px; + width: 320px; height: 475px; overflow-x: hidden; z-index: 1; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; transition: height 0.3s ease-in-out 0s; - right: 115px; + right: 95px; max-height: calc(-65px + 100vh); visibility: hidden; } @@ -104,12 +104,8 @@ body { flex-wrap: wrap; list-style: none; text-decoration: none; - justify-content: space-around; align-items: center; -} -.tooltip-item a img { - width: 45px; - margin-bottom: 15px; + justify-content: space-between; } .tooltip-item .width-30 { width: 30px; @@ -159,12 +155,6 @@ body { } .tooltip-more__input:checked { display: block; -} - /* Buttons */ -::-webkit-scrollbar-button:single-button { - display: block; - height: 13px; - width: 16px; } ::-webkit-scrollbar { width: 18px; @@ -184,9 +174,11 @@ body { ::-webkit-scrollbar-thumb:active { background-color: rgb(148, 146, 146); } -/* Buttons */ + /* Buttons */ ::-webkit-scrollbar-button:single-button { display: block; + height: 13px; + width: 16px; background-size: 10px; background-repeat: no-repeat; } @@ -204,3 +196,9 @@ body { background-position: center 2px; background-image: url("data:image/svg+xml;utf8,"); } +@media only screen and (max-width: 768px) { + .tooltip { + right: 15px; + width: 300px; + } +}