This is an automated email from the ASF dual-hosted git repository. kamilbregula pushed a commit to branch aip-11 in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push: new 8be273a Add ordered and unordered list components (#72) 8be273a is described below commit 8be273ac6d21a07a81aab4d1527df2ba96661ffe Author: Kamil Gabryjelski <kamil.gabryjel...@gmail.com> AuthorDate: Fri Oct 11 21:40:20 2019 +0200 Add ordered and unordered list components (#72) --- landing-pages/site/assets/scss/_ol-ul.scss | 79 ++++++++++++++++++++++ landing-pages/site/assets/scss/main-custom.scss | 1 + landing-pages/site/content/en/examples/_index.html | 16 +++++ landing-pages/site/static/icons/tick.svg | 8 +++ 4 files changed, 104 insertions(+) diff --git a/landing-pages/site/assets/scss/_ol-ul.scss b/landing-pages/site/assets/scss/_ol-ul.scss new file mode 100644 index 0000000..f1cf865 --- /dev/null +++ b/landing-pages/site/assets/scss/_ol-ul.scss @@ -0,0 +1,79 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +@import "typography"; +@import "colors"; + +ol.counter-blue, ul.ticks-blue { + list-style: none; + + li { + @include bodytext("xsmall", $brownish-grey); + position: relative; + padding-left: 10px; + + &::before { + position: absolute; + border: solid 1px $cerulean-blue; + border-radius: 50%; + } + } +} + +ol.counter-blue { + counter-reset: custom-counter; + + li { + counter-increment: custom-counter; + margin-bottom: 25px; + + &::before { + @include bodytext("small", $cerulean-blue, 500); + $size: 28px; + content: counter(custom-counter); + + top: -2px; + left: calc(-1 * #{$size}); + width: $size; + height: $size; + + text-align: center; + line-height: $size; + } + } +} + +ul.ticks-blue { + li { + margin-bottom: 22px; + + &::before { + $size: 24px; + content: ""; + + left: calc(-1 * #{$size}); + width: $size; + height: $size; + + background-position: center; + background-repeat: no-repeat; + background-image: url("/icons/tick.svg"); + } + } +} diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss index 3075707..f887a63 100644 --- a/landing-pages/site/assets/scss/main-custom.scss +++ b/landing-pages/site/assets/scss/main-custom.scss @@ -20,3 +20,4 @@ @import "accordion"; @import "typography"; @import "buttons"; +@import "ol-ul"; diff --git a/landing-pages/site/content/en/examples/_index.html b/landing-pages/site/content/en/examples/_index.html index 9554c28..a7aa8d9 100644 --- a/landing-pages/site/content/en/examples/_index.html +++ b/landing-pages/site/content/en/examples/_index.html @@ -42,3 +42,19 @@ menu: {{< /accordion >}} </div> {{< /blocks/section >}} + +{{< blocks/section color="white" >}} + +<ol class="counter-blue mx-auto"> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + <li>Item 4</li> +</ol> +<ul class="ticks-blue mx-auto"> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> + <li>Item 4</li> +</ul> +{{< /blocks/section >}} diff --git a/landing-pages/site/static/icons/tick.svg b/landing-pages/site/static/icons/tick.svg new file mode 100644 index 0000000..f1c04b8 --- /dev/null +++ b/landing-pages/site/static/icons/tick.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="15.06" height="10.828" viewBox="0 0 15.06 10.828"> + <defs> + <style> + .cls-1{fill:#017cee;stroke:#017cee;stroke-width:2px} + </style> + </defs> + <path id="Path_782" d="M140.907 72.343l-6.915 6.915-4.231-4.231-.542.542 4.231 4.231.542.542.542-.542 6.915-6.915z" class="cls-1" data-name="Path 782" transform="translate(-127.804 -70.929)"/> +</svg>