fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

style: 🎨 stylelint implementation

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
Show Stats 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'

6
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>

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

@ -38,58 +38,57 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.context{ .context {
display: flex;
color: $body-font-color;
font-size: 16px;
z-index: 400;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0.4rem;
position: fixed;
right: 0;
top: 0;
left: 0;
bottom: 0;
pointer-events: none;
.context-container {
min-width: 100px;
max-width: 150px;
z-index: 1;
box-shadow: 0 0 1px 0 #000;
padding: 0;
background: #1d1d1d;
border-radius: 0.1rem;
display: flex; display: flex;
flex-direction: column;
position: absolute;
pointer-events: initial;
.context-element {
display: flex;
align-items: center;
padding: 0.1rem 0.3rem;
cursor: pointer;
&:hover {
background: $primary-color;
}
}
}
.context-overlay {
background: transparent;
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute; position: absolute;
color: $body-font-color;
font-size: 16px;
z-index: 400;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 0.4rem;
position: fixed;
right: 0; right: 0;
top: 0; top: 0;
left: 0; }
bottom: 0; }
pointer-events: none;
.context-container{
min-width: 100px;
max-width: 150px;
z-index: 1;
box-shadow: 0px 0px 1px 0px #000;
padding: 0;
background: #1d1d1d;
border-radius: 0.1rem;
display: flex;
flex-direction: column;
position: absolute;
pointer-events: initial;
.context-element{
display: flex;
align-items: center;
padding: .1rem .3rem;
cursor: pointer;
&:hover{
background: $primary-color;
}
}
}
.context-overlay{
background: transparent;
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
}
</style> </style>

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

@ -71,24 +71,24 @@ 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;
word-break: break-all; word-break: break-all;
width: fit-content; width: fit-content;
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;
display: inline-block; display: inline-block;
max-width: 30rem; max-width: 30rem;
} }
.expanded .notification-message{ .expanded .notification-message {
white-space: initial; white-space: initial;
} }
</style> </style>

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

@ -70,10 +70,10 @@ 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;
word-break: break-all; word-break: break-all;
} }
</style> </style>

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

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

6
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>

6
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>

31
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{
display: flex;
align-items: center;
}
}
.form-label {
display: flex;
align-items: center;
}
}
} }
</style> </style>

4
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>

27
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>

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

@ -26,12 +26,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.empty{ .empty {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
</style> </style>

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

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

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

@ -75,10 +75,10 @@ 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;
bottom: 1rem; bottom: 1rem;
} }
</style> </style>

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

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

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

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

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

@ -92,94 +92,94 @@ 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;
} }
> span { > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
.workspace-query-results{
overflow: auto;
white-space: nowrap;
.table{
width: auto;
border-collapse: separate;
.th{
position: sticky;
top: 0;
background: $bg-color;
border: 1px solid;
border-left: none;
border-bottom-width: 2px;
border-color: $bg-color-light;
padding: 0;
font-weight: 700;
font-size: .7rem;
> div {
padding: .1rem .4rem;
min-width: -webkit-fill-available;
}
}
.td{
border-right: 1px solid;
border-bottom: 1px solid;
border-color: $bg-color-light;
padding: 0 .4rem;
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: .7rem; white-space: nowrap;
text-overflow: ellipsis;
&:focus{ }
box-shadow:inset 0px 0px 0px 1px $body-font-color; }
background: rgba($color: #000000, $alpha: .3);
outline: none;
}
}
} }
} }
}
.workspace-query-results {
overflow: auto;
white-space: nowrap;
.table {
width: auto;
border-collapse: separate;
.th {
position: sticky;
top: 0;
background: $bg-color;
border: 1px solid;
border-left: none;
border-bottom-width: 2px;
border-color: $bg-color-light;
padding: 0;
font-weight: 700;
font-size: 0.7rem;
> div {
padding: 0.1rem 0.4rem;
min-width: -webkit-fill-available;
}
}
.td {
border-right: 1px solid;
border-bottom: 1px solid;
border-color: $bg-color-light;
padding: 0 0.4rem;
text-overflow: ellipsis;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
font-size: 0.7rem;
&:focus {
box-shadow: inset 0 0 0 1px $body-font-color;
background: rgba($color: #000, $alpha: 0.3);
outline: none;
}
}
}
}
} }
</style> </style>

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

@ -72,11 +72,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.empty{ .empty {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style>

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

@ -123,70 +123,70 @@ 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;
top: 0; top: 0;
height: calc(100vh - #{$excluding-size}); height: calc(100vh - #{$excluding-size});
cursor: ew-resize; cursor: ew-resize;
z-index: 99; z-index: 99;
} }
.workspace-explorebar{ .workspace-explorebar {
width: $explorebar-width; width: $explorebar-width;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: left;
background: $bg-color-gray;
box-shadow: 0 0 1px 0 #000;
z-index: 8;
flex: initial;
position: relative;
padding: 0;
.workspace-explorebar-header {
width: 100%;
padding: 0.3rem;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
justify-content: flex-start; font-size: 0.6rem;
align-items: center; font-weight: 700;
text-align: left; text-transform: uppercase;
background: $bg-color-gray;
box-shadow: 0 0 1px 0px #000;
z-index: 8;
flex: initial;
position: relative;
padding: 0;
.workspace-explorebar-header{ .workspace-explorebar-title {
width: 100%; width: 80%;
padding: .3rem; white-space: nowrap;
display: flex; overflow: hidden;
justify-content: space-between; text-overflow: ellipsis;
font-size: .6rem; display: block;
font-weight: 700; align-items: center;
text-transform: uppercase;
.workspace-explorebar-title{
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
align-items: center;
}
.workspace-explorebar-tools {
display: flex;
align-items: center;
> i{
opacity: .6;
transition: opacity .2s;
display: flex;
align-items: center;
&:hover{
opacity: 1;
}
}
}
} }
.workspace-explorebar-body{ .workspace-explorebar-tools {
width: 100%; display: flex;
height: calc((100vh - 30px) - #{$excluding-size}); align-items: center;
overflow: overlay;
padding: 0 .1rem; > i {
opacity: 0.6;
transition: opacity 0.2s;
display: flex;
align-items: center;
&:hover {
opacity: 1;
}
}
} }
} }
.workspace-explorebar-body {
width: 100%;
height: calc((100vh - 30px) - #{$excluding-size});
overflow: overlay;
padding: 0 0.1rem;
}
}
</style> </style>

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

@ -56,35 +56,35 @@ 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{
color: $body-font-color;
background: rgba($color: #FFF, $alpha: .05);
border-radius: 2px;
}
} }
.menu-item{ &:hover {
line-height: 1.2; color: $body-font-color;
background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px;
} }
}
.database-tables{ .menu-item {
margin-left: 1.2rem; line-height: 1.2;
} }
}
.database-tables {
margin-left: 1.2rem;
}
}
</style> </style>

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

@ -149,37 +149,36 @@ 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 {
display: flex;
justify-content: space-between;
padding: 0.3rem 0.6rem 0.4rem;
align-items: center;
.workspace-query-runner-footer{ .workspace-query-buttons {
display: flex; display: flex;
justify-content: space-between;
padding: .3rem .6rem .4rem;
align-items: center;
.workspace-query-buttons{ .btn {
display: flex; display: flex;
align-self: center;
.btn{ color: $body-font-color;
display: flex; margin-right: 0.4rem;
align-self: center; }
color: $body-font-color;
margin-right: .4rem;
}
}
.workspace-query-info{
display: flex;
> div + div{
padding-left: .6rem;
}
}
} }
}
.workspace-query-info {
display: flex;
> div + div {
padding-left: 0.6rem;
}
}
}
}
} }
</style> </style>

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

@ -269,46 +269,46 @@ export default {
<style lang="scss"> <style lang="scss">
.vscroll { .vscroll {
height: 1000px; height: 1000px;
overflow: auto; overflow: auto;
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;
} }
} }
</style> </style>

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

@ -205,28 +205,28 @@ 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;
} }
</style> </style>

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

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

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

@ -146,37 +146,36 @@ 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 {
display: flex;
justify-content: space-between;
padding: 0.3rem 0.6rem 0.4rem;
align-items: center;
.workspace-query-runner-footer{ .workspace-query-buttons {
display: flex; display: flex;
justify-content: space-between;
padding: .3rem .6rem .4rem;
align-items: center;
.workspace-query-buttons{ .btn {
display: flex; display: flex;
align-self: center;
.btn{ color: $body-font-color;
display: flex; margin-right: 0.4rem;
align-self: center; }
color: $body-font-color;
margin-right: .4rem;
}
}
.workspace-query-info{
display: flex;
> div + div{
padding-left: .6rem;
}
}
} }
}
.workspace-query-info {
display: flex;
> div + div {
padding-left: 0.6rem;
}
}
}
}
} }
</style> </style>

64
src/renderer/scss/_data-types.scss
View File

@ -1,43 +1,43 @@
@mixin type-colors($types) { @mixin type-colors($types) {
@each $type, $color in $types { @each $type, $color in $types {
.type-#{$type} { .type-#{$type} {
color: $color; color: $color;
@if $type == "number" { @if $type == "number" {
text-align: right; text-align: right;
}
} }
} }
}
} }
@include type-colors( @include type-colors(
( (
"char": seagreen, "char": seagreen,
"varchar": seagreen, "varchar": seagreen,
"text": seagreen, "text": seagreen,
"mediumtext": seagreen, "mediumtext": seagreen,
"longtext": seagreen, "longtext": seagreen,
"int": cornflowerblue, "int": cornflowerblue,
"tinyint": cornflowerblue, "tinyint": cornflowerblue,
"smallint": cornflowerblue, "smallint": cornflowerblue,
"mediumint": cornflowerblue, "mediumint": cornflowerblue,
"bigint": cornflowerblue, "bigint": cornflowerblue,
"datetime": coral, "datetime": coral,
"date": coral, "date": coral,
"time": coral, "time": coral,
"timestamp": coral, "timestamp": coral,
"bit": lightskyblue, "bit": lightskyblue,
"blob": darkorchid, "blob": darkorchid,
"mediumblob": darkorchid, "mediumblob": darkorchid,
"longblob": darkorchid, "longblob": darkorchid,
"unknown": gray, "unknown": gray,
) )
); );
.is-null { .is-null {
color: gray; color: gray;
&::after { &::after {
content: "NULL"; content: "NULL";
} }
} }

38
src/renderer/scss/_db-icons.scss
View File

@ -1,26 +1,26 @@
.dbi { .dbi {
display: inline-block; display: inline-block;
width: 42px; width: 42px;
height: 42px; height: 42px;
background-size: cover; background-size: cover;
&.dbi-mysql { &.dbi-mysql {
background-image: url("../images/svg/mysql.svg"); background-image: url("../images/svg/mysql.svg");
} }
&.dbi-maria { &.dbi-maria {
background-image: url("../images/svg/mariadb.svg"); background-image: url("../images/svg/mariadb.svg");
} }
&.dbi-mssql { &.dbi-mssql {
background-image: url("../images/svg/mssql.svg"); background-image: url("../images/svg/mssql.svg");
} }
&.dbi-pg { &.dbi-pg {
background-image: url("../images/svg/pg.svg"); background-image: url("../images/svg/pg.svg");
} }
&.dbi-oracledb { &.dbi-oracledb {
background-image: url("../images/svg/oracledb.svg"); background-image: url("../images/svg/oracledb.svg");
} }
} }

70
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 { display: table-row-group;
.tr:nth-of-type(odd) { }
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 { .tbody {
display: block; .tr:nth-of-type(odd) {
overflow-x: auto; background: $bg-color;
padding-bottom: 0.75rem; }
white-space: nowrap; }
}
.thead {
display: table-header-group;
}
.tbody {
display: table-row-group;
}
.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;
} }
} }

52
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 {
&.md-18 { font-size: 18px; } font-size: 18px;
&.md-24 { font-size: 24px; } }
&.md-36 { font-size: 36px; }
&.md-48 { font-size: 48px; } &.md-24 {
font-size: 24px;
/* Rules for using icons as black on a light background. */ }
&.md-dark { color: rgba(0, 0, 0, 0.54); }
&.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } &.md-36 {
font-size: 36px;
/* Rules for using icons as white on a dark background. */ }
&.md-light { color: rgba(255, 255, 255, 1); }
&.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } &.md-48 {
} font-size: 48px;
}
/* Rules for using icons as black on a light background. */
&.md-dark {
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. */
&.md-light {
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);

6
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,9 +9,9 @@ $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;
$footer-height: 1.5rem; $footer-height: 1.5rem;
$excluding-size: $footer-height + $titlebar-height; $excluding-size: $footer-height + $titlebar-height;

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

@ -9,109 +9,110 @@
@import "~spectre.css/src/spectre-exp"; @import "~spectre.css/src/spectre-exp";
body { 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);
@include padding-variant(4, $unit-4); @include padding-variant(4, $unit-4);
.btn.btn-gray { .btn.btn-gray {
color: #fff; color: #fff;
background: $bg-color-gray; background: $bg-color-gray;
&:hover { &:hover {
background: $bg-color; background: $bg-color;
} }
} }
.p-vcentered { .p-vcentered {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
} }
.c-help { .c-help {
cursor: help; cursor: help;
} }
// Scrollbars // Scrollbars
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: $bg-color-light; background: $bg-color-light;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba($color: #fff, $alpha: 0.5); background: rgba($color: #fff, $alpha: 0.5);
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 1); background: rgba($color: #fff, $alpha: 1);
} }
} }
// Animations // Animations
@keyframes rotation { @keyframes rotation {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to {
transform: rotate(359deg); to {
} transform: rotate(359deg);
}
} }
.rotate { .rotate {
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;
.modal-header { .modal-header {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
text-transform: uppercase; text-transform: uppercase;
background: $bg-color-gray; background: $bg-color-gray;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #fff; color: #fff;
} }
} }
} }
.tab { .tab {
border-color: #272727; border-color: #272727;
} }
.panel { .panel {
border: none; border: none;
} }
.badge { .badge {
&[data-badge], &[data-badge],
&:not([data-badge]) { &:not([data-badge]) {
&::after { &::after {
box-shadow: none; box-shadow: none;
} }
} }
} }
.form-select { .form-select {
cursor: pointer; cursor: pointer;
} }
.form-select, .form-select,
@ -119,34 +120,35 @@ body {
.form-input, .form-input,
.form-checkbox .form-icon, .form-checkbox .form-icon,
.form-radio .form-icon { .form-radio .form-icon {
border-color: $bg-color-light; border-color: $bg-color-light;
background: $bg-color-gray; background: $bg-color-gray;
} }
.form-select:not([multiple]):not([size]):focus { .form-select:not([multiple]):not([size]):focus {
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 {
margin-top: 0; + .menu-item {
} margin-top: 0;
} }
}
} }
.accordion-body { .accordion-body {
max-height: 500rem !important; max-height: 500rem !important;
} }
.btn.loading { .btn.loading {
> .material-icons, > .material-icons,
> span { > span {
visibility: hidden; visibility: hidden;
} }
} }