Skip to content

Commit 84afef5

Browse files
robhrt7robhrt7
committed
v.0.1.0
1 parent ce00d27 commit 84afef5

File tree

5 files changed

+695
-1
lines changed

5 files changed

+695
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Sourcejs_crowd-voice
1+
Crowd Voice
22
====================
33

44
Crowd Voice - Sourcejs plugin for adding user custom info on spec page from browser.

‎css/crowdVoice.css

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
/*
2+
*
3+
* Crowd Voice plugin for adding user custom info on page from browser
4+
*
5+
* @author Robert Haritonov (http://rhr.me)
6+
* Organised by http://rhr.me/MCSS methodology
7+
*
8+
* */
9+
/* Base
10+
---------------------------------------------------------------------------------- */
11+
/* /Base
12+
---------------------------------------------------------------------------------- */
13+
/* Project
14+
---------------------------------------------------------------------------------- */
15+
.crowd-voice_section {
16+
margin-right: 33.6%;
17+
padding: 10px 25px 0;
18+
}
19+
.crowd-voice_section.__edit-mode {
20+
padding-bottom: 10px;
21+
outline: dashed 3px #ccc;
22+
}
23+
.crowd-voice_section.__edit-mode .crowd-voice_text-add {
24+
display: block;
25+
}
26+
.crowd-voice_section.__textarea-focused .crowd-voice_text {
27+
color: #999;
28+
}
29+
.crowd-voice_text {
30+
-webkit-transition: color .2s;
31+
-moz-transition: color .2s;
32+
-o-transition: color .2s;
33+
transition: color .2s;
34+
}
35+
.crowd-voice_text:empty {
36+
display: none;
37+
}
38+
.crowd-voice_text-add {
39+
display: none;
40+
/* Hidden before activation */
41+
42+
margin-top: 7px;
43+
}
44+
.crowd-voice_text-add_editor {
45+
position: relative;
46+
margin-bottom: 5px;
47+
}
48+
.crowd-voice_text-add_txt {
49+
width: 100%;
50+
height: 100px;
51+
resize: vertical;
52+
padding: 10px 10px 15px;
53+
-moz-box-sizing: border-box;
54+
box-sizing: border-box;
55+
border-color: #C6C6C6;
56+
font-size: 13px;
57+
color: #999;
58+
-webkit-transition: color .2s;
59+
-moz-transition: color .2s;
60+
-o-transition: color .2s;
61+
transition: color .2s;
62+
}
63+
.crowd-voice_text-add_txt:focus {
64+
color: #333;
65+
}
66+
.crowd-voice_text-add_status {
67+
visibility: hidden;
68+
position: absolute;
69+
top: 100%;
70+
left: 50%;
71+
max-width: 90%;
72+
background-color: #FFF;
73+
margin-top: -21px;
74+
-webkit-transform: translate(-50%);
75+
-o-transform: translate(-50%);
76+
transform: translate(-50%);
77+
padding: 5px 10px;
78+
-moz-box-sizing: border-box;
79+
box-sizing: border-box;
80+
line-height: 1.2;
81+
text-align: center;
82+
color: #999;
83+
white-space: nowrap;
84+
text-overflow: ellipsis;
85+
overflow: hidden;
86+
}
87+
.crowd-voice_text-add.__status-success .crowd-voice_text-add_status {
88+
-webkit-animation: success-anim 2s;
89+
-moz-animation: success-anim 2s;
90+
-o-animation: success-anim 2s;
91+
animation: success-anim 2s;
92+
}
93+
@-webkit-keyframes success-anim {
94+
0% {
95+
opacity: 0;
96+
visibility: visible;
97+
}
98+
10% {
99+
opacity: 1;
100+
}
101+
90% {
102+
opacity: 1;
103+
}
104+
100% {
105+
opacity: 0;
106+
}
107+
}
108+
@-moz-keyframes success-anim {
109+
0% {
110+
opacity: 0;
111+
visibility: visible;
112+
}
113+
10% {
114+
opacity: 1;
115+
}
116+
90% {
117+
opacity: 1;
118+
}
119+
100% {
120+
opacity: 0;
121+
}
122+
}
123+
@-o-keyframes success-anim {
124+
0% {
125+
opacity: 0;
126+
visibility: visible;
127+
}
128+
10% {
129+
opacity: 1;
130+
}
131+
90% {
132+
opacity: 1;
133+
}
134+
100% {
135+
opacity: 0;
136+
}
137+
}
138+
@keyframes success-anim {
139+
0% {
140+
opacity: 0;
141+
visibility: visible;
142+
}
143+
10% {
144+
opacity: 1;
145+
}
146+
90% {
147+
opacity: 1;
148+
}
149+
100% {
150+
opacity: 0;
151+
}
152+
}
153+
.crowd-voice_text-add.__status-fail .crowd-voice_text-add_status {
154+
visibility: visible;
155+
color: #FF6564;
156+
}
157+
.crowd-voice_text-add.__status-fail .crowd-voice_text-add_txt {
158+
border-color: #FEA3B3;
159+
}
160+
.crowd-voice_text-add_delete {
161+
color: #FF6564;
162+
text-decoration: underline;
163+
}
164+
/* /Project
165+
---------------------------------------------------------------------------------- */

‎css/less/crowdVoice.less

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/*
2+
*
3+
* Crowd Voice plugin for adding user custom info on page from browser
4+
*
5+
* @author Robert Haritonov (http://rhr.me)
6+
* Organised by http://rhr.me/MCSS methodology
7+
*
8+
* */
9+
10+
11+
12+
/* Base
13+
---------------------------------------------------------------------------------- */
14+
15+
@media-retina: ~'only screen and (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)';
16+
17+
/* /Base
18+
---------------------------------------------------------------------------------- */
19+
20+
/* Project
21+
---------------------------------------------------------------------------------- */
22+
23+
.crowd-voice_section {
24+
margin-right: 33.6%;
25+
padding: 10px 25px 0;
26+
27+
&.__edit-mode {
28+
padding-bottom: 10px;
29+
outline: dashed 3px #ccc;
30+
31+
.crowd-voice_text-add {
32+
display: block;
33+
}
34+
35+
}
36+
37+
&.__textarea-focused {
38+
.crowd-voice_text {
39+
color: #999;
40+
}
41+
}
42+
}
43+
44+
.crowd-voice_text {
45+
-webkit-transition: color .2s;
46+
-moz-transition: color .2s;
47+
-o-transition: color .2s;
48+
transition: color .2s;
49+
50+
&:empty {
51+
display: none;
52+
}
53+
}
54+
55+
.crowd-voice_text-add {
56+
display: none; /* Hidden before activation */
57+
margin-top: 7px;
58+
59+
&_editor {
60+
position: relative;
61+
margin-bottom: 5px;
62+
}
63+
64+
&_txt {
65+
width: 100%;
66+
height: 100px;
67+
resize: vertical;
68+
69+
padding: 10px 10px 15px;
70+
71+
-moz-box-sizing: border-box;
72+
box-sizing: border-box;
73+
74+
border-color: #C6C6C6;
75+
76+
font-size: 13px;
77+
color: #999; //faded till focus
78+
79+
-webkit-transition: color .2s;
80+
-moz-transition: color .2s;
81+
-o-transition: color .2s;
82+
transition: color .2s;
83+
84+
&:focus {
85+
color: #333;
86+
}
87+
}
88+
89+
&_status {
90+
visibility: hidden; //Is shown when get some statuses
91+
92+
position: absolute;
93+
top: 100%;
94+
left: 50%;
95+
max-width: 90%;
96+
background-color: #FFF;
97+
margin-top: -21px;
98+
99+
-webkit-transform: translate(-50%);
100+
-o-transform: translate(-50%);
101+
transform: translate(-50%);
102+
103+
padding: 5px 10px;
104+
105+
-moz-box-sizing: border-box;
106+
box-sizing: border-box;
107+
108+
line-height: 1.2;
109+
text-align: center;
110+
color: #999;
111+
112+
white-space: nowrap;
113+
text-overflow: ellipsis;
114+
overflow: hidden;
115+
}
116+
117+
//Generated CSS classes
118+
&.__status-success {
119+
120+
.crowd-voice_text-add_status {
121+
122+
.success-anim () {
123+
0% { opacity: 0; visibility: visible; }
124+
10% { opacity: 1; }
125+
90% { opacity: 1; }
126+
100% { opacity: 0; }
127+
}
128+
129+
@-webkit-keyframes success-anim {.success-anim;}
130+
@-moz-keyframes success-anim {.success-anim;}
131+
@-o-keyframes success-anim {.success-anim;}
132+
@keyframes success-anim {.success-anim;}
133+
134+
@success-anim__props: success-anim 2s;
135+
136+
-webkit-animation: @success-anim__props;
137+
-moz-animation: @success-anim__props;
138+
-o-animation: @success-anim__props;
139+
animation: @success-anim__props;
140+
}
141+
}
142+
143+
&.__status-fail {
144+
.crowd-voice_text-add_status {
145+
visibility: visible;
146+
147+
color: #FF6564;
148+
}
149+
150+
.crowd-voice_text-add_txt {
151+
border-color: #FEA3B3;
152+
}
153+
}
154+
155+
&_delete {
156+
color: #FF6564;
157+
text-decoration: underline;
158+
}
159+
}
160+
161+
/* /Project
162+
---------------------------------------------------------------------------------- */

0 commit comments

Comments
 (0)