New spinner icon

This commit is contained in:
RainLoop Team 2015-01-06 00:55:06 +04:00
parent 1613a4528b
commit 46187d0749
11 changed files with 95 additions and 56 deletions

View file

@ -1,12 +1,13 @@
.b-admin-general {
.flag-selector {
padding-top: 5px;
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
}
}

View file

@ -70,16 +70,16 @@
height: 18px;
vertical-align: bottom;
margin-bottom: 3px;
margin-top: 1px;
}
.sub-label {
padding-left: 8px;
padding-left: 12px;
}
.sub-checkbox {
position: absolute;
box-sizing: border-box;
margin-top: 1px;
.checkbox-box-sizes();
}

View file

@ -1,25 +1,26 @@
.b-settings-general {
.notification-desc-denied {
color: #999;
display: none;
}
.denied-by-browser {
.notification-desc-denied {
display: inline;
}
.notification-desc {
color: #999;
}
}
.flag-selector {
padding-top: 5px;
}
.flag-name {
border-bottom: 1px dashed #555;
}
}
.b-settings-general {
.notification-desc-denied {
color: #999;
display: none;
}
.denied-by-browser {
.notification-desc-denied {
display: inline;
}
.notification-desc {
color: #999;
}
}
.flag-selector {
padding-top: 5px;
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
}
}

View file

@ -70,6 +70,7 @@
line-height: 20px;
}
/*
@keyframes rotation {
to {transform: rotate(1turn);}
}
@ -86,19 +87,56 @@
line-height: 100%;
}
}
*/
@keyframes rotation {
to {transform: rotate(1turn);}
}
.icon-spinner {
font-family: Arial;
&:before {
content: "";
}
height: 11px;
width: 11px;
margin-right: -1px;
background: none;
border: 3px solid #aaa;
border-top-color: #333;
border-radius: 100%;
animation: none;
&.animated {
border-color: transparent;
border-top-color: #999;
animation: rotation .8s infinite linear;
}
}
html.no-cssanimations .icon-spinner {
background: none;
background-image: url('@{rlSyncFileStop}');
background-repeat: no-repeat;
border: none;
box-shadow: none;
height: 16px;
width: 16px;
font-family: Arial;
&:before {
content: "";
}
&.animated {
background: none;
background-image: url('@{rlSyncFile}');
}
}
html.cssanimations .icon-spinner.animated:before {
animation: rotation 1s infinite steps(40);
}

View file

@ -18,7 +18,7 @@
Language
</label>
<div class="controls">
<label class="flag-selector">
<div class="flag-selector">
<span class="flag-wrapper">
<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
</span>
@ -28,7 +28,7 @@
name: 'SaveTrigger',
params: { value: languageTrigger }
}"></div>
</label>
</div>
</div>
</div>
<div class="control-group">

View file

@ -36,7 +36,7 @@
params: { value: verifySslCertificate, label: 'Require verification of SSL certificate used (IMAP/SMTP)', inline: true }
}"></div>
&nbsp;&nbsp;
<span style="color:red">(beta)</span>
<span style="color:red">(unstable)</span>
</div>
</div>
<div class="control-group">

View file

@ -1,10 +1,10 @@
<label class="e-component e-checkbox" data-bind="click: click, css: {'inline': inline, 'disabled': disable() || !enable() }">
<label class="e-component e-checkbox inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
<i data-bind="css: value() ?
(inverted ? 'icon-checkbox-unchecked' : 'icon-checkbox-checked') :
(inverted ? 'icon-checkbox-checked' : 'icon-checkbox-unchecked')
"></i>
<!-- ko if: labeled -->
&nbsp;
&nbsp;&nbsp;
<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
<!-- /ko -->
</label>

View file

@ -1,5 +1,5 @@
<label class="e-component e-checkbox" data-bind="css: {'inline': inline, 'disabled': disable() || !enable() }">
<input type="checkbox" data-bind="checked: value, disable: disable() || !enable()" />
<label class="e-component e-checkbox inline" data-bind="css: { 'disabled': disable() || !enable() }">
<input type="checkbox" data-bind="checked: value, disable: disable() || !enable()" style="margin: 0 0 1px 0;" />
<!-- ko if: labeled -->
&nbsp;&nbsp;
<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>

View file

@ -1,11 +1,10 @@
<label class="e-component e-checkbox material-design" data-bind="click: click, css: {'inline': inline, 'disabled': disable() || !enable() }">
<label class="e-component e-checkbox material-design inline" data-bind="click: click, css: { 'disabled': disable() || !enable() }">
<div class="sub-checkbox-container">
<div class="sub-checkbox" data-bind="css: {'checked': (value() && !inverted) || (!value() && inverted),
'unchecked': (!value() && !inverted) || (value() && inverted),
'box': animationBox, 'checkmark': animationCheckmark}"></div>
</div>
<!-- ko if: labeled -->
&nbsp;
<span class="sub-label i18n" data-bind="attr: {'data-i18n-text': label}"></span>
<!-- /ko -->
</label>

View file

@ -8,7 +8,7 @@
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_LANGUAGE"></span>
</label>
<div class="controls">
<label class="flag-selector">
<div class="flag-selector">
<span class="flag-wrapper">
<span data-bind="css: 'flag flag-' + mainLanguage()" style=""></span>
</span>
@ -18,11 +18,11 @@
name: 'SaveTrigger',
params: { value: languageTrigger }
}"></div>
</label>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" style="padding-top: 0;">
<label class="control-label">
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_EDITOR"></span>
</label>
<div class="controls">
@ -39,7 +39,7 @@
</div>
</div>
<div class="control-group">
<label class="control-label" style="padding-top: 0;">
<label class="control-label">
<span class="i18n" data-i18n-text="SETTINGS_GENERAL/LABEL_LAYOUT"></span>
</label>
<div class="controls">

View file

@ -25,22 +25,22 @@ module.exports = {
},
externals: {
'window': 'window',
'JSON': 'JSON',
'JSON': 'window.JSON',
'JSEncrypt': 'window.JSEncrypt',
'$LAB': 'window.$LAB',
'SimplePace': 'window.SimplePace',
'PhotoSwipe': 'window.PhotoSwipe',
'PhotoSwipeUI_Default': 'window.PhotoSwipeUI_Default',
'queue': 'window.queue',
'moment': 'moment',
'ifvisible': 'ifvisible',
'crossroads': 'crossroads',
'hasher': 'hasher',
'Jua': 'Jua',
'Autolinker': 'Autolinker',
'ssm': 'ssm',
'key': 'key',
'_': '_',
'$': 'jQuery'
'moment': 'window.moment',
'ifvisible': 'window.ifvisible',
'crossroads': 'window.crossroads',
'hasher': 'window.hasher',
'Jua': 'window.Jua',
'Autolinker': 'window.Autolinker',
'ssm': 'window.ssm',
'key': 'window.key',
'_': 'window._',
'$': 'window.jQuery'
}
};