Better UI for appearence page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Better UI for appearence page
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent bcb0b650
Showing 3 changed files with 56 additions and 54 deletions Show diff stats
app/assets/stylesheets/sections/profile.scss
app/assets/stylesheets/sections/themes.scss
app/views/profiles/passwords/edit.html.haml
@@ -51,3 +51,57 @@
   font-weight: 200;
   color: #666;
 }
+
+/*
+ * Appearance settings
+ *
+ */
+.themes_opts {
+  label {
+    margin-right: 20px;
+    text-align: center;
+
+    .prev {
+      @extend .thumbnail;
+      height: 30px;
+      width: 175px;
+      margin-bottom: 10px;
+
+      &.classic {
+        background: #31363e;
+      }
+
+      &.default {
+        background: #f1f1f1;
+      }
+
+      &.modern {
+        background: #345;
+      }
+
+      &.gray {
+        background: #373737;
+      }
+
+      &.violet {
+        background: #547;
+      }
+    }
+  }
+}
+
+.code_highlight_opts {
+  margin-top: 10px;
+
+  label {
+    margin-right: 20px;
+    text-align: center;
+
+    .prev {
+      @extend .thumbnail;
+      height: 151px;
+      width: 220px;
+      margin-bottom: 10px;
+    }
+  }
+}
@@ -1,53 +0,0 @@
-.themes_opts {
-  padding-left: 20px;
-
-  label {
-    width: 175px;
-    margin-right: 40px;
-
-    .prev {
-      @extend .thumbnail;
-      height: 30px;
-      width: 175px;
-      margin-bottom: 10px;
-
-      &.classic {
-        background: #31363e;
-      }
-
-      &.default {
-        background: #f1f1f1;
-      }
-
-      &.modern {
-        background: #345;
-      }
-
-      &.gray {
-        background: #373737;
-      }
-
-      &.violet {
-        background: #547;
-      }
-    }
-  }
-}
-
-.code_highlight_opts {
-  padding-left: 20px;
-
-  label {
-    width: 220px;
-    margin-right: 40px;
-
-    .prev {
-      @extend .thumbnail;
-      height: 151px;
-      width: 220px;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-
@@ -23,7 +23,8 @@
  
       .form-group
         = f.label :password, 'New password', class: 'control-label'
-        .col-sm-10= f.password_field :password, required: true, class: 'form-control'
+        .col-sm-10
+          = f.password_field :password, required: true, class: 'form-control'
       .form-group
         = f.label :password_confirmation, class: 'control-label'
         .col-sm-10
...	...	@@ -51,3 +51,57 @@
51	51	font-weight: 200;
52	52	color: #666;
53	53	}
	54	+
	55	+/*
	56	+ * Appearance settings
	57	+ *
	58	+ */
	59	+.themes_opts {
	60	+ label {
	61	+ margin-right: 20px;
	62	+ text-align: center;
	63	+
	64	+ .prev {
	65	+ @extend .thumbnail;
	66	+ height: 30px;
	67	+ width: 175px;
	68	+ margin-bottom: 10px;
	69	+
	70	+ &.classic {
	71	+ background: #31363e;
	72	+ }
	73	+
	74	+ &.default {
	75	+ background: #f1f1f1;
	76	+ }
	77	+
	78	+ &.modern {
	79	+ background: #345;
	80	+ }
	81	+
	82	+ &.gray {
	83	+ background: #373737;
	84	+ }
	85	+
	86	+ &.violet {
	87	+ background: #547;
	88	+ }
	89	+ }
	90	+ }
	91	+}
	92	+
	93	+.code_highlight_opts {
	94	+ margin-top: 10px;
	95	+
	96	+ label {
	97	+ margin-right: 20px;
	98	+ text-align: center;
	99	+
	100	+ .prev {
	101	+ @extend .thumbnail;
	102	+ height: 151px;
	103	+ width: 220px;
	104	+ margin-bottom: 10px;
	105	+ }
	106	+ }
	107	+}
...	...
...	...	@@ -1,53 +0,0 @@
1		-.themes_opts {
2		- padding-left: 20px;
3		-
4		- label {
5		- width: 175px;
6		- margin-right: 40px;
7		-
8		- .prev {
9		- @extend .thumbnail;
10		- height: 30px;
11		- width: 175px;
12		- margin-bottom: 10px;
13		-
14		- &.classic {
15		- background: #31363e;
16		- }
17		-
18		- &.default {
19		- background: #f1f1f1;
20		- }
21		-
22		- &.modern {
23		- background: #345;
24		- }
25		-
26		- &.gray {
27		- background: #373737;
28		- }
29		-
30		- &.violet {
31		- background: #547;
32		- }
33		- }
34		- }
35		-}
36		-
37		-.code_highlight_opts {
38		- padding-left: 20px;
39		-
40		- label {
41		- width: 220px;
42		- margin-right: 40px;
43		-
44		- .prev {
45		- @extend .thumbnail;
46		- height: 151px;
47		- width: 220px;
48		- margin-bottom: 10px;
49		- }
50		- }
51		-}
52		-
53		-
...	...	@@ -23,7 +23,8 @@
23	23
24	24	.form-group
25	25	= f.label :password, 'New password', class: 'control-label'
26		- .col-sm-10= f.password_field :password, required: true, class: 'form-control'
	26	+ .col-sm-10
	27	+ = f.password_field :password, required: true, class: 'form-control'
27	28	.form-group
28	29	= f.label :password_confirmation, class: 'control-label'
29	30	.col-sm-10
...	...