You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/11 17:46:33 UTC
[airflow-site] branch aip-11 updated: Add button components (#71)
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 <ka...@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>