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 008eb06 Add button components (#71) 008eb06 is described below commit 008eb06c5e6897cba306deb7f86294d1cc465e19 Author: Kamil Gabryjelski <kamil.gabryjel...@gmail.com> AuthorDate: Fri Oct 11 19:46:29 2019 +0200 Add button components (#71) --- .../site/assets/icons/accordion-arrow.svg | 10 +-- landing-pages/site/assets/icons/github.svg | 4 + landing-pages/site/assets/scss/_buttons.scss | 86 ++++++++++++++++++++++ landing-pages/site/assets/scss/main-custom.scss | 1 + landing-pages/site/content/en/examples/_index.html | 2 +- landing-pages/site/layouts/examples/baseof.html | 18 +++++ landing-pages/site/layouts/examples/list.html | 10 +++ .../layouts/partials/buttons/button-filled.html | 20 +++++ .../layouts/partials/buttons/button-hollow.html | 20 +++++ .../layouts/partials/buttons/button-with-icon.html | 24 ++++++ 10 files changed, 187 insertions(+), 8 deletions(-) diff --git a/landing-pages/site/assets/icons/accordion-arrow.svg b/landing-pages/site/assets/icons/accordion-arrow.svg index c57d756..441e6fd 100644 --- a/landing-pages/site/assets/icons/accordion-arrow.svg +++ b/landing-pages/site/assets/icons/accordion-arrow.svg @@ -1,8 +1,4 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="18.904" height="11.451" viewBox="0 0 18.904 11.451"> - <defs> - <style> - .cls-1{fill:#017cee;stroke:#017cee;stroke-width:2px} - </style> - </defs> - <path id="Path_684" d="M116.709 162.343l-7.453 7.453-7.453-7.453-.585.585 7.453 7.453.585.585.585-.585 7.453-7.453z" class="cls-1" data-name="Path 684" transform="translate(-99.804 -160.929)"/> +<svg xmlns="http://www.w3.org/2000/svg" width="18.904" height="11.451"> + <path d="M16.905 1.414L9.452 8.867 1.999 1.414l-.585.585 7.453 7.453.585.585.585-.585 7.453-7.453z" + data-name="Path 684" fill="#017cee" stroke="#017cee" stroke-width="2"/> </svg> diff --git a/landing-pages/site/assets/icons/github.svg b/landing-pages/site/assets/icons/github.svg new file mode 100644 index 0000000..08cc33e --- /dev/null +++ b/landing-pages/site/assets/icons/github.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="30.76" height="30"> + <path d="M15.379 0a15.381 15.381 0 00-4.86 29.974c.769.141 1.05-.334 1.05-.741 0-.365-.013-1.332-.021-2.616-4.278.929-5.181-2.062-5.181-2.062a4.071 4.071 0 00-1.708-2.25c-1.4-.954.106-.935.106-.935a3.231 3.231 0 012.356 1.585 3.274 3.274 0 004.476 1.278 3.287 3.287 0 01.976-2.056c-3.415-.388-7.005-1.707-7.005-7.6a5.947 5.947 0 011.583-4.127 5.53 5.53 0 01.151-4.07s1.291-.413 4.229 1.577a14.577 14.577 0 017.7 0c2.936-1.99 4.225-1.577 4.225-1.577a5.523 5.523 0 01.153 4.07 5.937 5.937 0 [...] + data-name="Path 224" fill="#51504f" fill-rule="evenodd"/> +</svg> diff --git a/landing-pages/site/assets/scss/_buttons.scss b/landing-pages/site/assets/scss/_buttons.scss new file mode 100644 index 0000000..7276474 --- /dev/null +++ b/landing-pages/site/assets/scss/_buttons.scss @@ -0,0 +1,86 @@ +/** + * 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 "colors"; + +button { + cursor: pointer; + border: 1px solid; + border-radius: 5px; + padding: 9px 29px; + transition: all ease-out 0.2s; + + &.btn-filled { + border-color: $cerulean-blue; + background-color: $cerulean-blue; + + &:hover { + border-color: $bright-sky-blue; + background-color: $bright-sky-blue; + } + } + + &.btn-with-icon { + $icon-height: 30px; + + padding: 14px 20px; + + svg { + height: $icon-height; + width: auto; + padding-right: 15px; + } + + span { + display: inline-block; + line-height: $icon-height; + vertical-align: middle; + } + } + + &.btn-hollow { + &.btn-blue { + color: $cerulean-blue; + border-color: $cerulean-blue; + background-color: transparent; + + &:hover { + color: $white; + background-color: $cerulean-blue; + } + } + + &.btn-brown { + border-color: $very-light-pink; + + &:hover { + background-color: $greyish-brown; + border-color: $greyish-brown; + + span { + color: $white; + } + svg { + path { + fill: $white; + } + } + } + } + } +} diff --git a/landing-pages/site/assets/scss/main-custom.scss b/landing-pages/site/assets/scss/main-custom.scss index ca88a7d..3075707 100644 --- a/landing-pages/site/assets/scss/main-custom.scss +++ b/landing-pages/site/assets/scss/main-custom.scss @@ -19,3 +19,4 @@ @import "accordion"; @import "typography"; +@import "buttons"; diff --git a/landing-pages/site/content/en/examples/_index.html b/landing-pages/site/content/en/examples/_index.html index a6bf6a6..9554c28 100644 --- a/landing-pages/site/content/en/examples/_index.html +++ b/landing-pages/site/content/en/examples/_index.html @@ -26,9 +26,9 @@ menu: <p class="text-center monotext--shamrock">This is a shamrock monotext</p> <p class="text-center monotext--vermillion">This is a vermillion monotext</p> </div> - {{< /blocks/section >}} + {{< blocks/section color="white" >}} <div class="col-10 mx-auto my-2"> {{< accordion title="Accordion 1" description="Tincidunt ornare massa eget egestas purus viverra." >}} diff --git a/landing-pages/site/layouts/examples/baseof.html b/landing-pages/site/layouts/examples/baseof.html new file mode 100644 index 0000000..868dd94 --- /dev/null +++ b/landing-pages/site/layouts/examples/baseof.html @@ -0,0 +1,18 @@ +<!doctype html> +<html lang="{{ .Site.Language.Lang }}" class="no-js"> +<head> + {{ partial "head.html" . }} +</head> +<body class="td-{{ .Kind }}"> +<header> + {{ partial "navbar.html" . }} +</header> +<div class="container-fluid td-default td-outer"> + <main role="main" class="td-main"> + {{ block "main" . }}{{ end }} + </main> + {{ partial "footer.html" . }} +</div> +{{ partialCached "scripts.html" . }} +</body> +</html> diff --git a/landing-pages/site/layouts/examples/list.html b/landing-pages/site/layouts/examples/list.html new file mode 100644 index 0000000..0e65878 --- /dev/null +++ b/landing-pages/site/layouts/examples/list.html @@ -0,0 +1,10 @@ +{{ define "main" }} + {{ with .Content }} + {{ . }} + {{ end }} + <div class="col"> + {{ partial "buttons/button-filled" (dict "text" "Learn more") }} + {{ partial "buttons/button-hollow" (dict "text" "Learn more") }} + {{ partial "buttons/button-with-icon" (dict "text" "Suggest a change on this page") }} + </div> +{{ end }} diff --git a/landing-pages/site/layouts/partials/buttons/button-filled.html b/landing-pages/site/layouts/partials/buttons/button-filled.html new file mode 100644 index 0000000..15cd947 --- /dev/null +++ b/landing-pages/site/layouts/partials/buttons/button-filled.html @@ -0,0 +1,20 @@ +{{/* +* 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. +*/}} + +<button class="btn-filled bodytext__xsmall--white">{{ .text }}</button> diff --git a/landing-pages/site/layouts/partials/buttons/button-hollow.html b/landing-pages/site/layouts/partials/buttons/button-hollow.html new file mode 100644 index 0000000..f01f048 --- /dev/null +++ b/landing-pages/site/layouts/partials/buttons/button-hollow.html @@ -0,0 +1,20 @@ +{{/* +* 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. +*/}} + +<button class="btn-hollow btn-blue bodytext__xsmall--blue">{{ .text }}</button> diff --git a/landing-pages/site/layouts/partials/buttons/button-with-icon.html b/landing-pages/site/layouts/partials/buttons/button-with-icon.html new file mode 100644 index 0000000..126d7a6 --- /dev/null +++ b/landing-pages/site/layouts/partials/buttons/button-with-icon.html @@ -0,0 +1,24 @@ +{{/* +* 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. +*/}} + +{{ $svg_path := .svg_path | default "icons/github.svg" }} +<button class="btn-hollow btn-brown btn-with-icon"> + {{ with resources.Get "icons/github.svg" }}{{ .Content | safeHTML }}{{ end }} + <span class="bodytext__xsmall--brownish">{{ .text }}</span> +</button>