mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #10262 from overleaf/jel-ds-btn-secondary
[web] Buttons for new CSS build GitOrigin-RevId: 9ae4284ba89296b77c37d61ba9b221bcab2f6458
This commit is contained in:
parent
8be8dd4cc0
commit
62cf8c9d61
18 changed files with 290 additions and 47 deletions
4
services/web/app/views/_mixins/back_to_btns.pug
Normal file
4
services/web/app/views/_mixins/back_to_btns.pug
Normal 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')}
|
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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")}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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>.
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue