Skip to content

A
AmendsenProject
Unverified Commit 3f8ea86f authored by Daniel's avatar Daniel Committed by GitHub
Browse files
Options

Design Overhaul pt2 (#57) 

* Design Overhaul pt2
- Standardized button colors, sizes, icons
- Text colors split into $text-dark, $text-medium, and $text-light
- Fixed some styles on search bar
- Updated TagInfo and TagInput
- Made popover colors darker
parent 7a8189ee
Show whitespace changes
Inline Side-by-side
Showing with 195 additions and 149 deletions
amundsen_application/static/css/_buttons-default.scss
View file @ 3f8ea86f
@import 'variables'; @import 'variables';
.btn { .btn {
&:focus,
&.btn-primary,
&.btn-default {
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
height: 32px;
padding: 6px 16px;
img.icon {
border: none;
height: 18px;
-webkit-mask-size: 18px;
mask-size: 18px;
margin: 0 4px;
vertical-align: top;
min-width: 18px;
width: 18px;
}
&.btn-lg {
font-weight: $font-size-large;
height: 48px;
padding: 12px 24px;
img.icon {
height: 24px;
-webkit-mask-size: 24px;
mask-size: 24px;
margin: 0 4px;
min-width: 24px;
width: 24px;
}
}
}
&.btn-primary {
img.icon {
background-color: $btn-primary-color;
}
&:not(.disabled):hover, &:not(.disabled):hover,
&:not([disabled]):hover { &:not([disabled]):hover,
background-color: $brand-color-1; &:focus {
border-color: $brand-color-2; background-color: $btn-primary-bg-hover;
border-color: $btn-primary-border-hover;
outline: none; outline: none;
}
}
&.icon { &.btn-default {
background-color: $brand-color-4; img.icon {
background-color: $btn-default-color;
}
&:not(.disabled):hover,
&:not([disabled]):hover,
&:focus {
background-color: $btn-default-bg-hover;
border-color: $btn-default-border-hover;
outline: none;
} }
} }
...@@ -16,14 +67,6 @@ ...@@ -16,14 +67,6 @@
vertical-align: middle; vertical-align: middle;
} }
img {
border: none;
height: 24px;
margin: -3px 4px -3px 0px;
min-width: 24px;
width: 24px;
}
&.btn-block { &.btn-block {
margin-bottom: 4px; margin-bottom: 4px;
} }
...@@ -31,7 +74,7 @@ ...@@ -31,7 +74,7 @@
&.btn-flat-icon { &.btn-flat-icon {
border: none; border: none;
background-color: transparent; background-color: transparent;
color: $gray-light; color: $text-medium;
box-shadow: none !important; box-shadow: none !important;
padding: 0px; padding: 0px;
text-align: left; text-align: left;
...@@ -48,44 +91,17 @@ ...@@ -48,44 +91,17 @@
} }
} }
&.btn-default {
border-radius: 4px;
border: 1px solid rgba(0, 7, 39, 0.13);
height: 36px;
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
}
&.btn-primary {
color: white;
background-color: $brand-color-4;
border-color: $brand-color-4;
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
&:focus,
&:not(.disabled):hover,
&:not([disabled]):hover {
color: white;
background-color: $brand-color-5;
border-color: $brand-color-5;
}
}
&.btn-shadow {
box-shadow: 0 1px 3px 0 rgba(17, 17, 31, 0.12);
}
&.disabled, &.disabled,
&:disabled { &:disabled {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
color: $gray-light; color: $text-medium;
pointer-events: none; pointer-events: none;
&:hover { &:hover {
color: $gray-light; color: $text-medium;
} }
} }
} }
amundsen_application/static/css/_icons.scss
View file @ 3f8ea86f
@import 'variables'; @import 'variables';
img.icon { img.icon {
background-color: $gray-lighter; background-color: $gray-light;
border: none; border: none;
height: 24px; height: 24px;
margin: -3px 4px -3px 0px; margin: -3px 4px -3px 0px;
...@@ -67,18 +67,6 @@ img.icon { ...@@ -67,18 +67,6 @@ img.icon {
} }
} }
.btn img.icon {
// Some icons need to be scaled down when inside buttons
&.icon-database {
-webkit-mask-position: 3px 3px;
mask-position: 3px 3px;
-webkit-mask-size: 18px 18px;
mask-size: 18px 18px;
}
}
.disabled, .disabled,
:disabled { :disabled {
> img.icon, > img.icon,
......
amundsen_application/static/css/_list-group-item.scss
View file @ 3f8ea86f
...@@ -2,20 +2,19 @@ ...@@ -2,20 +2,19 @@
@import 'variables'; @import 'variables';
.list-group-item { .list-group-item {
cursor: pointer; border: 1px solid $gray-light;
border-left: none; border-left: none;
border-right: none; border-right: none;
cursor: pointer;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
}
.list-group-item:hover { &:hover {
border-top-color: $brand-color-2; border-color: $gray;
border-bottom-color: $brand-color-2; background-color: $gray-lightest;
background-color: $brand-color-1; }
}
.list-group-item:hover + li { &:hover + li {
border-top-color: $brand-color-2; border-top-color: $gray;
} }
.list-group-item:hover + li:not(:last-child) {
border-bottom-color: $brand-color-2;
} }
amundsen_application/static/css/_popovers.scss
View file @ 3f8ea86f
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
@import 'variables'; @import 'variables';
.popover { .popover {
background-color: $gray-darker; background-color: $gray-base;
border: 1px solid $gray-darker; border: 1px solid $gray-base;
color: $gray-lighter; color: $text-light;
font-size: 12px; font-size: 12px;
padding: 5px; padding: 5px;
} }
.popover-title { .popover-title {
background-color: $gray-darker; background-color: $gray-darker;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
color: $gray-lighter; color: $text-light;
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
} }
...@@ -19,22 +19,22 @@ ...@@ -19,22 +19,22 @@
padding: 2px 5px; padding: 2px 5px;
} }
.popover.right .arrow:after { .popover.right .arrow:after {
border-right-color: $gray-darker; border-right-color: $gray-base;
} }
.popover.bottom .arrow:after { .popover.bottom .arrow:after {
border-bottom-color: $gray-darker; border-bottom-color: $gray-base;
} }
.popover.top .arrow:after { .popover.top .arrow:after {
border-top-color: $gray-darker; border-top-color: $gray-base;
} }
.popover.left .arrow:after { .popover.left .arrow:after {
border-left-color: $gray-darker; border-left-color: $gray-base;
} }
.tooltip-inner { .tooltip-inner {
padding: 0px; padding: 0;
border-radius: 3px; border-radius: 3px;
background-color: $gray-darker; background-color: $gray-base;
} }
.tooltip-inner button { .tooltip-inner button {
...@@ -43,14 +43,14 @@ ...@@ -43,14 +43,14 @@
font-size: 14px; font-size: 14px;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
background-color: $gray-darker; background-color: $gray-base;
color: $body-bg; color: $body-bg;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
outline: none; outline: none;
} }
.tooltip-inner button:hover { .tooltip-inner button:hover {
color: $gray-light; color: $text-medium;
} }
.error-tooltip { .error-tooltip {
......
amundsen_application/static/css/_variables-default.scss
View file @ 3f8ea86f
...@@ -3,8 +3,14 @@ ...@@ -3,8 +3,14 @@
These must be defined here: These must be defined here:
$brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5 $brand-color-1, $brand-color-2, $brand-color-3, $brand-color-4, $brand-color-5
$font-family-sans-serif-bold,
$font-weight-sans-serif-bold $font-family-sans-serif-bold, $font-weight-sans-serif-bold
$text-dark, $text-medium, $text-light
$btn-primary-bg-hover, $btn-default-border-hover,
$btn-primary-border-hover, $btn-default-bg-hover,
*/ */
...@@ -26,7 +32,11 @@ $gray-lightest: lighten($gray-base, 95%) !default; // #f2f2f2 ...@@ -26,7 +32,11 @@ $gray-lightest: lighten($gray-base, 95%) !default; // #f2f2f2
// Scaffolding // Scaffolding
$body-bg: #fff !default; $body-bg: #fff !default;
// TODO - consider replacing $text-dark with $text-color
$text-dark: $gray-dark !default;
$text-color: $gray-dark !default; $text-color: $gray-dark !default;
$text-medium: $gray !default;
$text-light: $gray-lighter !default;
// Typography // Typography
...@@ -40,6 +50,7 @@ $font-family-base: $font-family-sans-serif !default; ...@@ -40,6 +50,7 @@ $font-family-base: $font-family-sans-serif !default;
$headings-font-family: $font-family-sans-serif-bold !default; $headings-font-family: $font-family-sans-serif-bold !default;
$font-size-small: 12px !default; $font-size-small: 12px !default;
$font-size-base: 14px !default; $font-size-base: 14px !default;
$font-size-large: 16px !default; $font-size-large: 16px !default;
$line-height-small: 1.5 !default; $line-height-small: 1.5 !default;
...@@ -47,13 +58,21 @@ $line-height-large: 1.5 !default; ...@@ -47,13 +58,21 @@ $line-height-large: 1.5 !default;
// Buttons // Buttons
$btn-default-border: $gray-lighter !default; $btn-border-radius-base: 4px;
$btn-default-bg: #fff !default;
$btn-default-color: $text-color !default;
$btn-primary-border: $gray-lighter !default; $btn-primary-bg: $brand-color-4 !default;
$btn-primary-bg: #fff !default; $btn-primary-bg-hover: $brand-color-5 !default;
$btn-primary-color: $text-color !default; $btn-primary-border: transparent !default;
$btn-primary-border-hover: transparent !default;
$btn-primary-color: white !default;
$btn-primary-color-hover: white !default;
$btn-default-bg: white !default;
$btn-default-bg-hover: $gray-lightest;
$btn-default-border: $gray-lighter !default;
$btn-default-border-hover: $gray-light !default;
$btn-default-color: $gray-dark !default;
$btn-default-color-hover: $gray-dark !default;
// List Group // List Group
......
amundsen_application/static/css/styles.scss
View file @ 3f8ea86f
...@@ -34,3 +34,15 @@ td { ...@@ -34,3 +34,15 @@ td {
form { form {
margin-bottom: 0; margin-bottom: 0;
} }
input {
&::-webkit-input-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder,
&:-moz-placeholder,
&::placeholder {
color: $gray-dark !important;
}
}
amundsen_application/static/js/components/AnnouncementPage/styles.scss
View file @ 3f8ea86f
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
.post-date { .post-date {
font-size: 14px; font-size: 14px;
color: $gray-light; color: $text-medium;
} }
.post-content { .post-content {
padding-left: 16px; padding-left: 16px;
......
amundsen_application/static/js/components/Footer/styles.scss
View file @ 3f8ea86f
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.footer { .footer {
border-top: 1px solid $gray-lighter; border-top: 1px solid $gray-lighter;
background-color: white; background-color: white;
color: $gray-light; color: $text-medium;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
......
amundsen_application/static/js/components/NavBar/styles.scss
View file @ 3f8ea86f
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
padding: 8px 32px 8px 32px; padding: 8px 32px 8px 32px;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
color: $gray-light; color: $text-medium;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.nav-bar a { .nav-bar a {
text-decoration: none; text-decoration: none;
color: $gray-light; color: $text-medium;
} }
.nav-bar a:hover { .nav-bar a:hover {
......
amundsen_application/static/js/components/SearchPage/SearchBar/index.tsx
View file @ 3f8ea86f
...@@ -91,11 +91,8 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> { ...@@ -91,11 +91,8 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
return ( return (
<div id="search-bar" className="col-xs-12 col-md-offset-1 col-md-10"> <div id="search-bar" className="col-xs-12 col-md-offset-1 col-md-10">
<form className="search-bar-form" onSubmit={ this.handleValueSubmit }> <form className="search-bar-form" onSubmit={ this.handleValueSubmit }>
<button className="btn btn-flat-icon search-bar-button" type="submit">
<img className="icon icon-search" />
</button>
<input <input
id="searchInput" id="search-input"
className="search-bar-input form-control" className="search-bar-input form-control"
value={ this.state.searchTerm } value={ this.state.searchTerm }
onChange={ this.handleValueChange } onChange={ this.handleValueChange }
...@@ -104,6 +101,9 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> { ...@@ -104,6 +101,9 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
autoFocus={ true } autoFocus={ true }
ref={ this.inputRef } ref={ this.inputRef }
/> />
<button className="btn btn-flat-icon search-bar-button" type="submit">
<img className="icon icon-search" />
</button>
</form> </form>
<div className={ subTextClass }> <div className={ subTextClass }>
{ this.state.subText } { this.state.subText }
......
amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss
View file @ 3f8ea86f
...@@ -5,34 +5,52 @@ ...@@ -5,34 +5,52 @@
position: relative; position: relative;
.search-bar-button { .search-bar-button {
position: absolute;
height: 24px; height: 24px;
left: 24px;
position: absolute;
top: 28px;
width: 24px; width: 24px;
top: 18px;
left: 16px;
} }
.search-bar-input { .search-bar-input {
border-radius: 4px; border-radius: 4px;
border-color: $gray-light;
box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04); box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04);
color: $text-color; color: $text-dark;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-size: 24px; font-size: 26px;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
height: 80px;
width: 100%; width: 100%;
height: 60px; padding: 16px 24px 16px 64px;
padding: 16px 16px 16px 50px;
&:focus { &:focus {
border-color: $brand-color-2; border-color: $brand-color-4;
box-shadow: 0 3px 12px 0 rgba($brand-color-2, 0.5); }
}
.search-bar-input:focus + .search-bar-button {
img.icon {
background-color: $brand-color-4;
}
}
@media (max-width: $screen-md-max) {
.search-bar-button {
left: 16px;
top: 18px;
}
.search-bar-input {
font-size: 24px;
padding: 16px 16px 16px 48px;
height: 60px;
} }
} }
} }
.subtext { .subtext {
color: $gray-light; color: $text-medium;
margin-top: 8px; margin-top: 16px;
} }
.error { .error {
......
amundsen_application/static/js/components/TableDetail/DataPreviewButton/index.tsx
View file @ 3f8ea86f
...@@ -181,7 +181,7 @@ class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPrev ...@@ -181,7 +181,7 @@ class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPrev
const previewButton = ( const previewButton = (
<button <button
className="btn btn-default btn-shadow btn-block" className="btn btn-default btn-block"
disabled={disabled} disabled={disabled}
onClick={this.handleShow}> onClick={this.handleShow}>
<img className={"icon icon-color " + iconClass} /> <img className={"icon icon-color " + iconClass} />
......
amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
View file @ 3f8ea86f
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
background-color: transparent !important; background-color: transparent !important;
.description { .description {
color: $gray-light; color: $text-medium;
max-width: 100%; max-width: 100%;
font-size: 14px; font-size: 14px;
min-width: 0; min-width: 0;
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
width: 20%; width: 20%;
.title { .title {
color: $gray-light; color: $text-medium;
font-size: $font-size-small; font-size: $font-size-small;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
} }
.stat-collection-info { .stat-collection-info {
color: $gray-light; color: $text-medium;
font-style: italic; font-style: italic;
margin-top: 4px; margin-top: 4px;
} }
......
amundsen_application/static/js/components/TableDetail/index.tsx
View file @ 3f8ea86f
...@@ -259,7 +259,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps ...@@ -259,7 +259,7 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
<DataPreviewButton modalTitle={`${this.schema}.${this.tableName}`} /> <DataPreviewButton modalTitle={`${this.schema}.${this.tableName}`} />
{ {
AppConfig.tableProfile.isExploreEnabled && AppConfig.tableProfile.isExploreEnabled &&
<a className="btn btn-default btn-shadow btn-block" <a className="btn btn-default btn-block"
href={this.getExploreSqlUrl()} href={this.getExploreSqlUrl()}
role="button" role="button"
target="_blank" target="_blank"
......
amundsen_application/static/js/components/Tags/TagInfo/styles.scss
View file @ 3f8ea86f
...@@ -4,26 +4,24 @@ ...@@ -4,26 +4,24 @@
background-color: $gray-lightest; background-color: $gray-lightest;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
color: $gray; color: $text-dark;
font-size: $font-size-large; font-size: $font-size-base;
margin: 4px; margin: 4px;
overflow: hidden; overflow: hidden;
padding: 4px 8px; padding: 8px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&.compact { &.compact {
font-size: $font-size-base; line-height: 14px;
line-height: 24px;
height: 30px; height: 30px;
margin: 2px; margin: 2px;
padding: 3px 6px;
} }
&:hover, &:hover,
&:focus { &:focus {
color: $gray; color: $text-dark;
background-color: $brand-color-2; background-color: $gray-lighter;
} }
.tag-name { .tag-name {
...@@ -31,6 +29,6 @@ ...@@ -31,6 +29,6 @@
} }
.tag-count { .tag-count {
color: $gray-light; color: $text-medium;
} }
} }
amundsen_application/static/js/components/Tags/TagInput/styles.scss
View file @ 3f8ea86f
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
*/ */
.tag-input .basic-multi-select { .tag-input .basic-multi-select {
.amundsen__control { .amundsen__control {
min-height: 32px;
min-height: 34px;
&, &,
.amundsen__control--is-focused, .amundsen__control--is-focused,
...@@ -18,12 +17,14 @@ ...@@ -18,12 +17,14 @@
} }
.amundsen__multi-value { .amundsen__multi-value {
background-color: $gray-lightest !important; background-color: $gray-lighter !important;
border-radius: 4px; border-radius: 4px;
.amundsen__multi-value__label { .amundsen__multi-value__label {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
color: $gray; color: $text-dark;
line-height: 14px;
padding: 8px;
} }
.amundsen__multi-value__remove { .amundsen__multi-value__remove {
...@@ -32,8 +33,8 @@ ...@@ -32,8 +33,8 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: $brand-color-2 !important; background-color: $gray-light !important;
color: $gray; color: $text-dark;
} }
} }
} }
......
amundsen_application/static/js/components/common/ConfirmDeleteButton/styles.scss
View file @ 3f8ea86f
@import 'variables'; @import 'variables';
.delete-button { .delete-button {
color: $gray-light; color: $text-medium;
height: 24px; height: 24px;
width: 24px; width: 24px;
margin: auto; margin: auto;
...@@ -35,5 +35,5 @@ ...@@ -35,5 +35,5 @@
} }
.popover-content button:hover, .popover-content button:hover,
.popover-content button:focus { .popover-content button:focus {
color: $gray-light; color: $text-medium;
} }
amundsen_application/static/js/components/common/EditableText/styles.scss
View file @ 3f8ea86f
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.editable-container { .editable-container {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
color: $gray-light; color: $text-medium;
&:hover { &:hover {
.edit-link { .edit-link {
...@@ -14,13 +14,8 @@ ...@@ -14,13 +14,8 @@
.edit-link { .edit-link {
opacity: 0; opacity: 0;
margin-left: 4px; margin-left: 4px;
color: $brand-color-3;
text-decoration: none; text-decoration: none;
&:hover {
color: $brand-color-4;
}
&.no-value { &.no-value {
opacity: 1; opacity: 1;
margin-left: 0; margin-left: 0;
......
amundsen_application/static/js/components/common/EntityCard/EntityCardSection/styles.scss
View file @ 3f8ea86f
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.entity-card-section .title { .entity-card-section .title {
color: $gray-light; color: $text-medium;
font-size: 12px; font-size: 12px;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
......
amundsen_application/static/js/components/common/Feedback/FeedbackForm/styles.scss
View file @ 3f8ea86f
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
text-align: center; text-align: center;
position: absolute; position: absolute;
font-size: 20px; font-size: 20px;
color: $gray-light; color: $text-medium;
/* for centering when parent has automatic height */ /* for centering when parent has automatic height */
top: 50%; top: 50%;
left: 50%; left: 50%;
......
amundsen_application/static/js/components/common/Feedback/styles.scss
View file @ 3f8ea86f
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
} }
.title { .title {
color: $gray-light; color: $text-medium;
font-size: 12px; font-size: 12px;
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
......
amundsen_application/static/js/components/common/ResourceListItem/TableListItem/styles.scss
View file @ 3f8ea86f
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
.title { .title {
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
color: $text-color; color: $text-dark;
font-size: 16px; font-size: 16px;
} }
.subtitle { .subtitle {
color: $gray-light; color: $text-medium;
font-size: 14px; font-size: 14px;
} }
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
font-family: $font-family-sans-serif-bold; font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold; font-weight: $font-weight-sans-serif-bold;
font-size: 12px; font-size: 12px;
color: $gray-light; color: $text-medium;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
white-space: nowrap; white-space: nowrap;
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
a { a {
text-decoration: none; text-decoration: none;
color: $text-color; color: $text-dark;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
......
amundsen_application/static/js/components/common/Tabs/styles.scss
View file @ 3f8ea86f
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
> a { > a {
background: none; background: none;
border: none; border: none;
color: $gray-light; color: $text-medium;
font-size: $font-size-large; font-size: $font-size-large;
line-height: $line-height-large; line-height: $line-height-large;
&:hover { &:hover {
color: $text-color; color: $text-dark;
} }
// Active tab indicator // Active tab indicator
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment