Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

using sass is a spiderweb of problems #1873

Merged
merged 4 commits into from
Jan 22, 2024
Merged

using sass is a spiderweb of problems #1873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
65c928b
using sass is a spiderweb of problems
rathboma Jan 10, 2024
2b38951
use @include instead of @extends
azmy60 Jan 15, 2024
e71e0e2
fix style clashes with vendor css
azmy60 Jan 16, 2024
34fbe02
Merge branch 'master' into sass-migration
rathboma Jan 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/sqltools/src/assets/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import './app/mixins';
@import './app/normalize';
@import './app/variables';
@import './app/flex-grid';
Expand Down
1 change: 1 addition & 0 deletions apps/sqltools/src/assets/styles/app/_flex-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

// Responsive Variables
// ------------------------
$screen-xs: 600px;
Expand Down
36 changes: 2 additions & 34 deletions apps/sqltools/src/assets/styles/app/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,37 +91,7 @@ code {
// Buttons
// ---------------------------------------
.btn {
display: inline-flex;
align-items: center;
font-size: 13px;
line-height: $input-height;
height: $input-height;
font-weight: 700;
outline: 0;
border: 0;
padding: 0 1rem;
min-width: 88px;
box-shadow: inset 0 0 0 1px rgba(white, 0.025);
border-radius: $btn-border-radius;
transition: background 0.15s ease-in-out,
color 0.15s ease-in-out;
justify-content: center;
text-align: center;
cursor: pointer;
&:hover, &:focus {
font-weight: 700;
outline: 0;
border: 0;
box-shadow: none;
}
&.btn-icon {
display: flex;
align-items: center;
i {
font-size: 1rem;
margin-left: -3px;
}
}
@include btn;
}
.btn-primary {
background: $theme-primary;
Expand Down Expand Up @@ -669,9 +639,7 @@ input[type=file] {
transition: box-shadow 0.28s ease-in-out;
}
.card-shadow-hover {
box-shadow: 0 0 0 1px rgba(black ,0.06),
0 1px 2px rgba(black ,0.08),
0 6px 15px rgba(black ,0.12);
@include card-shadow-hover;
}

// Badge
Expand Down
12 changes: 12 additions & 0 deletions apps/sqltools/src/assets/styles/app/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

@mixin layout-center {
display: flex;
justify-content: center;
align-items: center;
}

@mixin card-shadow-hover {
box-shadow: 0 0 0 1px rgba(black, 0.06),
0 1px 2px rgba(black, 0.08),
0 6px 15px rgba(black, 0.12);
}
2 changes: 1 addition & 1 deletion apps/studio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@
"mkdirp": "^1.0.4",
"mssql": "^8.0.2",
"mysql2": "^2.3.3",
"sass": "^1.69.7",
"node-firebird": "^1.1.8",
"node-sass": "^6.0.1",
"noty": "beekeeper-studio/noty#dc27550d340dd53480cf861d5ad4e7e292107ad6",
"papaparse": "^5.3.0",
"pg": "^8.4.2",
Expand Down
2 changes: 1 addition & 1 deletion apps/studio/src/assets/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

@import './app/normalize';
@import './app/variables';
@import './app/mixins';
@import './app/flex-grid';
@import './app/base';

Expand Down
16 changes: 7 additions & 9 deletions apps/studio/src/assets/styles/app/_flex-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,23 +62,21 @@ $gutter: 1rem;
}
&.gutter {
width: initial !important; // split.js class overlap fix
margin-left: -$gutter / 2;
margin-right: -$gutter / 2;
margin-left: calc(-1 * $gutter / 2);
margin-right: calc(-1 * $gutter / 2);
>.col {
padding-left: $gutter / 2;
padding-right: $gutter / 2;
margin-top: $gutter / 2;
margin-bottom: $gutter / 2;
padding-left: calc($gutter / 2);
padding-right: calc($gutter / 2);
margin-top: calc($gutter / 2);
margin-bottom: calc($gutter / 2);
}
}
}

// Alignment
// -------------------------
.layout-center {
display: flex;
justify-content: center;
align-items: center;
@include layout-center;
}

// Horizontal Row Alignment
Expand Down
40 changes: 9 additions & 31 deletions apps/studio/src/assets/styles/app/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,13 @@ a {
}
}
i {
@extend .noselect;
@include noselect;
}
.expand {
flex-grow: 1;
}
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@include truncate;
}
.sub {
font-weight: bold;
Expand All @@ -34,9 +32,7 @@ i {
letter-spacing: 0.05rem;
}
.noselect {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
@include noselect;
}
.clickable,
.cursor-pointer {
Expand Down Expand Up @@ -138,11 +134,7 @@ hr {
}

.btn-flat {
color: $theme-base;
background: rgba($theme-base, 0.06);
&:hover, &:focus {
background: rgba($theme-base, 0.12);
}
@include btn-flat;
}
.btn-link {
color: $theme-base;
Expand Down Expand Up @@ -206,8 +198,8 @@ hr {
margin: 0;
text-align: center;
box-shadow: none;
@extend .noselect;
@extend .layout-center !optional;
@include noselect;
@include layout-center;
transition: background 0.15s ease-in-out;
&:hover, &:focus {
background: rgba($theme-base, 0.1);
Expand Down Expand Up @@ -317,21 +309,7 @@ hr {
}
}
.form-control {
position: relative;
display: flex;
height: $input-height;
padding: 0 0.75rem;
font-size: 0.9rem;
font-weight: normal;
line-height: $input-height;
color: $text;
background: transparent;
border-radius: $input-radius;
border: 1px solid $border-color;
outline: none;
box-shadow: none;
width: 100%;
transition: border-color 0.15s ease-in-out;
@include form-control;
}

label {
Expand All @@ -343,7 +321,7 @@ label {
}

input, select, textarea, .bk-form-input {
@extend .form-control;
@include form-control;
&:focus {
border-color: $input-highlight;
}
Expand Down Expand Up @@ -688,7 +666,7 @@ input[type=file] {
}
.card {
background: lighten($theme-bg, 6%);
@extend .card-shadow;
@include card-shadow;
}
.card-flat {
background: rgba($theme-base, 0.04);
Expand Down
119 changes: 119 additions & 0 deletions apps/studio/src/assets/styles/app/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
@mixin layout-center {
display: flex;
justify-content: center;
align-items: center;
}

@mixin card-shadow-hover {
box-shadow: 0 0 0 1px rgba(black, 0.06),
0 1px 2px rgba(black, 0.08),
0 6px 15px rgba(black, 0.12);
}


@mixin card-shadow {
box-shadow: 0 0 0 1px rgba(black, 0.06),
0 1px 3px 0 rgba(black, 0.12),
0 2px 1px -1px rgba(black, 0.08);
transition: box-shadow 0.28s ease-in-out;
}

@mixin dropdown-shadow {
box-shadow: 0 1px 4px rgba(black, 0.37) !important;
}


@mixin btn {
display: inline-flex;
align-items: center;
font-size: 13px;
line-height: $input-height;
height: $input-height;
font-weight: 700;
outline: 0;
border: 0;
padding: 0 1rem;
min-width: 88px;
box-shadow: inset 0 0 0 1px rgba(white, 0.025);
border-radius: $btn-border-radius;
transition: background 0.15s ease-in-out,
color 0.15s ease-in-out;
justify-content: center;
text-align: center;
cursor: pointer;

&:hover,
&:focus {
font-weight: 700;
outline: 0;
border: 0;
box-shadow: none;
}

&.btn-icon {
display: flex;
align-items: center;

i {
font-size: 1rem;
margin-left: -3px;
}
}
}

@mixin form-control {
position: relative;
display: flex;
height: $input-height;
padding: 0 0.75rem;
font-size: 0.9rem;
font-weight: normal;
line-height: $input-height;
color: $text;
background: transparent;
border-radius: $input-radius;
border: 1px solid $border-color;
outline: none;
box-shadow: none;
width: 100%;
transition: border-color 0.15s ease-in-out;
}

@mixin bk-form-input {
@include form-control;
&:focus {
border-color: $input-highlight;
}
}

@mixin btn-flat {
color: $theme-base;
background: rgba($theme-base, 0.06);
&:hover, &:focus {
background: rgba($theme-base, 0.12);
}
}

@mixin btn-small {
font-size: 0.85rem;
padding: 0 .65rem;
min-width: 0;
height: 24px;
line-height: 24px;
border-radius: $btn-border-radius-small;
x-label {
line-height: 24px;
}
}

@mixin noselect {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

@mixin truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
4 changes: 2 additions & 2 deletions apps/studio/src/assets/styles/app/app-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
background: lighten($theme-bg, 5%);
border-radius: 6px;
min-width: 150px;
@extend .card-shadow-hover;
@include card-shadow-hover;
}
li {
position: relative;
Expand Down Expand Up @@ -148,4 +148,4 @@
}
}
}
}
}
2 changes: 1 addition & 1 deletion apps/studio/src/assets/styles/app/connection-interface.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
.save-actions {
margin-top: $gutter-h;
.save {
@extend .btn-flat;
@include btn-flat;
}
}
}
Expand Down