FEAT buttons

2020-01-10 22:13:04 +01:00 · 2020-01-10 22:13:04 +01:00 · c30a6cf759
parent 47ea31e9bf
commit c30a6cf759
16 changed files with 67 additions and 13 deletions
--- a/public/index.html
+++ b/public/index.html
@ -5,6 +5,8 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+
    <title>synolo-ui</title>
  </head>
  <body>
--- a/src/Test.vue
+++ b/src/Test.vue
@ -10,6 +10,18 @@
    |
      <button class="action">Action</button>
      <button class="action" disabled>Action</button>
+      
+      <hr>
+
+      <button class="outlined">Default</button>
+      <button class="outlined" disabled>Default</button>
+    |
+      <button class="generic outlined">Generic</button>
+      <button class="generic outlined" disabled>Generic</button>
+    |
+      <button class="action outlined">Action</button>
+      <button class="action outlined" disabled>Action</button>
+
    </div>

  </div>
--- a/src/assets/fonts/roboto/Roboto-Black.ttf
+++ b/src/assets/fonts/roboto/Roboto-Black.ttf
--- a/src/assets/fonts/roboto/Roboto-BlackItalic.ttf
+++ b/src/assets/fonts/roboto/Roboto-BlackItalic.ttf
--- a/src/assets/fonts/roboto/Roboto-Bold.ttf
+++ b/src/assets/fonts/roboto/Roboto-Bold.ttf
--- a/src/assets/fonts/roboto/Roboto-BoldItalic.ttf
+++ b/src/assets/fonts/roboto/Roboto-BoldItalic.ttf
--- a/src/assets/fonts/roboto/Roboto-Italic.ttf
+++ b/src/assets/fonts/roboto/Roboto-Italic.ttf
--- a/src/assets/fonts/roboto/Roboto-Light.ttf
+++ b/src/assets/fonts/roboto/Roboto-Light.ttf
--- a/src/assets/fonts/roboto/Roboto-LightItalic.ttf
+++ b/src/assets/fonts/roboto/Roboto-LightItalic.ttf
--- a/src/assets/fonts/roboto/Roboto-Medium.ttf
+++ b/src/assets/fonts/roboto/Roboto-Medium.ttf
--- a/src/assets/fonts/roboto/Roboto-MediumItalic.ttf
+++ b/src/assets/fonts/roboto/Roboto-MediumItalic.ttf
--- a/src/assets/fonts/roboto/Roboto-Regular.ttf
+++ b/src/assets/fonts/roboto/Roboto-Regular.ttf
--- a/src/assets/fonts/roboto/Roboto-Thin.ttf
+++ b/src/assets/fonts/roboto/Roboto-Thin.ttf
--- a/src/assets/fonts/roboto/Roboto-ThinItalic.ttf
+++ b/src/assets/fonts/roboto/Roboto-ThinItalic.ttf
--- 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; }
+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;
+}
--- 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 {