From d47eaa8a2a496decad91e5b71e95925bb45d7354 Mon Sep 17 00:00:00 2001 From: Juan Cruz Viotti Date: Wed, 30 Mar 2016 13:47:36 -0400 Subject: [PATCH 01/10] Refactor badge as a scss component --- build/css/main.css | 34 ++++++++++++++++++++++++++++----- lib/components/hero-badge.html | 24 ----------------------- lib/index.html | 1 - lib/partials/main.html | 7 ++++--- lib/scss/components/_badge.scss | 30 +++++++++++++++++++++++++++++ lib/scss/main.scss | 11 +---------- lib/scss/modules/_space.scss | 4 ++++ 7 files changed, 68 insertions(+), 43 deletions(-) delete mode 100644 lib/components/hero-badge.html create mode 100644 lib/scss/components/_badge.scss diff --git a/build/css/main.css b/build/css/main.css index 1d29458c..b05fd02c 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -5854,6 +5854,9 @@ button.close { margin-top: 15px; margin-bottom: 15px; } +.space-top-medium { + margin-top: 15px; } + .space-vertical-large { margin-top: 30px; margin-bottom: 30px; } @@ -5864,16 +5867,37 @@ button.close { .space-right-tiny { margin-right: 5px; } -html { +/* + * Copyright 2016 Resin.io + * + * Licensed 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. + */ +.badge { + border: 2px solid; + border-radius: 50%; + padding: 7px 10px; + position: relative; + z-index: 10; + letter-spacing: 0; background-color: #535760; } -hero-badge .badge { - background-color: #535760; } - -hero-badge[disabled] .badge { +.badge[disabled] { background-color: #5c5e5c; color: #787c7f; } +html { + background-color: #535760; } + hero-icon[disabled] hero-caption { color: #787c7f; } diff --git a/lib/components/hero-badge.html b/lib/components/hero-badge.html deleted file mode 100644 index 017a68fb..00000000 --- a/lib/components/hero-badge.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - diff --git a/lib/index.html b/lib/index.html index d3f9c971..e6454a50 100644 --- a/lib/index.html +++ b/lib/index.html @@ -7,7 +7,6 @@ - diff --git a/lib/partials/main.html b/lib/partials/main.html index 716f0324..40273f8f 100644 --- a/lib/partials/main.html +++ b/lib/partials/main.html @@ -2,7 +2,7 @@
- 1 + 1
@@ -22,7 +22,8 @@
- 2 + + 2
@@ -53,7 +54,7 @@
- 3 + 3
Date: Wed, 30 Mar 2016 13:57:14 -0400 Subject: [PATCH 02/10] Refactor caption as a scss component --- build/css/main.css | 22 +++++++++++++++++++++- lib/components/hero-caption.html | 20 -------------------- lib/components/hero-icon.html | 6 +++--- lib/index.html | 3 +-- lib/scss/components/_caption.scss | 21 +++++++++++++++++++++ lib/scss/main.scss | 3 ++- 6 files changed, 48 insertions(+), 27 deletions(-) delete mode 100644 lib/components/hero-caption.html create mode 100644 lib/scss/components/_caption.scss diff --git a/build/css/main.css b/build/css/main.css index b05fd02c..b7cd87be 100644 --- a/build/css/main.css +++ b/build/css/main.css @@ -5895,10 +5895,30 @@ button.close { background-color: #5c5e5c; color: #787c7f; } +/* + * Copyright 2016 Resin.io + * + * Licensed 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. + */ +.caption { + font-weight: bold; + font-size: 11px; + margin-bottom: 0; } + html { background-color: #535760; } -hero-icon[disabled] hero-caption { +hero-icon[disabled] .caption { color: #787c7f; } hero-button .btn { diff --git a/lib/components/hero-caption.html b/lib/components/hero-caption.html deleted file mode 100644 index 082f259c..00000000 --- a/lib/components/hero-caption.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - diff --git a/lib/components/hero-icon.html b/lib/components/hero-icon.html index 49a7fd61..25437cc6 100644 --- a/lib/components/hero-icon.html +++ b/lib/components/hero-icon.html @@ -1,10 +1,10 @@ - - - - diff --git a/lib/components/hero-progress-button.html b/lib/components/hero-progress-button.html index 89d78ea8..26afd046 100644 --- a/lib/components/hero-progress-button.html +++ b/lib/components/hero-progress-button.html @@ -1,5 +1,4 @@ - @@ -27,12 +26,12 @@ } - + - diff --git a/lib/index.html b/lib/index.html index 39cc60c0..6ff5c064 100644 --- a/lib/index.html +++ b/lib/index.html @@ -9,7 +9,6 @@ - - diff --git a/lib/index.html b/lib/index.html index 6ff5c064..ee903519 100644 --- a/lib/index.html +++ b/lib/index.html @@ -8,7 +8,6 @@ -