From: Vincent Vanwaelscappel Date: Tue, 6 Dec 2022 07:44:01 +0000 (+0100) Subject: wait #5624 @0.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=35094a96e1071e6c4dca114ed727adff5ee7b992;p=Animations.git wait #5624 @0.5 --- diff --git a/Michelin/Michelin.zip b/Michelin/Michelin.zip index a11481f..1ca800b 100644 Binary files a/Michelin/Michelin.zip and b/Michelin/Michelin.zip differ diff --git a/Michelin/index.html b/Michelin/index.html index 9a3b2c2..6b8bfa3 100644 --- a/Michelin/index.html +++ b/Michelin/index.html @@ -50,7 +50,7 @@
- + diff --git a/Michelin/style.css b/Michelin/style.css index 836051f..024a231 100644 --- a/Michelin/style.css +++ b/Michelin/style.css @@ -3,6 +3,17 @@ margin: 0; box-sizing: border-box; } +::-webkit-scrollbar { + width: 9px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.5); + border-radius: 20px; + border: transparent; +} body { font-family: "Open Sans", Arial, Helsans-serif, sans-serif; color: #fff; @@ -172,7 +183,7 @@ header ul li.active.last::after { display: none; } #holder { - width: 320px; + width: 100%; margin: 0 auto; overflow: hidden; position: relative; diff --git a/Michelin/style.css.map b/Michelin/style.css.map index ef12334..b3db01a 100644 --- a/Michelin/style.css.map +++ b/Michelin/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.less"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.less"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/Michelin/style.less b/Michelin/style.less index 1e97eb2..64021c2 100644 --- a/Michelin/style.less +++ b/Michelin/style.less @@ -1,221 +1,235 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; + padding: 0; + margin: 0; + box-sizing: border-box; +} + +::-webkit-scrollbar { + width: 9px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.5); + border-radius: 20px; + border: transparent; } body { - font-family: "Open Sans", Arial, Helsans-serif, sans-serif; - color: #fff; - background-color: #004f9e; - font-size: 16px; + font-family: "Open Sans", Arial, Helsans-serif, sans-serif; + color: #fff; + background-color: #004f9e; + font-size: 16px; } h2 { - font-size: 16px; - font-weight: 400; - height: 60px; - padding: 18px 30px; + font-size: 16px; + font-weight: 400; + height: 60px; + padding: 18px 30px; } form { - .field { - display: none; - padding: 40px 0; - - &.select { - padding: 40px 20px; - } - } - - select { - width: 100%; - padding: 20px; - border: 0; - font-size: 16px; - } + .field { + display: none; + padding: 40px 0; + + &.select { + padding: 40px 20px; + } + } + + select { + width: 100%; + padding: 20px; + border: 0; + font-size: 16px; + } } #noresult { - padding: 40px 20px; + padding: 40px 20px; } #results { - padding: 40px 0; + padding: 40px 0; - li { - .list-item(); - } + li { + .list-item(); + } } .selectlist { - li { - .list-item(); + li { + .list-item(); - label { - input { - visibility: hidden; - position: absolute; - } + label { + input { + visibility: hidden; + position: absolute; + } - img { - vertical-align: middle; - margin-right: 15px; - } + img { + vertical-align: middle; + margin-right: 15px; + } - height: 82px; + height: 82px; - &:after { - top: 33px; - } - } - } + &:after { + top: 33px; + } + } + } } header { - position: relative; - white-space: nowrap; - font-size: 0; - - ul { - display: inline; - - &.tyre, &.set { - display: none; - } - - li { - position: relative; - font-size: 16px; - display: inline-block; - width: 320px; - height: 50px; - list-style: none; - color: rgba(255, 255, 255, 0.2); - background-color: #004f9e; - background-image: linear-gradient(to left, #4974B8 0%, #004f9e 10%, #004f9e 90%, #4974B8 100%); - font-weight: bold; - padding: 14px 14px 14px 70px; - z-index: 2; - overflow: hidden; - - &.previous { - left: 30px; - } - - &.next { - padding-left: 14px; - left: -30px; - } - - &.active { - background-image: none; - background-color: #FCE500; - color: #000; - z-index: 1; - left: 0; - - &::after, &::before { - content: ""; - position: absolute; - top: -1px; - display: block; - height: 52px; - width: 26px; - - background-position: 0 0; - background-size: auto 100%; - - } - - &::after { - background-image: url("images/arrow-header-right.svg"); - right: 30px; - } - - &::before { - background-image: url("images/arrow-header-left.svg"); - left: 30px; - } - - &.first { - padding-left: 14px; - - &::before { - display: none; - } - } - - &.last { - &::after { - display: none; - } - } - } - } - } + position: relative; + white-space: nowrap; + font-size: 0; + + ul { + display: inline; + + &.tyre, &.set { + display: none; + } + + li { + position: relative; + font-size: 16px; + display: inline-block; + width: 320px; + height: 50px; + list-style: none; + color: rgba(255, 255, 255, 0.2); + background-color: #004f9e; + background-image: linear-gradient(to left, #4974B8 0%, #004f9e 10%, #004f9e 90%, #4974B8 100%); + font-weight: bold; + padding: 14px 14px 14px 70px; + z-index: 2; + overflow: hidden; + + &.previous { + left: 30px; + } + + &.next { + padding-left: 14px; + left: -30px; + } + + &.active { + background-image: none; + background-color: #FCE500; + color: #000; + z-index: 1; + left: 0; + + &::after, &::before { + content: ""; + position: absolute; + top: -1px; + display: block; + height: 52px; + width: 26px; + + background-position: 0 0; + background-size: auto 100%; + + } + + &::after { + background-image: url("images/arrow-header-right.svg"); + right: 30px; + } + + &::before { + background-image: url("images/arrow-header-left.svg"); + left: 30px; + } + + &.first { + padding-left: 14px; + + &::before { + display: none; + } + } + + &.last { + &::after { + display: none; + } + } + } + } + } } #holder { - width: 320px; - margin: 0 auto; - overflow: hidden; - position: relative; - padding-bottom: 20px; + width: 100%; + margin: 0 auto; + overflow: hidden; + position: relative; + padding-bottom: 20px; } #back { - cursor: pointer; - color: #fff; - text-decoration: none; - position: absolute; - left: 20px; - bottom: 20px; - - &:before { - content: ''; - display: inline-block; - width: 10px; - height: 16px; - background-image: url("images/back.svg"); - margin-right: 20px; - position: relative; - top: 1px - } + cursor: pointer; + color: #fff; + text-decoration: none; + position: absolute; + left: 20px; + bottom: 20px; + + &:before { + content: ''; + display: inline-block; + width: 10px; + height: 16px; + background-image: url("images/back.svg"); + margin-right: 20px; + position: relative; + top: 1px + } } .list-item { - list-style: none; - - a, label { - display: block; - padding: 15px 20px; - color: #fff; - text-decoration: none; - cursor: pointer; - position: relative; - transition: background-color 300ms; - - &:hover { - background-color: #4874b9; - } - - &::after { - content: ''; - position: absolute; - height: 15px; - width: 10px; - top: 18px; - right: 20px; - background-image: url("images/list.svg"); - } - } + list-style: none; + + a, label { + display: block; + padding: 15px 20px; + color: #fff; + text-decoration: none; + cursor: pointer; + position: relative; + transition: background-color 300ms; + + &:hover { + background-color: #4874b9; + } + + &::after { + content: ''; + position: absolute; + height: 15px; + width: 10px; + top: 18px; + right: 20px; + background-image: url("images/list.svg"); + } + } } #preload { - opacity: 0; - position: absolute; - pointer-events: none; + opacity: 0; + position: absolute; + pointer-events: none; } \ No newline at end of file