Skip to content

Commit 101e893

Browse files
hihaykhihayk
committed
added new design
1 parent 95abbcb commit 101e893

File tree

6 files changed

+332
-45
lines changed

6 files changed

+332
-45
lines changed

‎public/images/conv-arr.svg

Lines changed: 9 additions & 0 deletions
Loading

‎public/images/sass-icon.svg

Lines changed: 22 additions & 0 deletions
Loading

‎public/images/scss-icon.svg

Lines changed: 24 additions & 0 deletions
Loading

‎public/stylesheets/app.css

Lines changed: 230 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,231 @@
1-
body { margin: 20px 100px;color:gray;font-family: monospace }
1+
html{
2+
height: 100%;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
}
6+
body {
7+
margin: 0;
8+
font-family: Source Code Pro;
9+
font-size: 12px;
10+
height: 100%;
11+
}
12+
a{
13+
color: inherit;
14+
text-decoration: none;
15+
border-bottom: 1px solid #ccc;
16+
padding-bottom: 4px;
17+
-webkit-transition: all 0.3s ease;
18+
-moz-transition: all 0.3s ease;
19+
transition: all 0.3s ease;
20+
}
21+
a:hover{
22+
color: #3fa9f5;
23+
border-bottom: 1px solid #3fa9f5;
24+
}
25+
.wrapper{
26+
height: 100%;
27+
overflow: hidden;
28+
}
29+
.top-section{
30+
padding: 30px 30px 20px 30px;
31+
}
32+
header{
33+
border-bottom: 1px solid #e6e6e6;
34+
margin-bottom: 10px;
35+
}
36+
h1{
37+
font-family: montserrat;
38+
font-size: 18px;
39+
text-transform: uppercase;
40+
color: #3fa9f5;
41+
font-weight: normal;
42+
}
43+
h1 span{
44+
color: #333;
45+
}
46+
.top-info-section{
47+
margin-bottom: 20px;
48+
float: left;
49+
width: 100%;
50+
color: #666;
51+
}
52+
.version-info{
53+
float: left;
54+
}
55+
.author-info{
56+
float: right;
57+
}
58+
.author-info p{
59+
margin-bottom: 0;
60+
}
61+
.app-section{
62+
float: left;
63+
width: 100%;
64+
height: 100%;
65+
overflow: hidden;
66+
}
67+
.tabs-section{
68+
background-color: #e6e6e6;
69+
float: left;
70+
width: 100%;
71+
}
72+
.tab{
73+
float: left;
74+
position: relative;
75+
}
76+
.tab.css{
77+
width: 50%;
78+
}
79+
.tab.css:after{
80+
content: "";
81+
position: absolute;
82+
width: 1px;
83+
height: 100%;
84+
right: 0;
85+
top: 0;
86+
background-color: #ccc;
87+
}
88+
.tab.sass,
89+
.tab.scss
90+
{
91+
width: 25%;
92+
}
93+
.tab h2{
94+
font-family: montserrat;
95+
font-weight: normal;
96+
text-transform: uppercase;
97+
font-size: 18px;
98+
padding: 11px 30px;
99+
margin: 0;
100+
}
101+
.code-section{
102+
background-color: #333;
103+
float: left;
104+
width: 100%;
105+
height: 100%;
106+
}
107+
.notifications{
108+
display: none; /* TODO find a place*/
109+
}
110+
.code-container.left:after{
111+
content: "";
112+
position: absolute;
113+
width: 1px;
114+
height: 100%;
115+
right: 0;
116+
top: 0;
117+
background-color: #252525;
118+
}
119+
.code-container{
120+
width: 50%;
121+
float: left;
122+
position: relative;
123+
max-height: 100%;
124+
overflow: hidden;
125+
}
126+
.code-container label{
127+
position: absolute;
128+
top: 0;
129+
padding: 20px 30px 5px;
130+
font-size: 14px;
131+
color: #999;
132+
background-color: #333;
133+
box-shadow: 0 5px 50px 0 #333;
134+
width: 100%;
135+
}
136+
.code-container textarea{
137+
width: 100%;
138+
height: 80%;
139+
padding: 60px 30px 20px 30px;
140+
font-family: inherit;
141+
font-size: 14px;
142+
color: #eee;
143+
background: none;
144+
border: 0;
145+
max-height: 100%;
146+
-webkit-font-smoothing: antialiased;
147+
-moz-osx-font-smoothing: grayscale;
148+
}
149+
.code-actions{
150+
width: 50px;
151+
height: 50px;
152+
position: absolute;
153+
background-color: #3fa9f5;
154+
background-image: url("/images/conv-arr.svg");
155+
background-size: 22px;
156+
background-repeat: no-repeat;
157+
background-position: center center;
158+
left: 0;
159+
right: 0;
160+
top: 0;
161+
bottom: 0;
162+
margin: auto;
163+
border-radius: 50%;
164+
text-align: center;
165+
overflow: hidden;
166+
-webkit-transition: all 0.3s ease;
167+
-moz-transition: all 0.3s ease;
168+
transition: all 0.3s ease;
169+
}
170+
.code-actions:hover{
171+
width: 110px;
172+
height: 110px;
173+
background-position: 120px center;
174+
}
175+
.code-actions .button{
176+
background: transparent;
177+
overflow: hidden;
178+
cursor: pointer;
179+
color: transparent;
180+
font-family: montserrat;
181+
font-weight: normal;
182+
border: 0;
183+
opacity: 0;
184+
font-size: 16px;
185+
width: 100%;
186+
height: 50%;
187+
position: absolute;
188+
left: 0;
189+
right: 0;
190+
margin: 0;
191+
background-repeat: no-repeat;
192+
-webkit-transition: all 0.3s ease;
193+
-moz-transition: all 0.3s ease;
194+
transition: all 0.3s ease;
195+
}
196+
.button.sass{
197+
border-bottom-right-radius: 55px;
198+
border-bottom-left-radius: 55px;
199+
background-image: url("/images/sass-icon.svg");
200+
background-position: center 20px;
201+
}
202+
.button.scss{
203+
border-top-right-radius: 55px;
204+
border-top-left-radius: 55px;
205+
background-image: url("/images/sass-icon.svg");
206+
background-position: center bottom 20px;
207+
}
208+
.code-actions .button:hover{
209+
background-color: #1782cf;
210+
}
211+
.code-actions .button.scss{
212+
top: 0;
213+
}
214+
.code-actions .button.sass{
215+
bottom: 0;
216+
}
217+
.code-actions:hover .button{
218+
opacity: 1;
219+
}
220+
.code-actions:hover .arrow svg{
221+
margin-left: 120px;
222+
opacity: 0;
223+
}
224+
.code-actions .type.scss:after{
225+
226+
}
227+
228+
/*
2229
h6 { float:right; }
3230
h1 { margin-bottom:5px; }
4231
label { display:block; }
@@ -10,4 +237,5 @@ a, a:visited { color: gray;}
10237
.success { color: green;}
11238
#title { width:515px; overflow:hidden;}
12239
#title h1 {width:270px; font-size:4em; display:inline;}
13-
#version{ float:right; margin-top:42px;}
240+
#version{ float:right; margin-top:42px;}
241+
*/

‎views/index.haml

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
1-
- if flash[:notice]
2-
%p.notice
3-
= flash[:notice]
4-
- if flash[:error]
5-
%p.error
6-
= flash[:error]
7-
- if flash[:success]
8-
%p.success
9-
= flash[:success]
1+
.app-section
2+
.tabs-section
3+
.tab.css
4+
%h2 css
5+
.tab.sass
6+
%h2 sass / scss
7+
.code-section
8+
.notifications
9+
- if flash[:notice]
10+
%p.notice
11+
= flash[:notice]
12+
- if flash[:error]
13+
%p.error
14+
= flash[:error]
15+
- if flash[:success]
16+
%p.success
17+
= flash[:success]
1018

11-
%form{:method => "POST", :action => "/", :id => "page"}
12-
%label{:for => "page_css"}
13-
CSS (paste your CSS code and convert!)
14-
%textarea{:id => "page_css", :name => "page[css]"}=h @css || ""
15-
%br
16-
%input.button{:type => "submit", :name => "commit", :value => "Convert 2 SCSS"}
17-
%input.button{:type => "submit", :name => "commit", :value => "Convert 2 SASS"}
18-
%input.button{:type => "reset", :name => "commit", :value => "Reset"}
19+
%form{:method => "POST", :action => "/", :id => "page"}
20+
.code-container.left
21+
%label{:for => "page_css"}
22+
CSS (paste your CSS code and convert!)
23+
%textarea{:id => "page_css", :name => "page[css]"}=h @css || ""
24+
25+
1926

20-
%br
21-
%label{:for => "page_sass"}
22-
Your Syntactically Awesome StyleSheets code
23-
%textarea{:id => "page_sass", :name => "page[sass]"}=h @output || ""
27+
.code-container.right
28+
%label{:for => "page_sass"}
29+
Your Syntactically Awesome StyleSheets code
30+
%textarea{:id => "page_sass", :name => "page[sass]"}=h @output || ""
31+
32+
.code-actions
33+
%input.button.scss{:type => "submit", :name => "commit", :value => "Convert 2 SCSS"}
34+
%input.button.sass{:type => "submit", :name => "commit", :value => "Convert 2 SASS"}

‎views/layout.haml

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,18 @@
1616
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
1717
})();
1818
%body
19-
#title
20-
%h1 css2sass
21-
#version
22-
%a{:href => "http://sass-lang.com/"} Version
23-
= Sass.version[:string]
24-
%hr
25-
.container_12
26-
.grid_12
27-
= yield
28-
.clear
29-
.grid_12
30-
#box
31-
%br
32-
%p
33-
Source at
34-
%a{:href => "http://github.com/jpablobr/css2sass"} http://github.com/jpablobr/css2sass
35-
36-
%p
37-
This simple site is created by Jose Pablo Barrantes @
38-
%a{ :href => "http://jpablobr.com"} http://jpablobr.com
39-
&& heavily inspired by
40-
%a{ :href => "http://html2haml.heroku.com/"}html2haml
19+
.wrapper
20+
.top-section
21+
%header
22+
%h1
23+
css 2 sass/scss
24+
%span converter
25+
.top-info-section
26+
.version-info
27+
%a{:href => "http://sass-lang.com/"} Version
28+
= Sass.version[:string]
29+
.author-info
30+
%p
31+
%span Created by Jose Pablo Barrantes @
32+
%a{ :href => "http://jpablobr.com"} http://jpablobr.com
33+
= yield

0 commit comments

Comments
 (0)