From e4e392d62c40824e951eb530bb91e3a0325c6d9c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Feb 2017 15:12:09 -0800 Subject: [PATCH 1/3] Fix CheckBox alignment by applying box-sizing: border-box to all before and after pseudo-elements. --- ui_framework/components/form/_check_box.scss | 3 +-- ui_framework/components/index.scss | 5 +++++ ui_framework/dist/ui_framework.css | 5 +++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/ui_framework/components/form/_check_box.scss b/ui_framework/components/form/_check_box.scss index 2d3b73ea7008a..ad5cf90581802 100644 --- a/ui_framework/components/form/_check_box.scss +++ b/ui_framework/components/form/_check_box.scss @@ -20,8 +20,7 @@ &:before { position: relative; - top: -0.05em; - left: 0.15em; + left: 0.25em; font-family: FontAwesome; content: "\F00C"; font-size: 1em; diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss index 1f919e32752b6..870485c85adf3 100644 --- a/ui_framework/components/index.scss +++ b/ui_framework/components/index.scss @@ -229,6 +229,11 @@ $verticalRhythm: 10px; * { box-sizing: border-box; + + &:before, + &:after { + box-sizing: border-box; + } } body { diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 87b70556c9e44..f3be644c7b9ac 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -25,6 +25,8 @@ */ * { box-sizing: border-box; } + *:before, *:after { + box-sizing: border-box; } body { font-family: "Open Sans", Helvetica, Arial, sans-serif; } @@ -302,8 +304,7 @@ body { transition: background-color 0.1s linear; } .kuiCheckBox:before { position: relative; - top: -0.05em; - left: 0.15em; + left: 0.25em; font-family: FontAwesome; content: "\F00C"; font-size: 1em; From b9124701647d5af757b8deb878d0a3061e7c2bc1 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Feb 2017 15:27:40 -0800 Subject: [PATCH 2/3] Fix ToolBarSearchBox height and icon alignment. --- .../components/tool_bar/_tool_bar_search.scss | 13 ++++++++----- ui_framework/dist/ui_framework.css | 19 ++++++++++++------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/ui_framework/components/tool_bar/_tool_bar_search.scss b/ui_framework/components/tool_bar/_tool_bar_search.scss index 67ad2a543eb15..20905bcd93233 100644 --- a/ui_framework/components/tool_bar/_tool_bar_search.scss +++ b/ui_framework/components/tool_bar/_tool_bar_search.scss @@ -27,12 +27,14 @@ .kuiToolBarSearchBox { flex: 1 1 auto; position: relative; + font-size: $fontSize; } .kuiToolBarSearchBox__icon { position: absolute; - top: 6px; - left: 8px; + top: 0.5em; + left: 0.7em; + font-size: 1em; font-size: 14px; color: #ACACAC; } @@ -43,14 +45,15 @@ .kuiToolBarSearchBox__input { width: 100%; min-width: 200px; - padding: 5px 12px 6px 28px; + padding: 4px 12px 5px 28px; + font-family: $font; /* 1 */ background-color: #FFFFFF; color: $fontColor; - border: 1px solid #FFFFFF; border-radius: $buttonBorderRadius; - font-size: $fontSize; + font-size: 1em; border: 1px solid #ffffff; line-height: normal; /* 1 */ + transition: border-color $formTransitionTiming; &:focus { @include formControlFocus; diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index f3be644c7b9ac..7a285748e2159 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1664,12 +1664,14 @@ body { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; - position: relative; } + position: relative; + font-size: 14px; } .kuiToolBarSearchBox__icon { position: absolute; - top: 6px; - left: 8px; + top: 0.5em; + left: 0.7em; + font-size: 1em; font-size: 14px; color: #ACACAC; } @@ -1679,15 +1681,18 @@ body { .kuiToolBarSearchBox__input { width: 100%; min-width: 200px; - padding: 5px 12px 6px 28px; + padding: 4px 12px 5px 28px; + font-family: "Open Sans", Helvetica, Arial, sans-serif; + /* 1 */ background-color: #FFFFFF; color: #191E23; - border: 1px solid #FFFFFF; border-radius: 4px; - font-size: 14px; + font-size: 1em; border: 1px solid #ffffff; line-height: normal; - /* 1 */ } + /* 1 */ + -webkit-transition: border-color 0.1s linear; + transition: border-color 0.1s linear; } .kuiToolBarSearchBox__input:focus { outline: none; border-color: #6EADC1; } From fa89b90c07c430b9caa1794fc7c02f661fe3a9b0 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 14 Feb 2017 15:44:32 -0800 Subject: [PATCH 3/3] Make Table examples consistently use the cell liner. --- .../src/views/table/controlled_table.html | 48 ++++++++++++++----- .../doc_site/src/views/table/table.html | 48 ++++++++++++++----- 2 files changed, 72 insertions(+), 24 deletions(-) diff --git a/ui_framework/doc_site/src/views/table/controlled_table.html b/ui_framework/doc_site/src/views/table/controlled_table.html index 93dad0f2700ad..80128bd45f73c 100644 --- a/ui_framework/doc_site/src/views/table/controlled_table.html +++ b/ui_framework/doc_site/src/views/table/controlled_table.html @@ -67,13 +67,19 @@ - +
+ +
- Alligator +
+ Alligator +
-
+
+
+
@@ -89,13 +95,19 @@ - +
+ +
- Boomerang +
+ Boomerang +
-
+
+
+
@@ -111,13 +123,19 @@ - +
+ +
- Celebration +
+ Celebration +
-
+
+
+
@@ -133,13 +151,19 @@ - +
+ +
- Dog +
+ Dog +
-
+
+
+
diff --git a/ui_framework/doc_site/src/views/table/table.html b/ui_framework/doc_site/src/views/table/table.html index 536bcf0e08b84..e1659e1dcf6b0 100644 --- a/ui_framework/doc_site/src/views/table/table.html +++ b/ui_framework/doc_site/src/views/table/table.html @@ -26,13 +26,19 @@ - +
+ +
- Alligator +
+ Alligator +
-
+
+
+
@@ -48,13 +54,19 @@ - +
+ +
- Boomerang +
+ Boomerang +
-
+
+
+
@@ -70,13 +82,19 @@ - +
+ +
- Celebration +
+ Celebration +
-
+
+
+
@@ -92,13 +110,19 @@ - +
+ +
- Dog +
+ Dog +
-
+
+
+