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

Font styling consolidation #8633

Merged
merged 32 commits into from
Nov 27, 2019
Merged

Font styling consolidation #8633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
035c0bd
Font weights standardized
rusackas Nov 20, 2019
f286642
now with more glob!
rusackas Nov 20, 2019
b17939f
Linting touchups
rusackas Nov 20, 2019
e7d3797
caught a low-value color declaration
rusackas Nov 20, 2019
785481c
first wave of font size alignment
rusackas Nov 21, 2019
adea6ab
Merge branch 'master' into font-styling-consolidation
rusackas Nov 21, 2019
565e977
Merge branch 'master' into font-styling-consolidation
rusackas Nov 21, 2019
cbcb5c7
getting the CRUD styles caught up to speed.
rusackas Nov 21, 2019
184f9d0
unneeded inline-block - float does that for ya.
rusackas Nov 21, 2019
c331fad
a few errant colors that snuck in.
rusackas Nov 21, 2019
2f3d4a3
more font stylings.
rusackas Nov 21, 2019
0e5599f
caught some more colors that needed variable alignment
rusackas Nov 21, 2019
f183ffb
le typo
rusackas Nov 21, 2019
450e1d5
whittle, whittle
rusackas Nov 21, 2019
389db29
dead styles
rusackas Nov 21, 2019
31d3047
whittling
rusackas Nov 21, 2019
643a730
whittling
rusackas Nov 21, 2019
848a0b5
whittling away at font sizes
rusackas Nov 21, 2019
ec83d03
since we appear to be adjusting icon sizes for optics, let's get this…
rusackas Nov 21, 2019
d4bfaf9
Prettier :sparkles:
rusackas Nov 21, 2019
f97e311
Merge branch 'master' into font-styling-consolidation
rusackas Nov 22, 2019
7f4999d
whittling at line height standardization.
rusackas Nov 22, 2019
809b21e
placing vars, take 1
rusackas Nov 22, 2019
86653aa
Merge branch 'master' into font-styling-consolidation
rusackas Nov 25, 2019
e87110e
2 more down...
rusackas Nov 25, 2019
85e92ea
cleaning out some styles that had no real effect.
rusackas Nov 25, 2019
cb9a003
seemingly no change if this is removed for consistency.
rusackas Nov 25, 2019
6115296
allowing one 8px line height for proper icon placement - adding comment.
rusackas Nov 25, 2019
d7eb638
last one, I reckon.
rusackas Nov 25, 2019
0aba490
linting fixes
rusackas Nov 25, 2019
04c2ad2
Merge branch 'master' into font-styling-consolidation
rusackas Nov 26, 2019
5e78695
Merge branch 'master' into font-styling-consolidation
rusackas Nov 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion superset/assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --mode=production --colors --progress",
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json ./{src,spec}/**/*.ts{,x}",
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx . && tslint -c tslint.json --fix ./{src,spec}/**/*.ts{,x} && npm run clean-css",
"clean-css": "prettier --write src/**/*.{css,less,sass,scss}",
"clean-css": "prettier --write 'src/**/*.{css,less,sass,scss}'",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does a linter catch if css isn't formatted properly with this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not at this point... was just using it to make life easier and catch myself. Does your Prettier PR address that? Don't want to duplicate effort here :)

"cypress": "cypress",
"cypress-debug": "cypress open --config watchForFileChanges=true",
"install-cypress": "npm install [email protected]"
Expand Down
16 changes: 9 additions & 7 deletions superset/assets/src/CRUD/crud.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
@import "../../stylesheets/less/variables.less";

.CRUD {
.text-right {
text-align: right;
Expand All @@ -24,24 +26,24 @@
padding: 10px;
}
.control-label {
font-weight: bold;
font-size: 16px;
font-weight: @font-weight-bold;
font-size: @font-size-l;
mistercrunch marked this conversation as resolved.
Show resolved Hide resolved
}
.tiny-cell {
width: 5px;
}
i.fa-caret-down,
i.fa-caret-up {
width: "5px";
width: 5px;
}
td.expanded {
border-top: "0px";
padding: "0px";
border-top: 0;
padding: 0;
}
.frame {
border: "1px solid #AAA";
border: 1px solid @gray-heading;
border-radius: 5;
padding: 10;
background: "#F4F4F4";
background: @gray-bg;
}
}
2 changes: 1 addition & 1 deletion superset/assets/src/SqlLab/components/TableElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ class TableElement extends React.PureComponent {
<div className="pull-left">
<a
href="#"
className="table-name text-bigger"
className="table-name"
onClick={(e) => { this.toggleTable(e); }}
>
<strong>
Expand Down
17 changes: 9 additions & 8 deletions superset/assets/src/SqlLab/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,8 @@ div.Workspace {
form {
margin-block-end: 0;
}
.leftItems form, .rightItems {
.leftItems form,
.rightItems {
& > span {
margin-right: 5px;
margin-bottom: 5px;
Expand All @@ -151,12 +152,12 @@ div.Workspace {
height: 10px;
display: inline-block;
background-color: @gray-light;
line-height: 8px;
line-height: 8px; // set specifically for closing 'x'
text-align: center;
vertical-align: middle;
font-size: 15px;
font-size: @font-size-m;
margin-top: -3px;
font-weight: bold;
font-weight: @font-weight-bold;
}
.running {
background-color: fade(@success, @opacity-heavy);
Expand Down Expand Up @@ -185,7 +186,7 @@ div.Workspace {
padding: 0px !important;
margin: 0px;
border: none;
font-size: 12px;
font-size: @font-size-s;
background-color: transparent !important;
}

Expand Down Expand Up @@ -233,7 +234,7 @@ div.Workspace {

.ddbtn-tab {
font-size: inherit;
font-weight: bold;
font-weight: @font-weight-bold;

&:active {
background: none;
Expand Down Expand Up @@ -361,7 +362,7 @@ a.Link {
border: none;
text-align: left;
color: @lightest;
font-size: 10px;
font-size: @font-size-xs;
}
.tooltip-inner {
max-width: 500px;
Expand Down Expand Up @@ -414,5 +415,5 @@ a.Link {
}

.cost-estimate {
font-size: 12px;
font-size: @font-size-s;
}
4 changes: 3 additions & 1 deletion superset/assets/src/chart/chart.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
@import "../../stylesheets/less/variables.less";

.chart-tooltip {
opacity: 0.75;
font-size: 12px;
font-size: @font-size-s;
}
18 changes: 11 additions & 7 deletions superset/assets/src/components/FilterableTable/FilterableTableStyles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
* under the License.
*/

@import '../../../stylesheets/less/variables.less';
@import "../../../stylesheets/less/variables.less";

.ReactVirtualized__Grid__innerScrollContainer {
border: 1px solid;
}
.ReactVirtualized__Table__headerRow {
font-weight: 700;
font-weight: @font-weight-bold;
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -48,10 +48,10 @@
border-right: 1px solid @gray-light;
align-self: center;
padding: 12px;
font-size: 12px;
font-size: @font-size-s;
}
.grid-header-cell {
font-weight: 700;
font-weight: @font-weight-bold;
}
.ReactVirtualized__Table__headerColumn:last-of-type,
.ReactVirtualized__Table__rowColumn:last-of-type {
Expand All @@ -78,8 +78,12 @@
width: 1em;
fill: currentColor;
}
.even-row { background: @gray-bg; }
.odd-row { background: @lightest; }
.even-row {
background: @gray-bg;
}
.odd-row {
background: @lightest;
}
.header-style {
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -93,5 +97,5 @@
}
.cell-text-for-measuring {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-size: @font-size-s;
}
19 changes: 9 additions & 10 deletions superset/assets/src/dashboard/stylesheets/builder-sidepane.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
position: relative;

.dashboard-builder-sidepane-header {
font-size: 15px;
font-weight: 700;
font-size: @font-size-l;
font-weight: @font-weight-bold;
border-top: 1px solid @gray-light;
border-bottom: 1px solid @gray-light;
padding: 16px;
Expand All @@ -32,7 +32,7 @@
}

.trigger {
font-size: 16px;
font-size: @font-size-l;
color: @almost-black;
opacity: 1;
margin-left: auto;
Expand Down Expand Up @@ -92,7 +92,7 @@
.chart-card-container {
.chart-card {
border: 1px solid @gray-light;
font-weight: 200;
font-weight: @font-weight-light;
padding: 16px;
margin: 0 16px 16px 16px;
position: relative;
Expand All @@ -107,7 +107,7 @@
.card-title {
margin-right: 60px;
margin-bottom: 8px;
font-weight: 800;
font-weight: @font-weight-bold;
}

.card-body {
Expand All @@ -119,7 +119,7 @@
word-break: break-all;

&:first-child {
font-weight: 400;
font-weight: @font-weight-normal;
}
}
}
Expand All @@ -133,8 +133,8 @@
.is-added-label {
background: @almost-black;
color: @lightest;
font-size: 12px;
line-height: 1em;
font-size: @font-size-s;
line-height: @line-height-tight;
text-transform: uppercase;
position: absolute;
padding: 4px 8px;
Expand Down Expand Up @@ -164,8 +164,7 @@

.dropdown.btn-group button,
input {
font-size: 14px;
line-height: 16px;
font-size: @font-size-m;
padding: 7px 12px;
height: 32px;
border: 1px solid @gray-light;
Expand Down
6 changes: 4 additions & 2 deletions superset/assets/src/dashboard/stylesheets/buttons.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
@import '../../../stylesheets/less/variables.less';

.icon-button {
color: @gray;
font-size: 1.2em;
font-size: @font-size-l;
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -37,5 +39,5 @@
.icon-button-label {
color: @gray-dark;
padding-left: 8px;
font-size: 0.9em;
font-size: @font-size-m;
}
5 changes: 3 additions & 2 deletions superset/assets/src/dashboard/stylesheets/components/chart.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
overflow-y: auto;

.missing-chart-body {
font-size: 12px;
font-size: @font-size-s;
}

.loading-container {
Expand All @@ -42,7 +42,8 @@

&.fade-in {
border-radius: 4px;
box-shadow: inset 0 0 0 2px fade(@shadow-highlight, 1), 0 0 0 3px fade(@shadow-highlight, @opacity-light);
box-shadow: inset 0 0 0 2px fade(@shadow-highlight, 1),
0 0 0 3px fade(@shadow-highlight, @opacity-light);
transition: box-shadow 1s ease-in-out;
}

Expand Down
4 changes: 2 additions & 2 deletions superset/assets/src/dashboard/stylesheets/components/divider.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@
}

.dashboard-component-divider:after {
content: "";
content: '';
height: 1px;
width: 100%;
background-color: @gray-light;
display: block;
}

.new-component-placeholder.divider-placeholder:after {
content: "";
content: '';
height: 2px;
width: 100%;
background-color: @gray-light;
Expand Down
19 changes: 6 additions & 13 deletions superset/assets/src/dashboard/stylesheets/components/header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
*/
.dashboard-component-header {
width: 100%;
line-height: 1.1;
font-weight: 700;
font-weight: @font-weight-bold;
padding: 16px 0;
color: @almost-black;
}
Expand All @@ -42,36 +41,30 @@
}

.dashboard-header .dashboard-component-header {
font-weight: 300;
font-weight: @font-weight-light;
width: auto;
}

.dashboard-header .undo-action,
.dashboard-header .redo-action {
line-height: 18px;
font-size: 12px;
}

.dashboard--editing .dragdroppable-row .dashboard-component-header {
cursor: move;
}

.header-style-option {
font-weight: 700;
font-weight: @font-weight-bold;
color: @almost-black;
}

/* note: sizes should be a multiple of the 8px grid unit so that rows in the grid align */
.header-small {
font-size: 16px;
font-size: @font-size-l;
}

.header-medium {
font-size: 24px;
font-size: @font-size-xl;
}

.header-large {
font-size: 32px;
font-size: @font-size-xxl;
}

.background--white .dashboard-component-header,
Expand Down
2 changes: 1 addition & 1 deletion superset/assets/src/dashboard/stylesheets/components/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,4 @@
@import './new-component.less';
@import './row.less';
@import './tabs.less';
@import './markdown.less';
@import './markdown.less';
9 changes: 5 additions & 4 deletions superset/assets/src/dashboard/stylesheets/components/markdown.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,16 @@
.dashboard-markdown {
overflow: hidden;

h4, h5 {
font-weight: 300;
h4,
h5 {
font-weight: @font-weight-light;
}
h5 {
color: @gray-heading;
}
h6 {
font-weight: 400;
font-size: 12px;
font-weight: @font-weight-normal;
font-size: @font-size-s;
}

.dashboard-component-chart-holder {
Expand Down
Loading