Merge and cleanup more CSS rules

This commit is contained in:
djmaze 2021-02-08 17:37:21 +01:00
parent e3e0474be2
commit 004378ed8c
22 changed files with 136 additions and 273 deletions

15
dev/External/ko.js vendored
View file

@ -157,20 +157,15 @@ ko.bindingHandlers.command = {
const cl = element.classList, const cl = element.classList,
command = fValueAccessor(); command = fValueAccessor();
let result = command.enabled(); let disabled = !command.enabled();
cl.toggle('command-not-enabled', !result); cl.toggle('no-disabled', !disabled);
if (result) { disabled = disabled || !command.canExecute();
result = command.canExecute(); ['disable','disabled'].forEach(s => cl.toggle(s, disabled));
cl.toggle('command-can-not-be-execute', !result);
}
['command-disabled','disable','disabled'].forEach(s=>cl.toggle(s, !result));
cl.toggle('no-disabled', !!result);
if (element.matches('INPUT,TEXTAREA,BUTTON')) { if (element.matches('INPUT,TEXTAREA,BUTTON')) {
element.disabled = !result; element.disabled = disabled;
} }
} }
}; };

View file

@ -106,3 +106,8 @@
padding-left: 30px; padding-left: 30px;
} }
} }
.btn.btn-logout {
padding-left: 12px;
padding-right: 12px;
}

View file

@ -180,3 +180,17 @@
} }
} }
} }
.minimize-custom {
border: 0 solid #333;
border-bottom-width: 3px;
display: inline-block;
float: right;
height: 20px;
width: 16px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
margin-right: 15px;
cursor: pointer;
}

View file

@ -51,7 +51,7 @@
} }
.unsubscribed-folder, .unchecked-folder { .unsubscribed-folder, .unchecked-folder {
opacity: 0.2; opacity: 0.4;
} }
} }

View file

@ -1,4 +1,16 @@
#top-system-dropdown-id {
padding-left: 10px;
padding-right: 10px;
}
.rl-left-panel-disabled #more-list-dropdown-id + .dropdown-menu {
position: fixed;
top: 40px;
right: auto;
left: 0;
}
.b-system-drop-down { .b-system-drop-down {
.b-toolbar { .b-toolbar {
@ -10,18 +22,9 @@
z-index: 103; z-index: 103;
} }
.e-facebook-name { .dropdown-menu {
display: inline-block; right: 0;
padding-top: 4px; left: auto;
}
.btn.system-dropdown {
padding-left: 10px;
padding-right: 10px;
}
.button-fb-logout {
margin: 5px;
} }
.email-title { .email-title {
@ -42,27 +45,16 @@
} }
.audioPlace { .audioPlace {
display: inline-block;
font-size: 25px; font-size: 30px;
line-height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
width: 25px; width: 1em;
.playIcon, .stopIcon { .playIcon, .stopIcon {
cursor: pointer; cursor: pointer;
color: orange; color: orange;
text-shadow: 0 1px 0 #555; text-shadow: 0 1px 0 #555;
float: right;
}
.playIcon {
margin-top: 5px;
}
.stopIcon {
font-size: 30px;
line-height: 30px;
margin-right: 10px;
} }
.stopIcon { .stopIcon {
@ -99,7 +91,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
border-radius: 4px; border-radius: 4px;
font-weight: bold; font-weight: bold;
margin-right: 5px;
white-space: nowrap; white-space: nowrap;
} }
@ -157,31 +148,28 @@
.equaliser { .equaliser {
width: 20px; margin-top: 5px;
width: 30px;
height: 20px; height: 20px;
position: relative; position: relative;
.bar { .bar {
float:left;
width: 5px; width: 5px;
height: 5px; height: 5px;
background: orange; background: orange;
position: absolute; position: absolute;
bottom:0; bottom:0;
animation: none;
} }
.first { .first {
left: 0; left: calc(1em / 2 - 10px);
animation: none;
} }
.second { .second {
left: 7px; left: calc(1em / 2 - 2px);
animation: none;
} }
.third { .third {
left: 14px; left: calc(1em / 2 + 6px);
animation: none;
} }
&.animated { &.animated {

View file

@ -7,20 +7,6 @@ label.inline, span.inline {
display: inline-block; display: inline-block;
} }
.minimize-custom {
border: 0 solid #333;
border-bottom-width: 3px;
display: inline-block;
float: right;
height: 20px;
width: 16px;
font-size: 20px;
font-weight: bold;
line-height: 20px;
margin-right: 15px;
cursor: pointer;
}
.legend { .legend {
display: block; display: block;
width: 100%; width: 100%;
@ -47,10 +33,6 @@ label.inline, span.inline {
border-radius: 3px; border-radius: 3px;
} }
select {
width: 223px;
}
.btn-small.btn-small-small { .btn-small.btn-small-small {
padding: 3px 9px; padding: 3px 9px;
font-size: 11px; font-size: 11px;
@ -65,10 +47,6 @@ select {
padding: 4px 7px; padding: 4px 7px;
} }
.btn.btn-nowrap {
white-space: nowrap;
}
.btn.btn-ellipsis { .btn.btn-ellipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -103,27 +81,11 @@ select {
} }
} }
.btn.btn-narrow {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.btn-group-custom-margin > .btn + .btn { .btn-group.btn-group-custom-margin > .btn + .btn {
margin-left: 0; margin-left: 0;
} }
.btn.btn-large {
font-size: 17px;
}
.btn-group + .btn-group {
margin-left: 3px;
}
.btn { .btn {
border-radius: @btnBorderRadius;
background-image: none;
// &:active { // &:active {
// .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.1)"); // .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.1)");
// } // }
@ -138,27 +100,12 @@ select {
} }
} }
.btn.btn-dark-disabled-border {
&.disabled, &[disabled] {
border-color: #aaa;
}
}
//.btn-group.open { //.btn-group.open {
// .dropdown-toggle { // .dropdown-toggle {
// .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.1)"); // .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 rgba(0,0,0,.1)");
// } // }
//} //}
.btn.btn-success {
background-color: #84AB04;
}
.btn-toolbar {
margin-top: 0;
margin-bottom: 0;
}
.dropdown-menu * + .dividerbar { .dropdown-menu * + .dividerbar {
margin-top: 9px; margin-top: 9px;
padding-top: 9px; padding-top: 9px;
@ -168,35 +115,10 @@ select {
*/ */
} }
.btn-group > .btn {
border-radius: 0 !important;
}
.btn-group > .btn.single { .btn-group > .btn.single {
border-radius: @btnBorderRadius !important; border-radius: @btnBorderRadius !important;
} }
.btn-group > .btn.first {
border-top-left-radius: @btnBorderRadius !important;
border-bottom-left-radius: @btnBorderRadius !important;
}
.btn-group > .btn.last {
border-top-right-radius: @btnBorderRadius !important;
border-bottom-right-radius: @btnBorderRadius !important;
}
.btn-group + .btn-group {
margin-left: 0;
}
.btn-group {
margin-right: 3px;
}
.btn-group.btn-group-last {
margin-right: 0;
}
.dropdown.colored-toggle.open .btn.dropdown-toggle { .dropdown.colored-toggle.open .btn.dropdown-toggle {
color: #BD362F; color: #BD362F;

View file

@ -4,30 +4,18 @@
min-width: 300px; min-width: 300px;
} }
.pswp__error-msg {
color: #ccc;
a, a:hover {
color: #fff;
}
}
.pswp__img--placeholder {
opacity: 0;
}
[data-rainloopTip],
[data-rainloopErrorTip] { [data-rainloopErrorTip] {
position: relative; position: relative;
} }
[data-rainloopTip]::before,
[data-rainloopErrorTip]::before { [data-rainloopErrorTip]::before {
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
border: 1px solid #999; border: 1px solid #999;
content: attr(data-rainloopTip); color: red;
content: attr(data-rainloopErrorTip);
font-size: 13px; font-size: 13px;
left: 100%; left: 100%;
opacity : 0; opacity: 1;
padding: 0.25em; padding: 0.25em;
position : absolute; position : absolute;
text-align: left; text-align: left;
@ -37,21 +25,11 @@
z-index: 2001 !important; z-index: 2001 !important;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
[data-rainloopTip]::before,
[data-rainloopErrorTip]::before { [data-rainloopErrorTip]::before {
min-width: 60vw; min-width: 60vw;
white-space: normal; white-space: normal;
} }
} }
[data-rainloopErrorTip]::before {
color: red;
content: attr(data-rainloopErrorTip);
opacity: 1;
}
[data-tooltip]:hover::before {
opacity : 1;
}
[data-rainloopTip]::after,
[data-rainloopErrorTip]::after { [data-rainloopErrorTip]::after {
border-color: transparent transparent #999 transparent; border-color: transparent transparent #999 transparent;
border-style: solid; border-style: solid;

View file

@ -9,7 +9,7 @@
<span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span> <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span>
</h4> </h4>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn single btn-narrow" data-bind="click: logoutClick"> <a class="btn btn-logout" data-bind="click: logoutClick">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
</div> </div>

View file

@ -23,15 +23,15 @@
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div> <div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
<div class="b-footer btn-toolbar hide-on-mobile" data-bind="visible: allowFolders"> <div class="b-footer btn-toolbar hide-on-mobile" data-bind="visible: allowFolders">
<div class="btn-group"> <div class="btn-group">
<a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }"> <a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i> <i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
</a> </a>
</div> </div>
<div class="btn-group hide-on-panel-disabled"> <div class="btn-group hide-on-panel-disabled">
<a class="btn first" data-bind="click: createFolder"> <a class="btn" data-bind="click: createFolder">
<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner': foldersChanging()}"></i> <i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner': foldersChanging()}"></i>
</a> </a>
<a class="btn last" data-bind="click: configureFolders"> <a class="btn" data-bind="click: configureFolders">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
</div> </div>

View file

@ -5,32 +5,32 @@
<div class="btn-toolbar"> <div class="btn-toolbar">
<!-- ko if: allowFolders && mobile --> <!-- ko if: allowFolders && mobile -->
<div class="btn-group" data-bind="visible: leftPanelDisabled()"> <div class="btn-group" data-bind="visible: leftPanelDisabled()">
<a class="btn btn-thin-2 single" data-bind="click: showLeft"> <a class="btn btn-thin-2" data-bind="click: showLeft">
<i class="icon-right-middle"></i> <i class="icon-right-middle"></i>
</a> </a>
</div> </div>
<div class="btn-group" data-bind="visible: !leftPanelDisabled()"> <div class="btn-group" data-bind="visible: !leftPanelDisabled()">
<a class="btn btn-thin-2 single" data-bind="click: hideLeft"> <a class="btn btn-thin-2" data-bind="click: hideLeft">
<i class="icon-left-middle"></i> <i class="icon-left-middle"></i>
</a> </a>
</div> </div>
<div class="btn-group">&nbsp;</div> <div class="btn-group">&nbsp;</div>
<!-- /ko --> <!-- /ko -->
<div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()"> <div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()">
<a class="btn single buttonCompose" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}"> <a class="btn buttonCompose" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
<i class="icon-paper-plane"></i> <i class="icon-paper-plane"></i>
</a> </a>
</div> </div>
<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div> <div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()"> <div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
<a class="btn single btn-dark-disabled-border buttonReload" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'"> <a class="btn buttonReload" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i> <i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i>
</a> </a>
</div> </div>
<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div> <div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
<!-- ko if: !newMoveToFolder --> <!-- ko if: !newMoveToFolder -->
<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger"> <div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand, tooltip: 'GLOBAL/MOVE_TO'"> <a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand, tooltip: 'GLOBAL/MOVE_TO'">
<i class="icon-copy visible-on-ctrl-btn"></i> <i class="icon-copy visible-on-ctrl-btn"></i>
<i class="icon-folder hidden-on-ctrl-btn"></i> <i class="icon-folder hidden-on-ctrl-btn"></i>
<span class="caret"></span> <span class="caret"></span>
@ -44,7 +44,7 @@
<!-- /ko --> <!-- /ko -->
<!-- ko if: newMoveToFolder --> <!-- ko if: newMoveToFolder -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()"> <div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border buttonMove" data-bind="command: moveNewCommand, tooltip: 'GLOBAL/MOVE_TO'"> <a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand, tooltip: 'GLOBAL/MOVE_TO'">
<i class="icon-copy visible-on-ctrl-btn"></i> <i class="icon-copy visible-on-ctrl-btn"></i>
<i class="icon-folder hidden-on-ctrl-btn"></i> <i class="icon-folder hidden-on-ctrl-btn"></i>
</a> </a>
@ -52,29 +52,26 @@
<!-- /ko --> <!-- /ko -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div> <div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()"> <div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
<a class="btn first btn-dark-disabled-border button-archive" <a class="btn button-archive"
data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'"> data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
<i class="icon-archive"></i> <i class="icon-archive"></i>
</a> </a>
<a class="btn btn-dark-disabled-border button-spam" <a class="btn button-spam"
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM', data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM'">
css: {'first': !isArchiveVisible()}">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
<a class="btn btn-dark-disabled-border button-not-spam" <a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM', data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
css: {'first': !isArchiveVisible()}">
<i class="icon-check-mark-circle-two"></i> <i class="icon-check-mark-circle-two"></i>
</a> </a>
<a class="btn last btn-dark-disabled-border button-delete" <a class="btn button-delete"
data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE', data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">
css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
<i class="fontastic">🗑</i> <i class="fontastic">🗑</i>
<!--<span data-bind="text: printableMessageCountForDeletion()"></span>--> <!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
</a> </a>
</div> </div>
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger"> <div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'GLOBAL/MORE'"> <a id="more-list-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'GLOBAL/MORE'">
<i class="icon-list animate-this-icon-on-open"></i> <i class="icon-list animate-this-icon-on-open"></i>
</a> </a>
<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id"> <ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">

View file

@ -3,37 +3,37 @@
<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()"> <div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
<div class="messageButtons btn-toolbar"> <div class="messageButtons btn-toolbar">
<div class="btn-group" data-bind="tooltip: 'GLOBAL/CLOSE'"> <div class="btn-group" data-bind="tooltip: 'GLOBAL/CLOSE'">
<a class="btn single btn-dark-disabled-border buttonClose" data-bind="command: closeMessageCommand"> <a class="btn buttonClose" data-bind="command: closeMessageCommand">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
</div> </div>
<div class="btn-group">&nbsp;</div> <div class="btn-group">&nbsp;</div>
<div class="btn-group" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'"> <div class="btn-group" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand"> <a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
<i class="fontastic icon-white">🖉</i> <i class="fontastic icon-white">🖉</i>
</a> </a>
</div> </div>
<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div> <div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
<div class="btn-group" data-bind="visible: !usePreviewPane()"> <div class="btn-group" data-bind="visible: !usePreviewPane()">
<a class="btn first btn-dark-disabled-border button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'"> <a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
<i class="icon-archive"></i> <i class="icon-archive"></i>
</a> </a>
<a class="btn btn-dark-disabled-border button-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'"> <a class="btn button-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
<a class="btn btn-dark-disabled-border button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'"> <a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
<i class="icon-check-mark-circle-two"></i> <i class="icon-check-mark-circle-two"></i>
</a> </a>
<a class="btn last btn-dark-disabled-border button-delete" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'"> <a class="btn button-delete" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">
<i class="fontastic">🗑</i> <i class="fontastic">🗑</i>
</a> </a>
</div> </div>
<div class="btn-group">&nbsp;</div> <div class="btn-group">&nbsp;</div>
<div class="btn-group hide-on-mobile" data-bind="visible: !usePreviewPane()"> <div class="btn-group hide-on-mobile" data-bind="visible: !usePreviewPane()">
<a class="btn btn-thin first btn-dark-disabled-border buttonUp" data-bind="command: goUpCommand"> <a class="btn btn-thin buttonUp" data-bind="command: goUpCommand">
<i class="icon-left-middle"></i> <i class="icon-left-middle"></i>
</a> </a>
<a class="btn btn-thin last btn-dark-disabled-border buttonDown" data-bind="command: goDownCommand"> <a class="btn btn-thin buttonDown" data-bind="command: goDownCommand">
<i class="icon-right-middle"></i> <i class="icon-right-middle"></i>
</a> </a>
</div> </div>
@ -69,7 +69,7 @@
<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message"> <div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
<div class="btn-group pull-right" style="margin-right: -11px;"> <div class="btn-group pull-right" style="margin-right: -11px;">
<div class="btn-group pull-right" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions"> <div class="btn-group pull-right" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, css: {'first': !allowComposer}"> <a class="btn btn-thin-2 btn-transparent dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand">
<span data-bind="visible: !allowComposer" class="fontastic"></span> <span data-bind="visible: !allowComposer" class="fontastic"></span>
<span data-bind="visible: allowComposer" class="caret"></span> <span data-bind="visible: allowComposer" class="caret"></span>
</a> </a>
@ -180,22 +180,22 @@
</div> </div>
</ul> </ul>
</div> </div>
<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReply pull-right" <a class="btn btn-thin-2 btn-transparent buttonReply pull-right"
data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'"> data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReplyAll pull-right" <a class="btn btn-thin-2 btn-transparent buttonReplyAll pull-right"
data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'"> data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonForward pull-right" <a class="btn btn-thin-2 btn-transparent buttonForward pull-right"
data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'"> data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
<i class="fontastic"></i> <i class="fontastic"></i>
</a> </a>
</div> </div>
<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px"> <div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand"> <a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
<i class="fontastic icon-white">🖉</i> <i class="fontastic icon-white">🖉</i>
</a> </a>
</div> </div>

View file

@ -46,7 +46,7 @@
</div> </div>
<div class="pull-right"> <div class="pull-right">
<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true"> <div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true">
<a class="btn single dropdown-toggle buttonMore" data-toggle="dropdown"> <a class="btn dropdown-toggle buttonMore" data-toggle="dropdown">
<i class="icon-list"></i> <i class="icon-list"></i>
</a> </a>
<ul class="dropdown-menu g-ui-menu" role="menu"> <ul class="dropdown-menu g-ui-menu" role="menu">
@ -82,7 +82,7 @@
</div> </div>
<div class="btn-group pull-right">&nbsp;</div> <div class="btn-group pull-right">&nbsp;</div>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn single" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'GLOBAL/CONTACTS'"> <a class="btn" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'GLOBAL/CONTACTS'">
<i class="icon-address-book"></i> <i class="icon-address-book"></i>
</a> </a>
</div> </div>
@ -152,11 +152,11 @@
<div> <div>
<div class="pull-left"> <div class="pull-left">
<div class="btn-group" data-toggle="buttons-radio"> <div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn first" data-bind="click: function () { attachmentsPlace(false); }, <button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
css: { 'active': !attachmentsPlace() }"> css: { 'active': !attachmentsPlace() }">
<i class="icon-file-text"></i> <i class="icon-file-text"></i>
</button> </button>
<button type="button" class="btn last" data-bind="click: function () { attachmentsPlace(true); }, <button type="button" class="btn" data-bind="click: function () { attachmentsPlace(true); },
css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() }, css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
tooltipErrorTip: attachmentsErrorTooltip"> tooltipErrorTip: attachmentsErrorTooltip">
<span data-bind="visible: 0 < attachmentsCount()"> <span data-bind="visible: 0 < attachmentsCount()">
@ -169,7 +169,7 @@
</div> </div>
<div class="pull-right" style="margin-right: 4px;"> <div class="pull-right" style="margin-right: 4px;">
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<a class="btn first" <a class="btn"
style="padding-left: 10px; padding-right: 10px;" style="padding-left: 10px; padding-right: 10px;"
data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'"> data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i> <sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>

View file

@ -6,7 +6,7 @@
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn single button-create-contact" data-bind="command: newCommand"> <a class="btn button-create-contact" data-bind="command: newCommand">
<i class="icon-plus"></i> <i class="icon-plus"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="i18n" data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span> <span class="i18n" data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
@ -14,19 +14,19 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn single btn-success button-new-message" data-bind="command: newMessageCommand"> <a class="btn btn-success button-new-message" data-bind="command: newMessageCommand">
<i class="icon-mail icon-white"></i> <i class="icon-mail icon-white"></i>
</a> </a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a class="btn single button-delete" data-bind="command: deleteCommand"> <a class="btn button-delete" data-bind="command: deleteCommand">
<i class="fontastic">🗑</i> <i class="fontastic">🗑</i>
</a> </a>
</div> </div>
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true"> <div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true">
<a id="contacts-more-dropdown-id" class="btn single dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown"> <a id="contacts-more-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown">
<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(), <i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(),
'icon-spinner': contacts.importing() || contacts.syncing()}"></i> 'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
</a> </a>
@ -109,7 +109,7 @@
</div> </div>
<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}"> <div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true"> <div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn single dropdown-toggle" data-toggle="dropdown"> <a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle" data-toggle="dropdown">
<span class="i18n" data-i18n="CONTACTS/ADD_MENU_LABEL"></span> <span class="i18n" data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="caret"></span> <span class="caret"></span>
@ -152,7 +152,7 @@
</div> </div>
<div class="btn-group pull-right">&nbsp;</div> <div class="btn-group pull-right">&nbsp;</div>
<div class="btn-group pull-right"> <div class="btn-group pull-right">
<button class="btn single button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}"> <button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i> <i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
&nbsp;&nbsp; &nbsp;&nbsp;
<span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span> <span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>

View file

@ -17,7 +17,7 @@
<div class="b-footer"> <div class="b-footer">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }"> <a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i> <i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
</a> </a>
</div> </div>

View file

@ -2,12 +2,12 @@
<div class="b-toolbar" style="padding-left: 0"> <div class="b-toolbar" style="padding-left: 0">
<div class="btn-toolbar" style="margin-top: 2px;"> <div class="btn-toolbar" style="margin-top: 2px;">
<div class="btn-group" data-bind="visible: mobile && leftPanelDisabled()"> <div class="btn-group" data-bind="visible: mobile && leftPanelDisabled()">
<a class="btn btn-thin-2 single" data-bind="click: showLeft"> <a class="btn btn-thin-2" data-bind="click: showLeft">
<i class="icon-right-middle"></i> <i class="icon-right-middle"></i>
</a> </a>
</div> </div>
<div class="btn-group" data-bind="visible: mobile && !leftPanelDisabled()" style="margin-left: -1px"> <div class="btn-group" data-bind="visible: mobile && !leftPanelDisabled()" style="margin-left: -1px">
<a class="btn btn-thin-2 single" data-bind="click: hideLeft"> <a class="btn btn-thin-2" data-bind="click: hideLeft">
<i class="icon-left-middle"></i> <i class="icon-left-middle"></i>
</a> </a>
</div> </div>

View file

@ -1,7 +1,17 @@
<div class="b-system-drop-down g-ui-user-select-none"> <div class="b-system-drop-down g-ui-user-select-none">
<div class="b-toolbar"> <div class="b-toolbar">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group btn-group-last pull-right dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger"> <div class="audioPlace" data-tooltip-i18n="off"
data-bind="visible: '' !== currentAudio(), tooltip: currentAudio, click: stopPlay">
<div class="playIcon equaliser" data-bind="css: {'animated': '' !== currentAudio()}">
<div class="bar first"></div>
<div class="bar second"></div>
<div class="bar third"></div>
</div>
<i class="stopIcon fontastic"></i>
</div>
<div class="accountPlace hide-on-mobile" data-bind="text: emailTitle()"></div>
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-ellipsis btn-block dropdown-toggle system-dropdown" data-toggle="dropdown"> <a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-ellipsis btn-block dropdown-toggle system-dropdown" data-toggle="dropdown">
<i class="fontastic" data-bind="css: {'icon-spinner': accounts.loading()}">👤</i> <i class="fontastic" data-bind="css: {'icon-spinner': accounts.loading()}">👤</i>
<!-- <!--
@ -77,16 +87,6 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="accountPlace pull-right hide-on-mobile" data-bind="text: emailTitle()"></div>
<div class="audioPlace pull-right" data-tooltip-i18n="off"
data-bind="visible: '' !== currentAudio(), tooltip: currentAudio, click: stopPlay">
<div class="playIcon equaliser" data-bind="css: {'animated': '' !== currentAudio()}">
<div class="bar first"></div>
<div class="bar second"></div>
<div class="bar third"></div>
</div>
<i class="stopIcon fontastic"></i>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -10,16 +10,15 @@
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
} }
// Space out series of button groups .btn-group:not(:first-child) {
.btn-group + .btn-group { margin-left: 3px;
margin-left: 5px;
} }
// Optional: Group multiple button groups together for a toolbar // Optional: Group multiple button groups together for a toolbar
.btn-toolbar { .btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2; margin-top: 0;
margin-bottom: @baseLineHeight / 2; margin-bottom: 0;
.btn-group { .btn-group {
display: inline-block; display: inline-block;
} }
@ -54,14 +53,14 @@
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child { .btn-group > .btn:first-child {
margin-left: 0; margin-left: 0;
border-top-left-radius: 4px; border-top-left-radius: 3px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 3px;
} }
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child, .btn-group > .btn:last-child,
.btn-group > .dropdown-toggle { .btn-group > .dropdown-toggle {
border-top-right-radius: 4px; border-top-right-radius: 3px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 3px;
} }
// Reset corners for large buttons // Reset corners for large buttons
.btn-group > .btn.large:first-child { .btn-group > .btn.large:first-child {

View file

@ -8,6 +8,8 @@
// Core // Core
.btn { .btn {
border-radius: 3px;
display: inline-block; display: inline-block;
padding: 4px 13px; padding: 4px 13px;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
@ -16,21 +18,16 @@
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder; border: 1px solid @btnBorder;
border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
color: @grayDark;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @btnBackground;
// Hover state // Hover state
&:hover { &:hover {
color: @grayDark; opacity: 0.9;
text-decoration: none;
background-color: darken(@white, 10%);
background-position: 0 -15px;
// transition is only when going to hover, otherwise the background
// behind the gradient (there for IE<=9 fallback) gets mismatched
transition: background-position .1s linear;
} }
// Focus state for keyboard and accessibility // Focus state for keyboard and accessibility
@ -41,8 +38,7 @@
// Active state // Active state
&.active, &.active,
&:active { &:active {
background-color: darken(@white, 10%); opacity: 0.9;
background-image: none;
outline: 0; outline: 0;
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
} }
@ -51,9 +47,7 @@
&.disabled, &.disabled,
&[disabled] { &[disabled] {
cursor: default; cursor: default;
background-color: darken(@white, 10%); opacity: 0.7;
background-image: none;
opacity: 0.8;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
} }
@ -67,7 +61,7 @@
// Large // Large
.btn-large { .btn-large {
padding: 9px 14px; padding: 9px 14px;
font-size: @baseFontSize + 2px; font-size: @baseFontSize + 3px;
line-height: normal; line-height: normal;
border-radius: 5px; border-radius: 5px;
} }
@ -112,18 +106,21 @@
// ------------------------- // -------------------------
.btn { .btn {
// reset here as of 2.0.3 due to Recess property order // reset here as of 2.0.3 due to Recess property order
border-color: #c5c5c5;
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
} }
// Warning appears are orange // Warning appears are orange
.btn-warning { .btn-warning {
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); color: #fff;
background-color: @btnWarningBackground;
} }
// Danger and error appear as red // Danger and error appear as red
.btn-danger { .btn-danger {
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); color: #fff;
background-color: @btnDangerBackground;
} }
// Success appears as green // Success appears as green
.btn-success { .btn-success {
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); background-color: @btnSuccessBackground;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
} }

View file

@ -59,7 +59,7 @@
// Links within the dropdown menu // Links within the dropdown menu
a { a {
display: block; display: block;
padding: 3px 20px; padding: 3px 10px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @baseLineHeight;
@ -75,7 +75,6 @@
text-decoration: none; text-decoration: none;
color: @dropdownLinkColorHover; color: @dropdownLinkColorHover;
background-color: @dropdownLinkBackgroundHover; background-color: @dropdownLinkBackgroundHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
} }
// Active state // Active state
@ -86,7 +85,6 @@
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
background-color: @dropdownLinkBackgroundActive; background-color: @dropdownLinkBackgroundActive;
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
} }
// Disabled state // Disabled state

View file

@ -156,7 +156,7 @@ input[type="file"] {
// Make select elements obey height by applying a border // Make select elements obey height by applying a border
select { select {
width: 220px; // default input width + 10px of padding that doesn't get applied width: 223px; // default input width + 10px of padding that doesn't get applied
border: 1px solid #bbb; border: 1px solid #bbb;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
} }

View file

@ -76,39 +76,9 @@
// BACKGROUNDS
// --------------------------------------------------
// Gradients
#gradient {
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
}
}
// COMPONENT MIXINS // COMPONENT MIXINS
// -------------------------------------------------- // --------------------------------------------------
// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@startColor, @endColor);
border-color: @endColor @endColor darken(@endColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor;
}
}
// Grid System // Grid System
// ----------- // -----------

View file

@ -78,7 +78,7 @@
@btnInfoBackground: #5bc0de; @btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4; @btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462; @btnSuccessBackground: #84AB04;
@btnSuccessBackgroundHighlight: #51a351; @btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%); @btnWarningBackground: lighten(@orange, 15%);