Эх сурвалжийг харах

Use a different strategy to achieve rounded buttons (less impact on other elements).

Paulo Reis 9 жил өмнө
parent
commit
465de8701b

+ 4 - 4
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);
 }
 
 

+ 6 - 6
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;
         }
     }
 }

+ 5 - 2
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;

+ 4 - 7
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;