diff --git a/public/index.html b/public/index.html
index 6cdc9db..3c24ee2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,8 @@
+
+
synolo-ui
diff --git a/src/Test.vue b/src/Test.vue
index 41c7f74..00eb438 100644
--- a/src/Test.vue
+++ b/src/Test.vue
@@ -10,6 +10,18 @@
|
+
+
+
+
+
+ |
+
+
+ |
+
+
+
diff --git a/src/assets/roboto/Roboto-Black.ttf b/src/assets/fonts/roboto/Roboto-Black.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Black.ttf
rename to src/assets/fonts/roboto/Roboto-Black.ttf
diff --git a/src/assets/roboto/Roboto-BlackItalic.ttf b/src/assets/fonts/roboto/Roboto-BlackItalic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-BlackItalic.ttf
rename to src/assets/fonts/roboto/Roboto-BlackItalic.ttf
diff --git a/src/assets/roboto/Roboto-Bold.ttf b/src/assets/fonts/roboto/Roboto-Bold.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Bold.ttf
rename to src/assets/fonts/roboto/Roboto-Bold.ttf
diff --git a/src/assets/roboto/Roboto-BoldItalic.ttf b/src/assets/fonts/roboto/Roboto-BoldItalic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-BoldItalic.ttf
rename to src/assets/fonts/roboto/Roboto-BoldItalic.ttf
diff --git a/src/assets/roboto/Roboto-Italic.ttf b/src/assets/fonts/roboto/Roboto-Italic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Italic.ttf
rename to src/assets/fonts/roboto/Roboto-Italic.ttf
diff --git a/src/assets/roboto/Roboto-Light.ttf b/src/assets/fonts/roboto/Roboto-Light.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Light.ttf
rename to src/assets/fonts/roboto/Roboto-Light.ttf
diff --git a/src/assets/roboto/Roboto-LightItalic.ttf b/src/assets/fonts/roboto/Roboto-LightItalic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-LightItalic.ttf
rename to src/assets/fonts/roboto/Roboto-LightItalic.ttf
diff --git a/src/assets/roboto/Roboto-Medium.ttf b/src/assets/fonts/roboto/Roboto-Medium.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Medium.ttf
rename to src/assets/fonts/roboto/Roboto-Medium.ttf
diff --git a/src/assets/roboto/Roboto-MediumItalic.ttf b/src/assets/fonts/roboto/Roboto-MediumItalic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-MediumItalic.ttf
rename to src/assets/fonts/roboto/Roboto-MediumItalic.ttf
diff --git a/src/assets/roboto/Roboto-Regular.ttf b/src/assets/fonts/roboto/Roboto-Regular.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Regular.ttf
rename to src/assets/fonts/roboto/Roboto-Regular.ttf
diff --git a/src/assets/roboto/Roboto-Thin.ttf b/src/assets/fonts/roboto/Roboto-Thin.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-Thin.ttf
rename to src/assets/fonts/roboto/Roboto-Thin.ttf
diff --git a/src/assets/roboto/Roboto-ThinItalic.ttf b/src/assets/fonts/roboto/Roboto-ThinItalic.ttf
similarity index 100%
rename from src/assets/roboto/Roboto-ThinItalic.ttf
rename to src/assets/fonts/roboto/Roboto-ThinItalic.ttf
diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 250e8c9..7c84f77 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -1,14 +1,18 @@
button {
+ --color-default: #71A857;
+ --color-default-fg: white;
+ --color-default-disabled: #AFDA9A;
+
padding: 4px 36px;
margin: 4px;
font-weight: bold;
- border: 2px solid transparent;
+ border: 1px solid transparent;
border-radius: 4px;
- background-color: #71A857;
- color: white;
+ background-color: var(--color-default);
+ color: var(--color-default-fg);
- letter-spacing: 1px;
+ /* letter-spacing: 1px; */
cursor: pointer;
}
@@ -23,7 +27,7 @@ button:enabled:active {
}
button:disabled {
- background-color: #AFDA9A;
+ background-color: var(--color-default-disabled);
color: #FFFFFF88;
cursor: not-allowed;
}
@@ -34,4 +38,40 @@ button.generic:disabled { background-color: #C9D4DC; }
button.action { background-color: var(--error); }
button.action:enabled:active { background-color: #B54747; }
-button.action:disabled { background-color: #FFB5B5; }
\ No newline at end of file
+button.action:disabled { background-color: #FFB5B5; }
+
+/* ++++++++++++ BUTTTONS OUTLINED ++++++++++++ */
+
+button.outlined {
+ background-color: transparent;
+ border-color: var(--color-default);
+ color: var(--color-default);
+}
+button.outlined:enabled:active {
+ background-color: #DAF4CD;
+}
+button.outlined:disabled {
+ color: var(--color-default-disabled);
+ border-color: var(--color-default-disabled);
+ background-color: transparent;
+}
+
+button.outlined.generic {
+ border-color: var(--grey-light);
+ color: var(--grey-light);
+}
+button.outlined.generic:enabled:active { background-color: #F2F6F9; }
+button.outlined.generic:disabled {
+ color: #C9D4DC;
+ border-color: #C9D4DC;
+}
+
+button.outlined.action {
+ border-color: var(--error);
+ color: var(--error);
+}
+button.outlined.action:enabled:active { background-color: #FFB5B5; }
+button.outlined.action:disabled {
+ color: #FFB5B5;
+ border-color: #FFB5B5;
+}
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 9c25a33..cfc09bc 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -1,41 +1,41 @@
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-Regular.ttf');
+ src: url('../fonts/roboto/Roboto-Regular.ttf');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-Italic.ttf');
+ src: url('../fonts/roboto/Roboto-Italic.ttf');
font-style: italic;
font-weight: normal;
}
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-Light.ttf');
+ src: url('../fonts/roboto/Roboto-Light.ttf');
font-style: normal;
font-weight: lighter;
}
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-LightItalic.ttf');
+ src: url('../fonts/roboto/Roboto-LightItalic.ttf');
font-style: italic;
font-weight: lighter;
}
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-Bold.ttf');
+ src: url('../fonts/roboto/Roboto-Bold.ttf');
font-style: normal;
font-weight: bold;
}
@font-face {
font-family: 'Roboto';
- src: url('/fonts/roboto/Roboto-BolcItalic.ttf');
+ src: url('../fonts/roboto/Roboto-BoldItalic.ttf');
font-style: italic;
font-weight: bold;
}
@@ -45,7 +45,7 @@
margin: 0;
border: 0;
font-family: 'Roboto';
- font-size: 15px;
+ font-size: 13px;
}
:root {