diff --git a/submissions/sinchUK/HTML-CSS-Popup/index.html b/submissions/sinchUK/HTML-CSS-Popup/index.html new file mode 100644 index 0000000000..125002468e --- /dev/null +++ b/submissions/sinchUK/HTML-CSS-Popup/index.html @@ -0,0 +1,204 @@ + + + + + + + + + + + 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..2e904ecec4 --- /dev/null +++ b/submissions/sinchUK/HTML-CSS-Popup/styles.css @@ -0,0 +1,204 @@ +body { + font-size: 14px; + font-family: 'Roboto', sans-serif; + box-sizing: border-box; +} + /** HEADER **/ +::-webkit-scrollbar { + width: 15px; + fill: #757575; + background: #f5f5f5; +} +::-webkit-scrollbar-thumb { + background: #c1c1c1; +} +.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: 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: 95px; + 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; + align-items: center; + justify-content: space-between; +} +.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; +} +.hidden { + display: none; +} +.tooltip-more__input:checked ~ .more-btn { + display: flex; + background-color: transparent; +} +.tooltip-more__input:checked { + display: block; +} +::-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; + height: 13px; + width: 16px; + 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,"); +} +@media only screen and (max-width: 768px) { + .tooltip { + right: 15px; + width: 300px; + } +}