github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Customize buttons; make button borders configurable.

Browse source
This commit is contained in:
Paulo Reis 2017-09-25 15:40:44 +01:00
parent e68b367f3f
commit 66654e4a14
4 changed files with 98 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
services/web/app/views/project/list.pug
View file

@ -15,8 +15,7 @@ block content
}
};
.content.content-alt.project-list-page(ng-controller="ProjectPageController")
.container
.container-fluid.content.content-alt.project-list-page(ng-controller="ProjectPageController")
.announcements(
ng-controller="AnnouncementsController"
ng-class="{ 'announcements-open': ui.isOpen }"

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

@ -14,8 +14,8 @@
vertical-align: middle;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
border-bottom: 2px solid transparent;
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);
.user-select(none);

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

@ -796,6 +796,9 @@
// Custom
@content-alt-bg-color: lighten(@gray-lightest, 2.5%);
@btn-border-width: 1px;
@btn-border-bottom-width: 2px;
@left-menu-width: 260px;
@left-menu-animation-duration: 0.35s;

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

@ -37,6 +37,49 @@
@card-border-radius-base: 3px;
// Button colors and sizing
@btn-border-width : 0;
@btn-border-bottom-width : 0;
@btn-default-color : #FFF;
@btn-default-bg : @ol-blue-gray-4;
@btn-default-border : transparent;
@btn-primary-color : #FFF;
@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;
// TODO Warning color-orange?
@btn-warning-color : #FFF;
@btn-warning-bg : @ol-red;
@btn-warning-border : transparent;
@btn-danger-color : #FFF;
@btn-danger-bg : @ol-red;
@btn-danger-border : transparent;
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
//== Colors
//
//## Gray and brand colors for use across Bootstrap.