fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

style: 🎨 stylelint implementation

Browse Source
This commit is contained in:
Fabio
2020-07-31 18:16:28 +02:00
parent 70908eb076
commit 092e8a0732
36 changed files with 2261 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.stylelintrc Normal file
View File

@ -0,0 +1,14 @@
{
"extends": [
"stylelint-config-standard"
],
"fix": true,
"formatter": "verbose",
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null
},
"syntax": "scss"
}

1486
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -64,6 +64,9 @@
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"sass-loader": "^9.0.2", "sass-loader": "^9.0.2",
"stylelint": "^13.6.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"webpack": "^4.44.1" "webpack": "^4.44.1"
} }

3
src/main/index.js
View File

@ -25,7 +25,8 @@ async function createMainWindow () {
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
'web-security': false, 'web-security': false,
enableRemoteModule: true enableRemoteModule: true,
spellcheck: false
}, },
frame: false, frame: false,
backgroundColor: '#1d1d1d' backgroundColor: '#1d1d1d'

2
src/renderer/components/BaseConfirmModal.vue
View File

@ -83,7 +83,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.modal.modal-sm .modal-container{ .modal.modal-sm .modal-container {
padding: 0; padding: 0;
} }
</style> </style>

15
src/renderer/components/BaseContextMenu.vue
View File

@ -38,9 +38,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.context{ .context {
display: flex; display: flex;
position: absolute;
color: $body-font-color; color: $body-font-color;
font-size: 16px; font-size: 16px;
z-index: 400; z-index: 400;
@ -55,11 +54,11 @@ export default {
bottom: 0; bottom: 0;
pointer-events: none; pointer-events: none;
.context-container{ .context-container {
min-width: 100px; min-width: 100px;
max-width: 150px; max-width: 150px;
z-index: 1; z-index: 1;
box-shadow: 0px 0px 1px 0px #000; box-shadow: 0 0 1px 0 #000;
padding: 0; padding: 0;
background: #1d1d1d; background: #1d1d1d;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -68,19 +67,19 @@ export default {
position: absolute; position: absolute;
pointer-events: initial; pointer-events: initial;
.context-element{ .context-element {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .1rem .3rem; padding: 0.1rem 0.3rem;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
background: $primary-color; background: $primary-color;
} }
} }
} }
.context-overlay{ .context-overlay {
background: transparent; background: transparent;
bottom: 0; bottom: 0;
cursor: default; cursor: default;

6
src/renderer/components/BaseNotification.vue
View File

@ -71,7 +71,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.toast{ .toast {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
user-select: text; user-select: text;
@ -80,7 +80,7 @@ export default {
margin-left: auto; margin-left: auto;
} }
.notification-message{ .notification-message {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -88,7 +88,7 @@ export default {
max-width: 30rem; max-width: 30rem;
} }
.expanded .notification-message{ .expanded .notification-message {
white-space: initial; white-space: initial;
} }
</style> </style>

2
src/renderer/components/BaseToast.vue
View File

@ -70,7 +70,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.toast{ .toast {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
user-select: text; user-select: text;

4
src/renderer/components/ModalAskCredentials.vue
View File

@ -71,7 +71,3 @@ export default {
} }
}; };
</script> </script>
<style>
</style>

2
src/renderer/components/ModalEditConnection.vue
View File

@ -230,7 +230,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.modal-container{ .modal-container {
max-width: 450px; max-width: 450px;
} }
</style> </style>

2
src/renderer/components/ModalNewConnection.vue
View File

@ -253,7 +253,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.modal-container{ .modal-container {
max-width: 450px; max-width: 450px;
} }
</style> </style>

11
src/renderer/components/ModalSettings.vue
View File

@ -182,24 +182,23 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#settings{ #settings {
.modal-body{ .modal-body {
overflow: hidden; overflow: hidden;
.panel-body{ .panel-body {
height: calc(70vh - 70px); height: calc(70vh - 70px);
overflow: auto; overflow: auto;
} }
.badge::after{ .badge::after {
background: #32b643; background: #32b643;
} }
.form-label{ .form-label {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
} }
</style> </style>

2
src/renderer/components/ModalSettingsUpdate.vue
View File

@ -78,7 +78,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.empty{ .empty {
color: $body-font-color; color: $body-font-color;
} }
</style> </style>

13
src/renderer/components/QueryEditor.vue
View File

@ -69,21 +69,20 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.editor-wrapper{ .editor-wrapper {
border-bottom: 1px solid #444444; border-bottom: 1px solid #444;
} }
.CodeMirror{ .CodeMirror {
height: 200px; height: 200px;
.CodeMirror-scroll{ .CodeMirror-scroll {
max-width: 100%; max-width: 100%;
} }
.CodeMirror-line { .CodeMirror-line {
word-break: break-word!important; word-break: break-word !important;
white-space: pre-wrap!important; white-space: pre-wrap !important;
word-break: normal;
} }
} }
</style> </style>

4
src/renderer/components/SettingBarContext.vue
View File

@ -69,7 +69,3 @@ export default {
} }
}; };
</script> </script>
<style>
</style>

2
src/renderer/components/TheAppWelcome.vue
View File

@ -26,7 +26,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.empty{ .empty {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;

20
src/renderer/components/TheFooter.vue
View File

@ -50,38 +50,38 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#footer{ #footer {
height: $footer-height; height: $footer-height;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: $primary-color; background: $primary-color;
padding: 0 .2rem; padding: 0 0.2rem;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
box-shadow: 0 0 1px 0px #000; box-shadow: 0 0 1px 0 #000;
.footer-elements{ .footer-elements {
list-style: none; list-style: none;
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
.footer-element{ .footer-element {
height: $footer-height; height: $footer-height;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .4rem; padding: 0 0.4rem;
margin: 0; margin: 0;
&.footer-link{ &.footer-link {
cursor: pointer; cursor: pointer;
transition: background .2s; transition: background 0.2s;
&:hover{ &:hover {
background: rgba($color: #fff, $alpha: .1); background: rgba($color: #fff, $alpha: 0.1);
} }
} }
} }

2
src/renderer/components/TheNotificationsBoard.vue
View File

@ -75,7 +75,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#notifications-board{ #notifications-board {
position: absolute; position: absolute;
z-index: 9; z-index: 9;
right: 1rem; right: 1rem;

51
src/renderer/components/TheSettingBar.vue
View File

@ -106,7 +106,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#settingbar{ #settingbar {
width: $settingbar-width; width: $settingbar-width;
height: calc(100vh - #{$excluding-size}); height: calc(100vh - #{$excluding-size});
display: flex; display: flex;
@ -115,10 +115,10 @@ export default {
align-items: center; align-items: center;
background: $bg-color-light; background: $bg-color-light;
padding: 0; padding: 0;
box-shadow: 0 0 1px 0px #000; box-shadow: 0 0 1px 0 #000;
z-index: 9; z-index: 9;
.settingbar-top-elements{ .settingbar-top-elements {
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
max-height: calc((100vh - 3.5rem) - #{$excluding-size}); max-height: calc((100vh - 3.5rem) - #{$excluding-size});
@ -128,43 +128,42 @@ export default {
} }
} }
.settingbar-bottom-elements{ .settingbar-bottom-elements {
padding-top: .5rem; padding-top: 0.5rem;
background: $bg-color-light; background: $bg-color-light;
z-index: 1; z-index: 1;
} }
.settingbar-elements{ .settingbar-elements {
list-style: none; list-style: none;
text-align: center; text-align: center;
width: $settingbar-width; width: $settingbar-width;
padding: 0; padding: 0;
margin: 0; margin: 0;
.settingbar-element{ .settingbar-element {
height: $settingbar-width; height: $settingbar-width;
width: 100%; width: 100%;
margin: 0; margin: 0;
border-left: 3px solid transparent; border-left: 3px solid transparent;
opacity: .5; opacity: 0.5;
transition: opacity .2s; transition: opacity 0.2s;
display: flex; display: flex;
align-content: center; align-content: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
&:hover{ &:hover {
opacity: 1; opacity: 1;
} }
&.selected{ &.selected {
border-left-color: $body-font-color; border-left-color: $body-font-color;
opacity: 1; opacity: 1;
} }
.settingbar-element-icon{ .settingbar-element-icon {
&.badge::after {
&.badge::after{
bottom: -10px; bottom: -10px;
right: 0; right: 0;
position: absolute; position: absolute;
@ -172,33 +171,31 @@ export default {
} }
} }
} }
} }
} }
.ex-tooltip{// Because both overflow-x: visible and overflow-y:auto are evil!!! .ex-tooltip {// Because both overflow-x: visible and overflow-y:auto are evil!!!
.ex-tooltip-content{ .ex-tooltip-content {
z-index: 999; z-index: 999;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
display:block; display: block;
position:absolute; position: absolute;
background-color:#feffe1;
text-align: center; text-align: center;
margin:.0 0 0 calc(#{$settingbar-width} - 5px); margin: 0 0 0 calc(#{$settingbar-width} - 5px);
left: 0; left: 0;
padding: .2rem .4rem; padding: 0.2rem 0.4rem;
font-size: .7rem; font-size: 0.7rem;
background: rgba(48,55,66,.95); background: rgba(48, 55, 66, 0.95);
border-radius: .1rem; border-radius: 0.1rem;
color: #fff; color: #fff;
max-width: 320px; max-width: 320px;
pointer-events: none; pointer-events: none;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: opacity .2s; transition: opacity 0.2s;
} }
&:hover .ex-tooltip-content{ &:hover .ex-tooltip-content {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }

26
src/renderer/components/TheTitleBar.vue
View File

@ -81,7 +81,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
#titlebar{ #titlebar {
display: flex; display: flex;
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
@ -90,10 +90,10 @@ export default {
height: $titlebar-height; height: $titlebar-height;
-webkit-app-region: drag; -webkit-app-region: drag;
user-select: none; user-select: none;
box-shadow: 0 0 1px 0px #000; box-shadow: 0 0 1px 0 #000;
z-index: 9999; z-index: 9999;
.titlebar-resizer{ .titlebar-resizer {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
@ -102,31 +102,31 @@ export default {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.titlebar-elements{ .titlebar-elements {
display: flex; display: flex;
align-items: center; align-items: center;
.titlebar-logo{ .titlebar-logo {
height: $titlebar-height; height: $titlebar-height;
padding: 0 .4rem; padding: 0 0.4rem;
} }
.titlebar-element{ .titlebar-element {
display: flex; display: flex;
align-items: center; align-items: center;
height: $titlebar-height; height: $titlebar-height;
line-height: 0; line-height: 0;
padding: 0 .7rem; padding: 0 0.7rem;
opacity: .7; opacity: 0.7;
transition: opacity .2s; transition: opacity 0.2s;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
&:hover{ &:hover {
opacity: 1; opacity: 1;
background: rgba($color: #fff, $alpha: .2); background: rgba($color: #fff, $alpha: 0.2);
} }
&.close-button:hover{ &.close-button:hover {
background: red; background: red;
} }
} }

42
src/renderer/components/Workspace.vue
View File

@ -92,37 +92,37 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace{ .workspace {
padding: 0; padding: 0;
margin: 0; margin: 0;
.workspace-tabs{ .workspace-tabs {
overflow: auto; overflow: auto;
height: calc(100vh - #{$excluding-size}); height: calc(100vh - #{$excluding-size});
.tab-block{ .tab-block {
background: $bg-color-light; background: $bg-color-light;
margin-top: 0; margin-top: 0;
.tab-item{ .tab-item {
max-width: 12rem; max-width: 12rem;
width: fit-content; width: fit-content;
flex: initial; flex: initial;
&.active a{ &.active a {
opacity: 1; opacity: 1;
} }
> a{ > a {
padding: .2rem .8rem; padding: 0.2rem 0.8rem;
color: $body-font-color; color: $body-font-color;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
opacity: .7; opacity: 0.7;
transition: opacity .2s; transition: opacity 0.2s;
&:hover{ &:hover {
opacity: 1; opacity: 1;
} }
@ -136,15 +136,15 @@ export default {
} }
} }
.workspace-query-results{ .workspace-query-results {
overflow: auto; overflow: auto;
white-space: nowrap; white-space: nowrap;
.table{ .table {
width: auto; width: auto;
border-collapse: separate; border-collapse: separate;
.th{ .th {
position: sticky; position: sticky;
top: 0; top: 0;
background: $bg-color; background: $bg-color;
@ -154,28 +154,28 @@ export default {
border-color: $bg-color-light; border-color: $bg-color-light;
padding: 0; padding: 0;
font-weight: 700; font-weight: 700;
font-size: .7rem; font-size: 0.7rem;
> div { > div {
padding: .1rem .4rem; padding: 0.1rem 0.4rem;
min-width: -webkit-fill-available; min-width: -webkit-fill-available;
} }
} }
.td{ .td {
border-right: 1px solid; border-right: 1px solid;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $bg-color-light; border-color: $bg-color-light;
padding: 0 .4rem; padding: 0 0.4rem;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 200px; max-width: 200px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: .7rem; font-size: 0.7rem;
&:focus{ &:focus {
box-shadow:inset 0px 0px 0px 1px $body-font-color; box-shadow: inset 0 0 0 1px $body-font-color;
background: rgba($color: #000000, $alpha: .3); background: rgba($color: #000, $alpha: 0.3);
outline: none; outline: none;
} }
} }

2
src/renderer/components/WorkspaceConnectPanel.vue
View File

@ -72,7 +72,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.empty{ .empty {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;

26
src/renderer/components/WorkspaceExploreBar.vue
View File

@ -123,7 +123,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace-explorebar-resizer{ .workspace-explorebar-resizer {
position: absolute; position: absolute;
width: 4px; width: 4px;
right: -2px; right: -2px;
@ -133,7 +133,7 @@ export default {
z-index: 99; z-index: 99;
} }
.workspace-explorebar{ .workspace-explorebar {
width: $explorebar-width; width: $explorebar-width;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -141,22 +141,22 @@ export default {
align-items: center; align-items: center;
text-align: left; text-align: left;
background: $bg-color-gray; background: $bg-color-gray;
box-shadow: 0 0 1px 0px #000; box-shadow: 0 0 1px 0 #000;
z-index: 8; z-index: 8;
flex: initial; flex: initial;
position: relative; position: relative;
padding: 0; padding: 0;
.workspace-explorebar-header{ .workspace-explorebar-header {
width: 100%; width: 100%;
padding: .3rem; padding: 0.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: .6rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
.workspace-explorebar-title{ .workspace-explorebar-title {
width: 80%; width: 80%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -169,24 +169,24 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
> i{ > i {
opacity: .6; opacity: 0.6;
transition: opacity .2s; transition: opacity 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover{ &:hover {
opacity: 1; opacity: 1;
} }
} }
} }
} }
.workspace-explorebar-body{ .workspace-explorebar-body {
width: 100%; width: 100%;
height: calc((100vh - 30px) - #{$excluding-size}); height: calc((100vh - 30px) - #{$excluding-size});
overflow: overlay; overflow: overlay;
padding: 0 .1rem; padding: 0 0.1rem;
} }
} }
</style> </style>

18
src/renderer/components/WorkspaceExploreBarDatabase.vue
View File

@ -56,34 +56,34 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace-explorebar-database{ .workspace-explorebar-database {
.database-name, .database-name,
a.table-name{ a.table-name {
display: flex; display: flex;
align-items: center; align-items: center;
padding: .1rem; padding: 0.1rem;
cursor: pointer; cursor: pointer;
font-size: .7rem; font-size: 0.7rem;
> span{ > span {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&:hover{ &:hover {
color: $body-font-color; color: $body-font-color;
background: rgba($color: #FFF, $alpha: .05); background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px; border-radius: 2px;
} }
} }
.menu-item{ .menu-item {
line-height: 1.2; line-height: 1.2;
} }
.database-tables{ .database-tables {
margin-left: 1.2rem; margin-left: 1.2rem;
} }
} }

21
src/renderer/components/WorkspaceQueryTab.vue
View File

@ -149,33 +149,32 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace-tabs{ .workspace-tabs {
align-content: baseline; align-content: baseline;
.workspace-query-runner{ .workspace-query-runner {
.workspace-query-runner-footer {
.workspace-query-runner-footer{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .3rem .6rem .4rem; padding: 0.3rem 0.6rem 0.4rem;
align-items: center; align-items: center;
.workspace-query-buttons{ .workspace-query-buttons {
display: flex; display: flex;
.btn{ .btn {
display: flex; display: flex;
align-self: center; align-self: center;
color: $body-font-color; color: $body-font-color;
margin-right: .4rem; margin-right: 0.4rem;
} }
} }
.workspace-query-info{ .workspace-query-info {
display: flex; display: flex;
> div + div{ > div + div {
padding-left: .6rem; padding-left: 0.6rem;
} }
} }
} }

24
src/renderer/components/WorkspaceQueryTable.vue
View File

@ -274,40 +274,40 @@ export default {
overflow-anchor: none; overflow-anchor: none;
} }
.column-resizable{ .column-resizable {
&:hover, &:hover,
&:active{ &:active {
resize: horizontal; resize: horizontal;
overflow: hidden; overflow: hidden;
} }
} }
.table-column-title{ .table-column-title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sort-icon{ .sort-icon {
font-size: .7rem; font-size: 0.7rem;
line-height: 1; line-height: 1;
margin-left: .2rem; margin-left: 0.2rem;
} }
.column-key{ .column-key {
transform: rotate(90deg); transform: rotate(90deg);
font-size: .7rem; font-size: 0.7rem;
line-height: 1.5; line-height: 1.5;
margin-right: .2rem; margin-right: 0.2rem;
&.key-pri{ &.key-pri {
color: goldenrod; color: goldenrod;
} }
&.key-uni{ &.key-uni {
color: deepskyblue; color: deepskyblue;
} }
&.key-mul{ &.key-mul {
color: palegreen; color: palegreen;
} }
} }

14
src/renderer/components/WorkspaceQueryTableCell.vue
View File

@ -205,27 +205,27 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.editable-field{ .editable-field {
margin: 0; margin: 0;
border: none; border: none;
line-height: 1; line-height: 1;
width: 100%; width: 100%;
} }
.cell-content{ .cell-content {
display: block; display: block;
min-height: .8rem; min-height: 0.8rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.textarea-editor{ .textarea-editor {
height: 50vh!important; height: 50vh !important;
} }
.editor-field-info{ .editor-field-info {
margin-top: .6rem; margin-top: 0.6rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

4
src/renderer/components/WorkspaceQueryTableContext.vue
View File

@ -67,7 +67,3 @@ export default {
} }
}; };
</script> </script>
<style>
</style>

21
src/renderer/components/WorkspaceTableTab.vue
View File

@ -146,33 +146,32 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace-tabs{ .workspace-tabs {
align-content: baseline; align-content: baseline;
.workspace-query-runner{ .workspace-query-runner {
.workspace-query-runner-footer {
.workspace-query-runner-footer{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .3rem .6rem .4rem; padding: 0.3rem 0.6rem 0.4rem;
align-items: center; align-items: center;
.workspace-query-buttons{ .workspace-query-buttons {
display: flex; display: flex;
.btn{ .btn {
display: flex; display: flex;
align-self: center; align-self: center;
color: $body-font-color; color: $body-font-color;
margin-right: .4rem; margin-right: 0.4rem;
} }
} }
.workspace-query-info{ .workspace-query-info {
display: flex; display: flex;
> div + div{ > div + div {
padding-left: .6rem; padding-left: 0.6rem;
} }
} }
} }

58
src/renderer/scss/_fake-tables.scss
View File

@ -5,12 +5,35 @@
display: table; display: table;
table-layout: fixed; table-layout: fixed;
&.table-striped {
.tbody { .tbody {
.tr:nth-of-type(odd) { display: table-row-group;
background: $bg-color;
} }
.tr {
display: table-row;
} }
// Scollable tables
&.table-scroll {
display: block;
overflow-x: auto;
padding-bottom: 0.75rem;
white-space: nowrap;
}
.thead {
display: table-header-group;
}
.td,
.th {
border-bottom: $border-width solid $border-color;
padding: $unit-3 $unit-2;
display: table-cell;
}
.th {
border-bottom-width: $border-width-lg;
} }
&, &,
@ -20,6 +43,7 @@
&.selected { &.selected {
background: #333 !important; background: #333 !important;
} }
&.active { &.active {
background: $bg-color-dark; background: $bg-color-dark;
} }
@ -37,33 +61,11 @@
} }
} }
// Scollable tables &.table-striped {
&.table-scroll {
display: block;
overflow-x: auto;
padding-bottom: 0.75rem;
white-space: nowrap;
}
.thead {
display: table-header-group;
}
.tbody { .tbody {
display: table-row-group; .tr:nth-of-type(odd) {
background: $bg-color;
} }
.tr {
display: table-row;
} }
.td,
.th {
border-bottom: $border-width solid $border-color;
padding: $unit-3 $unit-2;
display: table-cell;
}
.th {
border-bottom-width: $border-width-lg;
} }
} }

40
src/renderer/scss/_mdi-additions.scss
View File

@ -1,16 +1,38 @@
.material-icons {
// TODO: rewrite with rem
.material-icons{// TODO: rewrite with rem
/* Rules for sizing the icon. */ /* Rules for sizing the icon. */
&.md-18 { font-size: 18px; } &.md-18 {
&.md-24 { font-size: 24px; } font-size: 18px;
&.md-36 { font-size: 36px; } }
&.md-48 { font-size: 48px; }
&.md-24 {
font-size: 24px;
}
&.md-36 {
font-size: 36px;
}
&.md-48 {
font-size: 48px;
}
/* Rules for using icons as black on a light background. */ /* Rules for using icons as black on a light background. */
&.md-dark { color: rgba(0, 0, 0, 0.54); } &.md-dark {
&.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } color: rgba(0, 0, 0, 0.54);
}
&.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */ /* Rules for using icons as white on a dark background. */
&.md-light { color: rgba(255, 255, 255, 1); } &.md-light {
&.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } color: rgba(255, 255, 255, 1);
}
&.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
} }

2
src/renderer/scss/_transitions.scss
View File

@ -1,9 +1,11 @@
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.slide-fade-leave-active { .slide-fade-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
} }
.slide-fade-enter, .slide-fade-enter,
.slide-fade-leave-to { .slide-fade-leave-to {
transform: translateX(10px); transform: translateX(10px);

4
src/renderer/scss/_variables.scss
View File

@ -1,4 +1,4 @@
/*Colors*/ /* Colors */
$body-bg: #1d1d1d; $body-bg: #1d1d1d;
$body-font-color: #fff; $body-font-color: #fff;
$bg-color: #1d1d1d; $bg-color: #1d1d1d;
@ -9,7 +9,7 @@ $success-color: #32b643;
$error-color: #de3b28; $error-color: #de3b28;
$warning-color: #e0a40c; $warning-color: #e0a40c;
/*Sizes*/ /* Sizes */
$titlebar-height: 1.5rem; $titlebar-height: 1.5rem;
$settingbar-width: 3rem; $settingbar-width: 3rem;
$explorebar-width: 14rem; $explorebar-width: 14rem;

14
src/renderer/scss/main.scss
View File

@ -12,7 +12,7 @@ body {
user-select: none; user-select: none;
} }
/*Additions*/ /* Additions */
@include margin-variant(3, $unit-3); @include margin-variant(3, $unit-3);
@include margin-variant(4, $unit-4); @include margin-variant(4, $unit-4);
@include padding-variant(3, $unit-3); @include padding-variant(3, $unit-3);
@ -59,6 +59,7 @@ body {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(359deg); transform: rotate(359deg);
} }
@ -68,16 +69,16 @@ body {
animation: rotation 0.8s infinite linear; animation: rotation 0.8s infinite linear;
} }
/*Override*/ /* Override */
.modal { .modal {
.modal-overlay, .modal-overlay,
&.active .modal-overlay { &.active .modal-overlay {
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
} }
.modal-sm .modal-container, .modal-container,
.modal-container { .modal-sm .modal-container {
box-shadow: 0 0 1px 0px #000; box-shadow: 0 0 1px 0 #000;
padding: 0; padding: 0;
background: $bg-color; background: $bg-color;
@ -127,12 +128,13 @@ body {
border-color: $primary-color; border-color: $primary-color;
} }
.input-group .input-group-addon{ .input-group .input-group-addon {
border-color: #3f3f3f; border-color: #3f3f3f;
} }
.menu { .menu {
font-size: 0.7rem; font-size: 0.7rem;
.menu-item { .menu-item {
+ .menu-item { + .menu-item {
margin-top: 0; margin-top: 0;