Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge and cleanup more CSS rules

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

15
dev/External/ko.js vendored
View file

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

5
dev/Styles/Admin.less
View file

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

14
dev/Styles/Compose.less
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;
}

2
dev/Styles/SettingsFolders.less
View file

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

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

78
dev/Styles/_BootstrapFix.less
View file

@ -7,20 +7,6 @@ label.inline, span.inline {
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 {
display: block;
width: 100%;
@ -47,10 +33,6 @@ label.inline, span.inline {
border-radius: 3px;
}
select {
width: 223px;
}
.btn-small.btn-small-small {
padding: 3px 9px;
font-size: 11px;
@ -65,10 +47,6 @@ select {
padding: 4px 7px;
}
.btn.btn-nowrap {
white-space: nowrap;
}
.btn.btn-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
@ -103,27 +81,11 @@ select {
}
}
.btn.btn-narrow {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.btn-group-custom-margin > .btn + .btn {
margin-left: 0;
}
.btn.btn-large {
font-size: 17px;
}
.btn-group + .btn-group {
margin-left: 3px;
}
.btn {
border-radius: @btnBorderRadius;
background-image: none;
// &:active {
// .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 {
// .dropdown-toggle {
// .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 {
margin-top: 9px;
padding-top: 9px;
@ -168,35 +115,10 @@ select {
*/
}
.btn-group > .btn {
border-radius: 0 !important;
}
.btn-group > .btn.single {
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 {
color: #BD362F;

28
dev/Styles/_End.less
View file

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

2
snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html
View file

@ -9,7 +9,7 @@
<span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span>
</h4>
<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>
</a>
</div>

6
snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
View file

@ -23,15 +23,15 @@
<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="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>
</a>
</div>
<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>
</a>
<a class="btn last" data-bind="click: configureFolders">
<a class="btn" data-bind="click: configureFolders">
<i class="fontastic">⚙</i>
</a>
</div>

31
snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
View file

@ -5,32 +5,32 @@
<div class="btn-toolbar">
<!-- ko if: allowFolders && mobile -->
<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>
</a>
</div>
<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>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<!-- /ko -->
<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>
</a>
</div>
<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
<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>
</a>
</div>
<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
<!-- ko if: !newMoveToFolder -->
<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-folder hidden-on-ctrl-btn"></i>
<span class="caret"></span>
@ -44,7 +44,7 @@
<!-- /ko -->
<!-- ko if: newMoveToFolder -->
<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-folder hidden-on-ctrl-btn"></i>
</a>
@ -52,29 +52,26 @@
<!-- /ko -->
<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
<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'">
<i class="icon-archive"></i>
</a>
<a class="btn btn-dark-disabled-border button-spam"
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM',
css: {'first': !isArchiveVisible()}">
<a class="btn button-spam"
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'GLOBAL/SPAM'">
<i class="fontastic">⚠</i>
</a>
<a class="btn btn-dark-disabled-border button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM',
css: {'first': !isArchiveVisible()}">
<a class="btn button-not-spam"
data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn last btn-dark-disabled-border button-delete"
data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE',
css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
<a class="btn button-delete"
data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">
<i class="fontastic">🗑</i>
<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
</a>
</div>
<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>
</a>
<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">

26
snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
View file

@ -3,37 +3,37 @@
<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
<div class="messageButtons btn-toolbar">
<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>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<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>
</a>
</div>
<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
<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>
</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>
</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>
</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>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<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>
</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>
</a>
</div>
@ -69,7 +69,7 @@
<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" 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="caret"></span>
</a>
@ -180,22 +180,22 @@
</div>
</ul>
</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'">
<i class="fontastic">←</i>
</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'">
<i class="fontastic">↞</i>
</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'">
<i class="fontastic">→</i>
</a>
</div>
<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>
</a>
</div>

10
snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
View file

@ -46,7 +46,7 @@
</div>
<div class="pull-right">
<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>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu">
@ -82,7 +82,7 @@
</div>
<div class="btn-group pull-right">&nbsp;</div>
<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>
</a>
</div>
@ -152,11 +152,11 @@
<div>
<div class="pull-left">
<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() }">
<i class="icon-file-text"></i>
</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() },
tooltipErrorTip: attachmentsErrorTooltip">
<span data-bind="visible: 0 < attachmentsCount()">
@ -169,7 +169,7 @@
</div>
<div class="pull-right" style="margin-right: 4px;">
<div class="btn-group pull-right">
<a class="btn first"
<a class="btn"
style="padding-left: 10px; padding-right: 10px;"
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>

12
snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
View file

@ -6,7 +6,7 @@
<div class="btn-toolbar">
<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>
&nbsp;&nbsp;
<span class="i18n" data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
@ -14,19 +14,19 @@
</div>
<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>
</a>
</div>
<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>
</a>
</div>
<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(),
'icon-spinner': contacts.importing() || contacts.syncing()}"></i>
</a>
@ -109,7 +109,7 @@
</div>
<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">
<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>
&nbsp;&nbsp;
<span class="caret"></span>
@ -152,7 +152,7 @@
</div>
<div class="btn-group pull-right">&nbsp;</div>
<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>
&nbsp;&nbsp;
<span class="i18n" data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>

2
snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html
View file

@ -17,7 +17,7 @@
<div class="b-footer">
<div class="btn-toolbar">
<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>
</a>
</div>

4
snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html
View file

@ -2,12 +2,12 @@
<div class="b-toolbar" style="padding-left: 0">
<div class="btn-toolbar" style="margin-top: 2px;">
<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>
</a>
</div>
<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>
</a>
</div>

22
snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html
View file

@ -1,7 +1,17 @@
<div class="b-system-drop-down g-ui-user-select-none">
<div class="b-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">
<i class="fontastic" data-bind="css: {'icon-spinner': accounts.loading()}">👤</i>
<!--
@ -77,16 +87,6 @@
</li>
</ul>
</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>

17
vendors/bootstrap/less/button-groups.less vendored
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)
}
// Space out series of button groups
.btn-group + .btn-group {
margin-left: 5px;
.btn-group:not(:first-child) {
margin-left: 3px;
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2;
margin-bottom: @baseLineHeight / 2;
margin-top: 0;
margin-bottom: 0;
.btn-group {
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
.btn-group > .btn:first-child {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {

35
vendors/bootstrap/less/buttons.less vendored
View file

@ -8,6 +8,8 @@
// Core
.btn {
border-radius: 3px;
display: inline-block;
padding: 4px 13px;
margin-bottom: 0; // For input.btn
@ -16,21 +18,16 @@
text-align: center;
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
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);
color: @grayDark;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @btnBackground;
// Hover state
&:hover {
color: @grayDark;
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;
opacity: 0.9;
}
// Focus state for keyboard and accessibility
@ -41,8 +38,7 @@
// Active state
&.active,
&:active {
background-color: darken(@white, 10%);
background-image: none;
opacity: 0.9;
outline: 0;
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] {
cursor: default;
background-color: darken(@white, 10%);
background-image: none;
opacity: 0.8;
opacity: 0.7;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
@ -67,7 +61,7 @@
// Large
.btn-large {
padding: 9px 14px;
font-size: @baseFontSize + 2px;
font-size: @baseFontSize + 3px;
line-height: normal;
border-radius: 5px;
}
@ -112,18 +106,21 @@
// -------------------------
.btn {
// 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);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
color: #fff;
background-color: @btnWarningBackground;
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
color: #fff;
background-color: @btnDangerBackground;
}
// Success appears as green
.btn-success {
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
background-color: @btnSuccessBackground;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

4
vendors/bootstrap/less/dropdowns.less vendored
View file

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

2
vendors/bootstrap/less/forms.less vendored
View file

@ -156,7 +156,7 @@ input[type="file"] {
// Make select elements obey height by applying a border
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;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}

30
vendors/bootstrap/less/mixins.less vendored
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
// --------------------------------------------------
// 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
// -----------

2
vendors/bootstrap/less/variables.less vendored
View file

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