Merge pull request #10262 from overleaf/jel-ds-btn-secondary

[web] Buttons for new CSS build

GitOrigin-RevId: 9ae4284ba89296b77c37d61ba9b221bcab2f6458
This commit is contained in:
Jessica Lawshe 2022-11-14 09:07:21 -06:00 committed by Copybot
parent 8be8dd4cc0
commit 62cf8c9d61
18 changed files with 290 additions and 47 deletions

View file

@ -0,0 +1,4 @@
mixin back-to-btns(settingsAnchor)
a.btn.btn-secondary.text-capitalize(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
|
a.btn.btn-secondary.text-capitalize(href='/project') #{translate('back_to_your_projects')}

View file

@ -1,4 +1,5 @@
extends ../layout-marketing
include ../_mixins/back_to_btns
block content
main.content.content-alt#main-content
@ -47,7 +48,7 @@ block content
rel="noopener noreferrer"
).btn.btn-primary.btn-lg #{translate("give_feedback")}
.form-group
button.btn.btn-info.btn-sm(
button.btn.btn-secondary-info.btn-secondary.btn-sm(
type="submit"
data-ol-disabled-inflight
)
@ -68,6 +69,4 @@ block content
span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
span(hidden data-ol-inflight="pending") #{translate("joining")}…
.page-separator
a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
|
a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}
+back-to-btns()

View file

@ -27,4 +27,4 @@ block body
p.error-actions
a.error-btn(href="javascript:history.back()") Back
|  
a.btn.btn-default(href="/") Home
a.btn.btn-secondary(href="/") Home

View file

@ -14,5 +14,5 @@ block content
| #{translate("invite_not_valid_description")}.
.row.text-center.actions
.col-md-12
a.btn.btn-info(href="/project") #{translate("back_to_your_projects")}
a.btn.btn-secondary-info.btn-secondary(href="/project") #{translate("back_to_your_projects")}

View file

@ -130,6 +130,6 @@ if (isOverleaf)
.text-centered.user-profile
p Are you affiliated with an institution?
a.btn.btn-info(
a.btn.btn-secondary-info.btn-secondary(
href="/user/settings"
) Add Affiliation

View file

@ -1,4 +1,5 @@
extends ../layout-marketing
include ../_mixins/back_to_btns
block content
main.content.content-alt#main-content
@ -42,6 +43,4 @@ block content
p #{translate("newsletter_info_note")}
.page-separator
a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
|
a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}
+back-to-btns()

View file

@ -68,6 +68,6 @@ block content
p.text-success.text-center
| #{translate('clear_sessions_success')}
.page-separator
a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
a.btn.btn-secondary.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
|
a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}
a.btn.btn-secondary.text-capitalize(href='/project') #{translate('back_to_your_projects')}

View file

@ -24,7 +24,11 @@ function AddAffiliation() {
return (
<div className="text-centered user-profile">
<p>{t('are_you_affiliated_with_an_institution')}</p>
<Button bsStyle="info" href="/user/settings">
<Button
bsStyle={null}
className="btn-secondary-info btn-secondary"
href="/user/settings"
>
{t('add_affiliation')}
</Button>
</div>

View file

@ -108,7 +108,8 @@ function ActionButton({
if (!hasFeature) {
return (
<Button
bsStyle="info"
bsStyle={null}
className="btn-secondary-info btn-secondary"
href="/user/subscription/plans"
onClick={trackUpgradeClick}
>
@ -123,7 +124,12 @@ function ActionButton({
)
} else {
return (
<Button bsStyle="info" href={linkPath} disabled={disabled}>
<Button
bsStyle={null}
className="btn-secondary-info btn-secondary"
href={linkPath}
disabled={disabled}
>
<span className="text-capitalize">{t('link')}</span>
</Button>
)
@ -166,7 +172,12 @@ function UnlinkConfirmationModal({
<Modal.Footer>
<form action={unlinkPath} method="POST" className="form-inline">
<input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
<Button onClick={handleCancel}>{t('cancel')}</Button>
<Button
className="btn-secondary-info btn-secondary"
onClick={handleCancel}
>
{t('cancel')}
</Button>
<Button type="submit" bsStyle="danger">
{t('unlink')}
</Button>

View file

@ -124,7 +124,10 @@ function ActionButton({
)
} else {
return (
<a href={linkPath} className="btn btn-info text-capitalize">
<a
href={linkPath}
className="btn btn-secondary-info btn-secondary text-capitalize"
>
{t('link')}
</a>
)
@ -159,7 +162,11 @@ function UnlinkConfirmModal({
</Modal.Body>
<Modal.Footer>
<Button bsStyle="default" onClick={handleHide}>
<Button
bsStyle={null}
className="btn-secondary-info btn-secondary"
onClick={handleHide}
>
{t('cancel')}
</Button>
<Button bsStyle="danger" onClick={handleConfirmation}>

View file

@ -151,32 +151,70 @@ export const Headings = () => {
)
}
export const Buttons = () => {
export const Buttons = (args, { globals: { theme } }) => {
return (
<div className="content content-alt">
<Grid>
<Row>
<Col md={8} mdOffset={2}>
<h2>Buttons</h2>
<p>Our primary button is green:</p>
<h3>Primary Button</h3>
<p>
<Button bsStyle="primary">Primary Button</Button>
</p>
<p>Our secondary button is blue:</p>
<p>
<Button bsStyle="info">Secondary Button</Button>
</p>
<p>All button styles</p>
<p />
<h3>Secondary Button</h3>
{theme.includes('main') ? (
<>
<p>
<button className="btn btn-secondary">
Secondary Button
</button>
</p>
<h3>Deprecated Styles</h3>
<p>
These are being transitioned to the new secondary style above
</p>
</>
) : (
''
)}
<p>Our secondary button is blue or dark gray:</p>
<div className="btn-toolbar">
<Button bsStyle="info">Info Button</Button>
<Button bsStyle="default">Default Button</Button>
</div>
<h3>All button styles</h3>
{theme.includes('main') ? (
<p>Includes styles being deprecated</p>
) : (
''
)}
<div className="btn-toolbar">
<Button bsStyle="primary">Primary</Button>
<Button bsStyle="info">Info (secondary)</Button>
{theme.includes('main') ? (
<button className="btn btn-secondary">Secondary</button>
) : (
''
)}
<Button bsStyle="info">Info</Button>
<Button bsStyle="default">Default</Button>
<Button bsStyle="success">Success</Button>
<Button bsStyle="warning">Warning</Button>
<Button bsStyle="danger">Danger</Button>
</div>
<p />
<h3>Sizes</h3>
<div className="btn-toolbar">
<button className="btn btn-primary btn-xs">Extra Small</button>
<button className="btn btn-primary btn-sm">Small</button>
<button className="btn btn-primary">Default</button>
<button className="btn btn-primary btn-lg">Large</button>
<button className="btn btn-primary btn-xl">Extra Large</button>
</div>
<h2>Hyperlinks</h2>
<p>
Hyperlinks are highlighted <a href="#">as shown</a>.

View file

@ -94,7 +94,7 @@
}
}
.login-btn {
.login-btn when(@is-new-css = false) {
.btn;
.btn-default;
position: relative;
@ -102,6 +102,14 @@
padding-right: 0;
}
.login-btn when(@is-new-css = true) {
.btn;
.btn-secondary;
position: relative;
padding-left: 20px;
padding-right: 0;
}
.login-btn-sharelatex {
background-color: @brand-sharelatex-color;
&:focus,

View file

@ -120,7 +120,7 @@
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.btn-group.open .dropdown-toggle when (@is-new-css = false) {
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
// Show no shadow for `.btn-link` since it has no other button styles.
@ -128,6 +128,15 @@
.box-shadow(none);
}
}
.btn-group.open .dropdown-toggle when (@is-new-css = true) {
&.btn-secondary {
background-color: @btn-secondary-hover-bg-color;
}
&.btn-primary {
border-color: @btn-primary-hover-bg-color;
background-color: @btn-primary-hover-bg-color;
}
}
.btn-form-cross {
display: block;
}

View file

@ -5,7 +5,7 @@
// Base styles
// --------------------------------------------------
.btn {
.btn when(@is-new-css = false) {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
@ -52,6 +52,53 @@
.box-shadow(none);
}
}
.btn when(@is-new-css = true) {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: @border-size solid transparent;
white-space: nowrap;
.button-size(
@padding-base-vertical; @padding-base-horizontal; @font-size-base;
@line-height-base; @btn-border-radius-base
);
.user-select(none);
&,
&:active,
&.active {
&:focus {
.tab-focus();
}
}
&:hover,
&:focus {
color: @btn-default-color;
text-decoration: none;
}
// &:active,
// &.active {
// }
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
cursor: not-allowed;
opacity: 1; //needed to override deprecated styling in individual classes
.box-shadow(none);
}
}
}
// Alternate buttons
// --------------------------------------------------
@ -62,16 +109,20 @@
.btn-default-outline {
.button-outline-variant(@btn-default-bg);
}
.btn-primary {
.btn-primary when (@is-new-css = false) {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
.btn-primary when (@is-new-css = true) {
.btn-borderless();
}
.btn-primary-on-primary-bg {
.button-variant(@white; @ol-dark-green; @ol-dark-green);
}
// Success appears as green
.btn-success {
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
.btn-primary;
}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
@ -84,6 +135,22 @@
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// btn-secondary
.btn-secondary when(@is-new-css = false) {
&:not(.btn-secondary-info) {
.btn-default;
}
}
.btn-secondary when(@is-new-css = true) {
.btn-bordered();
}
// btn-info for old and btn-secondary for new
.btn-secondary-info when(@is-new-css = false) {
.btn-info;
}
.btn-secondary-info when(@is-new-css = true) {
.btn-secondary;
}
.reset-btns {
// reset all buttons back to their original colors
@ -108,6 +175,9 @@
.btn-warning {
.btn-warning;
}
.btn-secondary {
.btn-secondary;
}
}
// Link buttons

View file

@ -71,7 +71,7 @@
.btn-styles(@btn-primary-bg);
}
.btn-success {
.btn-styles(@btn-success-bg);
.btn-styles(@btn-primary-bg);
}
.btn-info {
.btn-styles(@btn-info-bg);

View file

@ -27,13 +27,16 @@
}
// WebKit-style focus
.tab-focus() {
.tab-focus() when (@is-new-css = false) {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.tab-focus() when (@is-new-css = true) {
outline: none;
}
// Center-align a block level element
.center-block() {
@ -125,6 +128,9 @@
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
.box-shadow-button-input() {
box-shadow: 0px 0px 0px 2px rgba(50, 101, 178, 0.56);
}
// Transitions
.transition(@transition) {
@ -543,6 +549,91 @@
border-radius: @btn-border-radius-base;
}
.btn-bordered() {
color: @content-primary;
background-color: @white;
border-color: @border-color-base;
&:hover {
background-color: @btn-secondary-hover-bg-color;
}
&:focus {
color: @content-primary;
outline: none;
}
&:focus-visible,
&:active {
.box-shadow-button-input();
outline: none;
}
&:hover,
&:focus-visible,
&:active {
color: @content-primary;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus-visible,
&:active,
&.active {
background-color: @color-disabled;
border-color: @border-color-disabled;
color: @content-disabled;
}
}
}
.btn-borderless(@color: @white; @background: @green; @background-hover: @btn-primary-hover-bg-color) {
color: @color;
background-color: @background;
border-color: @background; // add a border that is same as background color so that the height matches the btn-bordered style
&:hover {
background-color: @background-hover;
border-color: @background-hover;
}
&:focus {
color: @color;
outline: none;
}
&:focus-visible,
&:active {
background-color: @background;
border-color: @background;
.box-shadow-button-input();
outline: none;
}
&:hover,
&:focus-visible,
&:active {
color: @color;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus-visible,
&:active,
&.active {
background-color: @color-disabled;
border-color: @color-disabled;
color: @content-disabled;
}
}
}
// Tables
// -------------------------
.table-row-variant(@state; @background) {
@ -706,13 +797,21 @@
// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
when(@is-new-css = false) {
// Remove 1px to make up for the extra px of border-bottom we've added
padding: @padding-vertical - 1 @padding-horizontal @padding-vertical;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
when(@is-new-css = true) {
padding: @padding-vertical - @border-size @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
// Pagination
// -------------------------
@ -1117,7 +1216,7 @@
// need to define as class for recurly UI
border-color: @input-border-focus;
outline: 0;
box-shadow: 0px 0px 0px 2px rgba(50, 101, 178, 0.56);
.box-shadow-button-input();
}
.form-control-focus() when (@is-new-css = true) {

View file

@ -202,10 +202,6 @@
@btn-primary-bg: @ol-green;
@btn-primary-border: transparent;
@btn-success-color: #fff;
@btn-success-bg: @ol-green;
@btn-success-border: transparent;
@btn-info-color: #fff;
@btn-info-bg: @ol-blue;
@btn-info-border: transparent;

View file

@ -91,7 +91,7 @@
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-vertical: 1.5px;
@padding-xs-horizontal: 8px;
@padding-xs: 5px;
@ -110,6 +110,7 @@
@border-width-base: 3px; // only used by plans and cards
@border-size: 1.5px;
@border-color-base: @neutral-40;
@border-color-disabled: @color-disabled;
//** Horizontal line color.
@hr-border: @neutral-20;
@ -161,10 +162,6 @@
@btn-primary-bg: @green;
@btn-primary-border: transparent;
@btn-success-color: #fff;
@btn-success-bg: @green;
@btn-success-border: transparent;
@btn-info-color: #fff;
@btn-info-bg: @blue;
@btn-info-border: transparent;
@ -191,7 +188,7 @@
//** Text color for `<input>`s
@input-color: @neutral-90;
//** `<input>` border color
@input-border: @neutral-40;
@input-border: @border-color-base;
//** `<input>` border radius
@input-border-radius: 4px;
//** Border color for inputs on focus
@ -710,6 +707,8 @@
@btn-border-radius-small: 9999px;
@btn-border-width: 0;
@btn-border-bottom-width: 0;
@btn-primary-hover-bg-color: @green-dark;
@btn-secondary-hover-bg-color: @neutral-20;
// Cards
@card-box-shadow: none;