From 465de8701b28d09913a8b5795373c9121cf84583 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 25 Sep 2017 16:56:22 +0100
Subject: [PATCH] Use a different strategy to achieve rounded buttons (less
 impact on other elements).

---
 .../web/public/stylesheets/components/buttons.less   |  8 ++++----
 services/web/public/stylesheets/components/card.less | 12 ++++++------
 .../public/stylesheets/core/_common-variables.less   |  7 +++++--
 .../web/public/stylesheets/core/ol-variables.less    | 11 ++++-------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/services/web/public/stylesheets/components/buttons.less b/services/web/public/stylesheets/components/buttons.less
index 277bd2240b..57a29c5353 100755
--- a/services/web/public/stylesheets/components/buttons.less
+++ b/services/web/public/stylesheets/components/buttons.less
@@ -17,7 +17,7 @@
   border: @btn-border-width solid transparent;
   border-bottom: @btn-border-bottom-width solid transparent;
   white-space: nowrap;
-  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
+  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
   .user-select(none);
 
   &,
@@ -124,14 +124,14 @@
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 .btn-xs {
-  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
 }
 
 
diff --git a/services/web/public/stylesheets/components/card.less b/services/web/public/stylesheets/components/card.less
index f906d68daf..2619686b0a 100644
--- a/services/web/public/stylesheets/components/card.less
+++ b/services/web/public/stylesheets/components/card.less
@@ -1,6 +1,6 @@
 .card {
   background-color: white;
-  border-radius: @card-border-radius-base;
+  border-radius: @border-radius-base;
   -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   box-shadow: 0 2px 4px rgba(0,0,0,0.15);
   padding: @line-height-computed;
@@ -39,16 +39,16 @@
             z-index: 1;
             // Make it taller and card like
             margin-top: 0;
-            border-radius: @card-border-radius-base;
+            border-radius: @border-radius-base;
         }
 
         &.card-first {
-            border-top-left-radius: @card-border-radius-base;
-            border-bottom-left-radius: @card-border-radius-base;
+            border-top-left-radius: @border-radius-base;
+            border-bottom-left-radius: @border-radius-base;
         }
         &.card-last {
-            border-top-right-radius: @card-border-radius-base;
-            border-bottom-right-radius: @card-border-radius-base;
+            border-top-right-radius: @border-radius-base;
+            border-bottom-right-radius: @border-radius-base;
         }
     }
 }
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 80ce79e76e..0a2337706e 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -85,8 +85,6 @@
 @border-radius-base:        3px;
 @border-radius-large:       5px;
 @border-radius-small:       2px;
-
-@card-border-radius-base:   @border-radius-base;
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
 //** Global background color for active items (e.g., navs or dropdowns).
@@ -796,6 +794,11 @@
 // Custom
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 
+@btn-border-radius-large: @border-radius-large;
+@btn-border-radius-base: @border-radius-base;
+@btn-border-radius-small: @border-radius-small;
+
+
 @sidebar-bg: transparent;
 @sidebar-link-color: #333;
 @sidebar-active-border-radius: @border-radius-small;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 0090713b09..7de6fde466 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -30,17 +30,14 @@
 // Typography
 @text-color             : @ol-type-color;
 
-// Border radius (used for components, e.g. buttons)
-@border-radius-base     : 999px; // Large enough value to be fully rounded everywhere
-@border-radius-large    : 999px; // As above
-@border-radius-small    : 999px; // As above
-
-@card-border-radius-base: 3px;
-
 // Button colors and sizing
 @btn-border-width        : 0;
 @btn-border-bottom-width : 0;
 
+@btn-border-radius-large : 9999px;
+@btn-border-radius-base  : 9999px;
+@btn-border-radius-small : 9999px;
+
 @btn-default-color       : #FFF;
 @btn-default-bg          : @ol-blue-gray-4;
 @btn-default-border      : transparent;