Remove cumbersome style nesting

author: Stefan Malzner <stefan@adlk.io> 2017-11-07 14:26:19 +0100
committer: Stefan Malzner <stefan@adlk.io> 2017-11-07 14:26:19 +0100
commit: fa48f676c91f289a00ef12d0a6476eb71cd02d88 (patch)
tree: 72de8e617758d3fb0a9c612b6726a82d9f1a28e8
parent: Merge branch 'develop' into reload-crashed-service (diff)
download: ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.gz
ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.zst
ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.zip
1 files changed, 53 insertions, 55 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss
index c2dd91293..75d2cb1d4 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,74 +1,72 @@
 @import './config.scss';
-.franz-form {
+.franz-form__button {
-  .franz-form__button {
+  position: relative;
-    position: relative;
+  background: $theme-brand-primary;
-    background: $theme-brand-primary;
+  display: block;
-    display: block;
+  padding: 10px 20px;
-    padding: 10px 20px;
+  color: #FFF;
-    color: #FFF;
+  border-radius: 3px;
-    border-radius: 3px;
+  transition: background 0.5s;
-    transition: background 0.5s;
+  text-align: center;
-    text-align: center;
-    &:hover {
+  &:hover {
-      background: darken($theme-brand-primary, 5%);
+    background: darken($theme-brand-primary, 5%);
-    }
+  }
-    &:active {
+  &:active {
-      transition: none;
+    transition: none;
-      background: lighten($theme-brand-primary, 5%);
+    background: lighten($theme-brand-primary, 5%);
-    }
+  }
-    &:disabled {
+  &:disabled {
-      opacity: 0.2;
+    opacity: 0.2;
-    }
+  }
-    &.franz-form__button--secondary {
+  &.franz-form__button--secondary {
-      background: $theme-gray-lighter;
+    background: $theme-gray-lighter;
-      color: $theme-gray;
+    color: $theme-gray;
-      &:hover {
+    &:hover {
-        background: darken($theme-gray-lighter, 5%);
+      background: darken($theme-gray-lighter, 5%);
-      }
+    }
-      &:active {
+    &:active {
-        background: lighten($theme-gray-lighter, 5%);
+      background: lighten($theme-gray-lighter, 5%);
-      }
    }
+  }
-    &.franz-form__button--danger {
+  &.franz-form__button--danger {
-      background: $theme-brand-danger;
+    background: $theme-brand-danger;
-      &:hover {
+    &:hover {
-        background: darken($theme-brand-danger, 5%);
+      background: darken($theme-brand-danger, 5%);
-      }
+    }
-      &:active {
+    &:active {
-        background: lighten($theme-brand-danger, 5%);
+      background: lighten($theme-brand-danger, 5%);
-      }
    }
+  }
-    &.franz-form__button--inverted {
+  &.franz-form__button--inverted {
-      background: none;
+    background: none;
-      padding: 10px 20px;
+    padding: 10px 20px;
-      border: 2px solid $theme-brand-primary;
+    border: 2px solid $theme-brand-primary;
-      color: $theme-brand-primary;
+    color: $theme-brand-primary;
-      transition: background 0.5s, color 0.5s;
+    transition: background 0.5s, color 0.5s;
-      &:hover {
+    &:hover {
-        background: darken($theme-brand-primary, 5%);
+      background: darken($theme-brand-primary, 5%);
-        color: #FFF;
+      color: #FFF;
-      }
    }
+  }
-    .loader {
+  .loader {
-      position: relative;
+    position: relative;
-      width: 20px;
+    width: 20px;
-      height: 12px;
+    height: 12px;
-      z-index: 9999;
+    z-index: 9999;
-      display: inline-block;
+    display: inline-block;
-      margin-right: 5px;
+    margin-right: 5px;
-    }
  }
 }
author	Stefan Malzner <stefan@adlk.io>	2017-11-07 14:26:19 +0100
committer	Stefan Malzner <stefan@adlk.io>	2017-11-07 14:26:19 +0100
commit	fa48f676c91f289a00ef12d0a6476eb71cd02d88 (patch)
tree	72de8e617758d3fb0a9c612b6726a82d9f1a28e8
parent	Merge branch 'develop' into reload-crashed-service (diff)
download	ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.gz ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.zst ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.zip

diff --git a/src/styles/button.scss b/src/styles/button.scss index c2dd91293..75d2cb1d4 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss
@@ -1,74 +1,72 @@
1	@import './config.scss';	1	@import './config.scss';
2		2
3	.franz-form {	3	.franz-form__button {
4	.franz-form__button {	4	position: relative;
5	position: relative;	5	background: $theme-brand-primary;
6	background: $theme-brand-primary;	6	display: block;
7	display: block;	7	padding: 10px 20px;
8	padding: 10px 20px;	8	color: #FFF;
9	color: #FFF;	9	border-radius: 3px;
10	border-radius: 3px;	10	transition: background 0.5s;
11	transition: background 0.5s;	11	text-align: center;
12	text-align: center;
13		12
14	&:hover {	13	&:hover {
15	background: darken($theme-brand-primary, 5%);	14	background: darken($theme-brand-primary, 5%);
16	}	15	}
17		16
18	&:active {	17	&:active {
19	transition: none;	18	transition: none;
20	background: lighten($theme-brand-primary, 5%);	19	background: lighten($theme-brand-primary, 5%);
21	}	20	}
22		21
23	&:disabled {	22	&:disabled {
24	opacity: 0.2;	23	opacity: 0.2;
25	}	24	}
26		25
27	&.franz-form__button--secondary {	26	&.franz-form__button--secondary {
28	background: $theme-gray-lighter;	27	background: $theme-gray-lighter;
29	color: $theme-gray;	28	color: $theme-gray;
30		29
31	&:hover {	30	&:hover {
32	background: darken($theme-gray-lighter, 5%);	31	background: darken($theme-gray-lighter, 5%);
33	}	32	}
34		33
35	&:active {	34	&:active {
36	background: lighten($theme-gray-lighter, 5%);	35	background: lighten($theme-gray-lighter, 5%);
37	}
38	}	36	}
		37	}
39		38
40	&.franz-form__button--danger {	39	&.franz-form__button--danger {
41	background: $theme-brand-danger;	40	background: $theme-brand-danger;
42		41
43	&:hover {	42	&:hover {
44	background: darken($theme-brand-danger, 5%);	43	background: darken($theme-brand-danger, 5%);
45	}	44	}
46		45
47	&:active {	46	&:active {
48	background: lighten($theme-brand-danger, 5%);	47	background: lighten($theme-brand-danger, 5%);
49	}
50	}	48	}
		49	}
51		50
52	&.franz-form__button--inverted {	51	&.franz-form__button--inverted {
53	background: none;	52	background: none;
54	padding: 10px 20px;	53	padding: 10px 20px;
55	border: 2px solid $theme-brand-primary;	54	border: 2px solid $theme-brand-primary;
56	color: $theme-brand-primary;	55	color: $theme-brand-primary;
57	transition: background 0.5s, color 0.5s;	56	transition: background 0.5s, color 0.5s;
58		57
59	&:hover {	58	&:hover {
60	background: darken($theme-brand-primary, 5%);	59	background: darken($theme-brand-primary, 5%);
61	color: #FFF;	60	color: #FFF;
62	}
63	}	61	}
		62	}
64		63
65	.loader {	64	.loader {
66	position: relative;	65	position: relative;
67	width: 20px;	66	width: 20px;
68	height: 12px;	67	height: 12px;
69	z-index: 9999;	68	z-index: 9999;
70	display: inline-block;	69	display: inline-block;
71	margin-right: 5px;	70	margin-right: 5px;
72	}
73	}	71	}
74	}	72	}