Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-01 21:49:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added knockoutjs components

Browse source 
Added material design checkbox component
Added lang changing animation
This commit is contained in:
RainLoop Team 2014-10-30 01:08:53 +04:00
parent c2b7632c13
commit 1423b88839
48 changed files with 1213 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

1
dev/Styles/@Main.less
View file

@ -52,6 +52,7 @@
@import "Main.less";
@import "Layout.less";
@import "Scroll.less";
@import "Components.less";
@import "SystemDropDown.less";
@import "Login.less";
@import "Ask.less";

145
dev/Styles/Components.less Normal file
View file

@ -0,0 +1,145 @@
.checkbox-box-sizes() {
top: 0px;
left: 0px;
width: 18px;
height: 18px;
border: solid 2px #999;
transform: rotate(0deg);
}
.checkbox-mark-sizes() {
/* top: -4px;
left: 6px;
width: 10px;
height: 21px;*/
top: -1px;
left: 5px;
width: 10px;
height: 18px;
border-right-width: 2px;
border-bottom-width: 2px;
transform: rotate(45deg);
}
.checkbox-result-sizes() {
top: 13px;
left: 5px;
width: 4px;
height: 4px;
transform: rotate(45deg);
}
.e-component {
&.e-checkbox {
cursor: pointer;
&.disabled {
cursor: default;
color: #999;
}
}
&.e-radio {
cursor: pointer;
&.disabled {
cursor: default;
color: #999;
}
}
}
.e-component.material-design {
&.e-checkbox {
.sub-checkbox-container {
display: inline-block;
position: relative;
transform: translateZ(0);
width: 18px;
height: 18px;
vertical-align: bottom;
margin-bottom: 3px;
margin-top: 1px;
}
.sub-label {
padding-left: 8px;
}
.sub-checkbox {
position: absolute;
box-sizing: border-box;
.checkbox-box-sizes();
}
&.disabled .sub-checkbox {
cursor: default;
color: #aaa;
}
.sub-checkbox.checked {
border-top: none;
border-left: none;
border-color: #0F9D58;
.checkbox-mark-sizes();
}
// animation
.sub-checkbox.checked {
&.box {
border: solid 2px;
animation: box-shrink 140ms ease-out forwards;
}
&.checkmark {
border-left: none;
border-top: none;
animation: checkmark-expand 140ms ease-out forwards;
}
}
.sub-checkbox.unchecked {
&.box {
animation: box-expand 140ms ease-out forwards;
}
&.checkmark {
border-left: none;
border-top: none;
transform: rotate(45deg);
animation: checkmark-shrink 140ms ease-out forwards;
}
}
}
}
@keyframes box-shrink {
0% { .checkbox-box-sizes(); }
100% { .checkbox-result-sizes(); }
}
@keyframes checkmark-expand {
0% { .checkbox-result-sizes(); }
100% { .checkbox-mark-sizes(); }
}
@keyframes checkmark-shrink {
0% { .checkbox-mark-sizes(); }
100% { .checkbox-result-sizes(); }
}
@keyframes box-expand {
0% { .checkbox-result-sizes(); }
100% { .checkbox-box-sizes(); }
}