Praeziso
/
synolo-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEAT buttons

master
Niclas Thobaben 2020-01-10 22:13:04 +01:00
parent 47ea31e9bf
commit c30a6cf759
16 changed files with 67 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>synolo-ui</title> <title>synolo-ui</title>
</head> </head>
<body> <body>

12
src/Test.vue
View File

@ -10,6 +10,18 @@
| |
<button class="action">Action</button> <button class="action">Action</button>
<button class="action" disabled>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>
</div> </div>

0
src/assets/roboto/Roboto-Black.ttf → src/assets/fonts/roboto/Roboto-Black.ttf
View File

0
src/assets/roboto/Roboto-BlackItalic.ttf → src/assets/fonts/roboto/Roboto-BlackItalic.ttf
View File

0
src/assets/roboto/Roboto-Bold.ttf → src/assets/fonts/roboto/Roboto-Bold.ttf
View File

0
src/assets/roboto/Roboto-BoldItalic.ttf → src/assets/fonts/roboto/Roboto-BoldItalic.ttf
View File

0
src/assets/roboto/Roboto-Italic.ttf → src/assets/fonts/roboto/Roboto-Italic.ttf
View File

0
src/assets/roboto/Roboto-Light.ttf → src/assets/fonts/roboto/Roboto-Light.ttf
View File

0
src/assets/roboto/Roboto-LightItalic.ttf → src/assets/fonts/roboto/Roboto-LightItalic.ttf
View File

0
src/assets/roboto/Roboto-Medium.ttf → src/assets/fonts/roboto/Roboto-Medium.ttf
View File

0
src/assets/roboto/Roboto-MediumItalic.ttf → src/assets/fonts/roboto/Roboto-MediumItalic.ttf
View File

0
src/assets/roboto/Roboto-Regular.ttf → src/assets/fonts/roboto/Roboto-Regular.ttf
View File

0
src/assets/roboto/Roboto-Thin.ttf → src/assets/fonts/roboto/Roboto-Thin.ttf
View File

0
src/assets/roboto/Roboto-ThinItalic.ttf → src/assets/fonts/roboto/Roboto-ThinItalic.ttf
View File

52
src/assets/styles/buttons.css
View File

@ -1,14 +1,18 @@
button { button {
--color-default: #71A857;
--color-default-fg: white;
--color-default-disabled: #AFDA9A;
padding: 4px 36px; padding: 4px 36px;
margin: 4px; margin: 4px;
font-weight: bold; font-weight: bold;
border: 2px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background-color: #71A857; background-color: var(--color-default);
color: white; color: var(--color-default-fg);
letter-spacing: 1px; /* letter-spacing: 1px; */
cursor: pointer; cursor: pointer;
} }
@ -23,7 +27,7 @@ button:enabled:active {
} }
button:disabled { button:disabled {
background-color: #AFDA9A; background-color: var(--color-default-disabled);
color: #FFFFFF88; color: #FFFFFF88;
cursor: not-allowed; cursor: not-allowed;
} }
@ -34,4 +38,40 @@ button.generic:disabled { background-color: #C9D4DC; }
button.action { background-color: var(--error); } button.action { background-color: var(--error); }
button.action:enabled:active { background-color: #B54747; } 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;
}

14
src/assets/styles/main.css
View File

@ -1,41 +1,41 @@
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-Regular.ttf'); src: url('../fonts/roboto/Roboto-Regular.ttf');
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-Italic.ttf'); src: url('../fonts/roboto/Roboto-Italic.ttf');
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-Light.ttf'); src: url('../fonts/roboto/Roboto-Light.ttf');
font-style: normal; font-style: normal;
font-weight: lighter; font-weight: lighter;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-LightItalic.ttf'); src: url('../fonts/roboto/Roboto-LightItalic.ttf');
font-style: italic; font-style: italic;
font-weight: lighter; font-weight: lighter;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-Bold.ttf'); src: url('../fonts/roboto/Roboto-Bold.ttf');
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
src: url('/fonts/roboto/Roboto-BolcItalic.ttf'); src: url('../fonts/roboto/Roboto-BoldItalic.ttf');
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
} }
@ -45,7 +45,7 @@
margin: 0; margin: 0;
border: 0; border: 0;
font-family: 'Roboto'; font-family: 'Roboto';
font-size: 15px; font-size: 13px;
} }
:root { :root {