github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Paulo Reis 2017-09-25 16:56:22 +01:00
parent 08e0865870
commit 465de8701b
4 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
services/web/public/stylesheets/components/buttons.less
View file

@ -17,7 +17,7 @@
border: @btn-border-width solid transparent; border: @btn-border-width solid transparent;
border-bottom: @btn-border-bottom-width solid transparent; border-bottom: @btn-border-bottom-width solid transparent;
white-space: nowrap; 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); .user-select(none);
&, &,
@ -124,14 +124,14 @@
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input // 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 { .btn-sm {
// line-height: ensure proper height of button next to small input // 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 { .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);
} }

12
services/web/public/stylesheets/components/card.less
View file

@ -1,6 +1,6 @@
.card { .card {
background-color: white; 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); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.15); box-shadow: 0 2px 4px rgba(0,0,0,0.15);
padding: @line-height-computed; padding: @line-height-computed;
@ -39,16 +39,16 @@
z-index: 1; z-index: 1;
// Make it taller and card like // Make it taller and card like
margin-top: 0; margin-top: 0;
border-radius: @card-border-radius-base; border-radius: @border-radius-base;
} }
&.card-first { &.card-first {
border-top-left-radius: @card-border-radius-base; border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @card-border-radius-base; border-bottom-left-radius: @border-radius-base;
} }
&.card-last { &.card-last {
border-top-right-radius: @card-border-radius-base; border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @card-border-radius-base; border-bottom-right-radius: @border-radius-base;
} }
} }
} }

7
services/web/public/stylesheets/core/_common-variables.less
View file

@ -85,8 +85,6 @@
@border-radius-base: 3px; @border-radius-base: 3px;
@border-radius-large: 5px; @border-radius-large: 5px;
@border-radius-small: 2px; @border-radius-small: 2px;
@card-border-radius-base: @border-radius-base;
//** Global color for active items (e.g., navs or dropdowns). //** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff; @component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns). //** Global background color for active items (e.g., navs or dropdowns).
@ -796,6 +794,11 @@
// Custom // Custom
@content-alt-bg-color: lighten(@gray-lightest, 2.5%); @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-bg: transparent;
@sidebar-link-color: #333; @sidebar-link-color: #333;
@sidebar-active-border-radius: @border-radius-small; @sidebar-active-border-radius: @border-radius-small;

11
services/web/public/stylesheets/core/ol-variables.less
View file

@ -30,17 +30,14 @@
// Typography // Typography
@text-color : @ol-type-color; @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 // Button colors and sizing
@btn-border-width : 0; @btn-border-width : 0;
@btn-border-bottom-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-color : #FFF;
@btn-default-bg : @ol-blue-gray-4; @btn-default-bg : @ol-blue-gray-4;
@btn-default-border : transparent; @btn-default-border : transparent;