Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit 376aac5

Browse files
author
Mohammad Reza Hamedanchi
authored
Merge pull request #1 from ashkanx/ashkan/css
Ashkan/css
2 parents a94d349 + 4ed98f3 commit 376aac5

16 files changed

+850
-787
lines changed

‎src/sass/_animations.scss

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,76 @@
1-
*,
2-
*:after,
3-
*:before {
4-
transition: opacity .2s, color .2s, background .2s;
1+
*, *:after, *:before {
2+
transition: opacity 0.2s, color 0.2s, background 0.2s;
53
}
64

75
@keyframes spinning {
8-
from {transform: rotate(0deg);}
9-
to {transform: rotate(360deg);}
6+
from {
7+
transform: rotate(0deg);
8+
}
9+
to {
10+
transform: rotate(360deg);
11+
}
1012
}
13+
1114
@-webkit-keyframes spinning {
12-
from {transform: rotate(0deg);}
13-
to {transform: rotate(360deg);}
15+
from {
16+
transform: rotate(0deg);
17+
}
18+
to {
19+
transform: rotate(360deg);
20+
}
1421
}
22+
1523
.spinner {
16-
-webkit-animation: spinning .2s * 5 infinite linear;
17-
animation: spinning .2s * 5 infinite linear;
24+
-webkit-animation: spinning 0.2s * 5 infinite linear;
25+
animation: spinning 0.2s * 5 infinite linear;
1826
}
1927

2028
@keyframes pulsing {
21-
0% {opacity: 1;}
22-
50% {opacity: .5;}
23-
100% {opacity: 1;}
29+
0% {
30+
opacity: 1;
31+
}
32+
50% {
33+
opacity: 0.5;
34+
}
35+
100% {
36+
opacity: 1;
37+
}
2438
}
39+
2540
@-webkit-keyframes pulsing {
26-
0% {opacity: 1;}
27-
50% {opacity: .5;}
28-
100% {opacity: 1;}
41+
0% {
42+
opacity: 1;
43+
}
44+
50% {
45+
opacity: 0.5;
46+
}
47+
100% {
48+
opacity: 1;
49+
}
2950
}
51+
3052
.pulser {
3153
-webkit-animation: pulsing 3s infinite ease;
3254
animation: pulsing 3s infinite ease;
3355
}
3456

3557
.overlay {
3658
opacity: 1;
37-
transition: opacity .2s, height 0;
59+
transition: opacity 0.2s, height 0;
3860
}
3961

4062
.overlay.hidden {
4163
opacity: 0;
42-
transition: opacity .2s, height 0 .2s;
64+
transition: opacity 0.2s, height 0 0.2s;
4365
height: 0;
4466
}
4567

4668
.overlay .dialog {
47-
transition: transform .2s, height 0;
69+
transition: transform 0.2s, height 0;
4870
transform: scale(1);
4971
}
5072

5173
.overlay.hidden .dialog {
52-
transition: transform .2s, height 0 .2s;
53-
transform: scale(.9);
74+
transition: transform 0.2s, height 0 0.2s;
75+
transform: scale(0.9);
5476
}

‎src/sass/_constants.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ $CONTROL_PADDING: .33333em;
4040
$CONTROL_PADDING_L: .5em 1em;
4141
$PAGE_PADDING: .5em;
4242
$HEADER_HEIGHT: 3em;
43-
$BOX_SHADOW: 0 0 50px 0 rgba(0,0,0, .25);
43+
$BOX_SHADOW: 0 0 50px 0 rgba(0,0,0, 0.25);
4444

4545
$FONT_BASE: 1rem;
4646
$FONT_SCALE: 1.33333;

‎src/sass/common/password-meter.scss

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
meter#password-meter {
2-
width: 10.9em;
3-
height: .5em;
4-
-webkit-appearance: none;
5-
border: 1px solid #ccc;
6-
border-radius: 3px;
7-
vertical-align: top;
8-
display: block;
2+
display: block;
3+
width: 10.9em;
4+
height: 0.5em;
5+
-webkit-appearance: none;
6+
border: 1px solid $COLOR_DARK_WHITE;
7+
border-radius: 3px;
98
}
109

1110
meter#password-meter::-webkit-meter-bar {
12-
background: #f5f5f5;
13-
box-shadow: 0 5px 5px -5px #333 inset;
11+
background: $COLOR_LIGHT_GRAY;
12+
box-shadow: 0 5px 5px -5px rgba(0,0,0, 0.25) inset;
1413
}

‎src/sass/common/reality-check.scss

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,65 @@
11
.lightbox {
2-
display: table;
3-
position: fixed;
4-
top: 0;
5-
left: 0;
6-
width: 100%;
7-
height: 100%;
8-
background-color: rgba(0,0,0,.7);
9-
z-index: 2000000000;
2+
display: table;
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
background-color: rgba(0,0,0, 0.7);
9+
z-index: 2000000000;
1010
}
11+
1112
.lightbox > div {
12-
display: table-cell;
13+
display: table-cell;
1314
vertical-align: middle;
1415
}
16+
1517
.lightbox > div > div {
16-
margin-left: auto;
17-
margin-right: auto;
18-
padding: .5em .5em;
19-
width: 44em;
20-
text-align: center;
21-
background-color: #fff;
22-
border-radius: .3em;
23-
max-height: 80vh;
24-
overflow: auto;
18+
margin-left: auto;
19+
margin-right: auto;
20+
padding: 0.5em;
21+
width: 44em;
22+
text-align: center;
23+
background-color: $COLOR_WHITE;
24+
border-radius: 0.3em;
25+
max-height: 80vh;
26+
overflow: auto;
2527
}
28+
2629
#reality-check-content, #balances-content {
27-
padding: 0;
30+
padding: 0;
2831
text-align: left;
2932
tr, td {
30-
width: 12.4999%;
33+
width: 12.5%;
3134
}
3235
label {
3336
display: inline-block;
34-
width: 14em;
37+
width: 14em;
3538
}
3639
}
40+
3741
#reality-check-content {
38-
@media screen and (max-width: 480px){
42+
@media screen and (max-width: 480px) {
3943
width: 45% !important;
4044
}
4145
}
46+
4247
#reality-check-nav, #balances-nav {
4348
margin-top: 1em;
4449
span:nth-child(2) {
4550
display: inline-block;
46-
width: 5em;
51+
width: 5em;
4752
}
4853
}
49-
#reality-check-nav{
50-
@media screen and (max-width: 480px){
51-
width : 45% !important;
54+
55+
#reality-check-nav {
56+
@media screen and (max-width: 480px) {
57+
width: 45% !important;
5258
}
5359
}
5460

55-
@media screen and (max-width: 480px){
56-
#risk_classification.lightbox > div > div {
57-
width: 95vw;
58-
}
61+
@media screen and (max-width: 480px) {
62+
#risk_classification.lightbox > div > div {
63+
width: 95vw;
64+
}
5965
}

‎src/sass/common/tooltip.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,51 @@
1-
#tooltip
2-
{
1+
#tooltip {
32
font-family: proxima-nova, arial, sans-serif;
43
font-size: 14px;
54
line-height: 1.5;
6-
color: #000;
7-
background: #FFF1CF;
5+
color: $COLOR_BLACK;
6+
background: $COLOR_YELLOW;
87
border-radius: 5px;
98
border: 1px solid $COLOR_GRAY_SHADE;
10-
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
9+
box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.3 );
1110
position: absolute;
1211
z-index: 100;
1312
padding: 15px;
1413
}
15-
#tooltip:after
16-
{
14+
15+
#tooltip:after {
1716
width: 0;
1817
height: 0;
1918
border-left: 10px solid transparent;
2019
border-right: 10px solid transparent;
2120
border-top: 10px solid $COLOR_GRAY_SHADE;
22-
border-top-color: #FFF1CF;
21+
border-top-color: #$COLOR_YELLOW;
2322
content: '';
2423
position: absolute;
2524
left: 50%;
2625
bottom: -10px;
2726
margin-left: -10px;
2827
}
29-
#tooltip.top:after
30-
{
28+
29+
#tooltip.top:after {
3130
border-top-color: transparent;
3231
border-bottom: 10px solid $COLOR_GRAY_SHADE;
3332
border-bottom-color: $COLOR_GRAY_SHADE;
3433
top: -20px;
3534
bottom: auto;
3635
}
37-
#tooltip.left:after
38-
{
36+
37+
#tooltip.left:after {
3938
left: 10px;
4039
margin: 0;
4140
}
42-
#tooltip.right:after
43-
{
41+
42+
#tooltip.right:after {
4443
right: 10px;
4544
left: auto;
4645
margin: 0;
4746
}
4847

49-
//Required to display a dotted line at the bottom of abbr.
48+
/* Required to display a dotted line at the bottom of abbr.*/
5049
abbr {
51-
border-bottom: 1px dotted $COLOR_BLACK;
50+
border-bottom: 1px dotted $COLOR_BLACK;
5251
}

0 commit comments

Comments
 (0)