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
Hide 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';
.btn {
&:focus,
&:not(.disabled):hover,
&:not([disabled]):hover {
background-color: $brand-color-1;
border-color: $brand-color-2;
outline: none;
&.icon {
background-color: $brand-color-4;
&.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;
}
}
}
* {
vertical-align: middle;
&.btn-primary {
img.icon {
background-color: $btn-primary-color;
}
&:not(.disabled):hover,
&:not([disabled]):hover,
&:focus {
background-color: $btn-primary-bg-hover;
border-color: $btn-primary-border-hover;
outline: none;
}
}
img {
border: none;
height: 24px;
margin: -3px 4px -3px 0px;
min-width: 24px;
width: 24px;
&.btn-default {
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;
}
}
* {
vertical-align: middle;
}
&.btn-block {
......@@ -31,7 +74,7 @@
&.btn-flat-icon {
border: none;
background-color: transparent;
color: $gray-light;
color: $text-medium;
box-shadow: none !important;
padding: 0px;
text-align: left;
......@@ -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 {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: $gray-light;
color: $text-medium;
pointer-events: none;
&:hover {
color: $gray-light;
color: $text-medium;
}
}
}
amundsen_application/static/css/_icons.scss
View file @ 3f8ea86f
@import 'variables';
img.icon {
background-color: $gray-lighter;
background-color: $gray-light;
border: none;
height: 24px;
margin: -3px 4px -3px 0px;
......@@ -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 {
> img.icon,
......
amundsen_application/static/css/_list-group-item.scss
View file @ 3f8ea86f
......@@ -2,20 +2,19 @@
@import 'variables';
.list-group-item {
cursor: pointer;
border: 1px solid $gray-light;
border-left: none;
border-right: none;
cursor: pointer;
padding-left: 4px;
padding-right: 4px;
}
.list-group-item:hover {
border-top-color: $brand-color-2;
border-bottom-color: $brand-color-2;
background-color: $brand-color-1;
}
.list-group-item:hover + li {
border-top-color: $brand-color-2;
}
.list-group-item:hover + li:not(:last-child) {
border-bottom-color: $brand-color-2;
&:hover {
border-color: $gray;
background-color: $gray-lightest;
}
&:hover + li {
border-top-color: $gray;
}
}
amundsen_application/static/css/_popovers.scss
View file @ 3f8ea86f
......@@ -2,16 +2,16 @@
@import 'variables';
.popover {
background-color: $gray-darker;
border: 1px solid $gray-darker;
color: $gray-lighter;
background-color: $gray-base;
border: 1px solid $gray-base;
color: $text-light;
font-size: 12px;
padding: 5px;
}
.popover-title {
background-color: $gray-darker;
border-bottom: 1px solid $gray-light;
color: $gray-lighter;
color: $text-light;
font-size: 14px;
padding: 5px;
}
......@@ -19,22 +19,22 @@
padding: 2px 5px;
}
.popover.right .arrow:after {
border-right-color: $gray-darker;
border-right-color: $gray-base;
}
.popover.bottom .arrow:after {
border-bottom-color: $gray-darker;
border-bottom-color: $gray-base;
}
.popover.top .arrow:after {
border-top-color: $gray-darker;
border-top-color: $gray-base;
}
.popover.left .arrow:after {
border-left-color: $gray-darker;
border-left-color: $gray-base;
}
.tooltip-inner {
padding: 0px;
padding: 0;
border-radius: 3px;
background-color: $gray-darker;
background-color: $gray-base;
}
.tooltip-inner button {
......@@ -43,14 +43,14 @@
font-size: 14px;
border-radius: 3px;
border: none;
background-color: $gray-darker;
background-color: $gray-base;
color: $body-bg;
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
outline: none;
}
.tooltip-inner button:hover {
color: $gray-light;
color: $text-medium;
}
.error-tooltip {
......
amundsen_application/static/css/_variables-default.scss
View file @ 3f8ea86f
......@@ -3,8 +3,14 @@
These must be defined here:
$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
// Scaffolding
$body-bg: #fff !default;
// TODO - consider replacing $text-dark with $text-color
$text-dark: $gray-dark !default;
$text-color: $gray-dark !default;
$text-medium: $gray !default;
$text-light: $gray-lighter !default;
// Typography
......@@ -40,6 +50,7 @@ $font-family-base: $font-family-sans-serif !default;
$headings-font-family: $font-family-sans-serif-bold !default;
$font-size-small: 12px !default;
$font-size-base: 14px !default;
$font-size-large: 16px !default;
$line-height-small: 1.5 !default;
......@@ -47,13 +58,21 @@ $line-height-large: 1.5 !default;
// Buttons
$btn-default-border: $gray-lighter !default;
$btn-default-bg: #fff !default;
$btn-default-color: $text-color !default;
$btn-primary-border: $gray-lighter !default;
$btn-primary-bg: #fff !default;
$btn-primary-color: $text-color !default;
$btn-border-radius-base: 4px;
$btn-primary-bg: $brand-color-4 !default;
$btn-primary-bg-hover: $brand-color-5 !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
......
amundsen_application/static/css/styles.scss
View file @ 3f8ea86f
......@@ -34,3 +34,15 @@ td {
form {
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 @@
}
.post-date {
font-size: 14px;
color: $gray-light;
color: $text-medium;
}
.post-content {
padding-left: 16px;
......
amundsen_application/static/js/components/Footer/styles.scss
View file @ 3f8ea86f
......@@ -4,7 +4,7 @@
.footer {
border-top: 1px solid $gray-lighter;
background-color: white;
color: $gray-light;
color: $text-medium;
font-size: 14px;
text-align: center;
padding: 20px;
......
amundsen_application/static/js/components/NavBar/styles.scss
View file @ 3f8ea86f
......@@ -6,7 +6,7 @@
padding: 8px 32px 8px 32px;
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
color: $gray-light;
color: $text-medium;
font-size: 14px;
display: flex;
flex-direction: row;
......@@ -19,7 +19,7 @@
.nav-bar a {
text-decoration: none;
color: $gray-light;
color: $text-medium;
}
.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> {
return (
<div id="search-bar" className="col-xs-12 col-md-offset-1 col-md-10">
<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
id="searchInput"
id="search-input"
className="search-bar-input form-control"
value={ this.state.searchTerm }
onChange={ this.handleValueChange }
......@@ -104,6 +101,9 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
autoFocus={ true }
ref={ this.inputRef }
/>
<button className="btn btn-flat-icon search-bar-button" type="submit">
<img className="icon icon-search" />
</button>
</form>
<div className={ subTextClass }>
{ this.state.subText }
......
amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss
View file @ 3f8ea86f
......@@ -5,34 +5,52 @@
position: relative;
.search-bar-button {
position: absolute;
height: 24px;
left: 24px;
position: absolute;
top: 28px;
width: 24px;
top: 18px;
left: 16px;
}
.search-bar-input {
border-radius: 4px;
border-color: $gray-light;
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-size: 24px;
font-size: 26px;
font-weight: $font-weight-sans-serif-bold;
height: 80px;
width: 100%;
height: 60px;
padding: 16px 16px 16px 50px;
padding: 16px 24px 16px 64px;
&:focus {
border-color: $brand-color-2;
box-shadow: 0 3px 12px 0 rgba($brand-color-2, 0.5);
border-color: $brand-color-4;
}
}
.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 {
color: $gray-light;
margin-top: 8px;
color: $text-medium;
margin-top: 16px;
}
.error {
......
amundsen_application/static/js/components/TableDetail/DataPreviewButton/index.tsx
View file @ 3f8ea86f
......@@ -181,7 +181,7 @@ class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPrev
const previewButton = (
<button
className="btn btn-default btn-shadow btn-block"
className="btn btn-default btn-block"
disabled={disabled}
onClick={this.handleShow}>
<img className={"icon icon-color " + iconClass} />
......
amundsen_application/static/js/components/TableDetail/DetailList/DetailListItem/styles.scss
View file @ 3f8ea86f
......@@ -11,7 +11,7 @@
background-color: transparent !important;
.description {
color: $gray-light;
color: $text-medium;
max-width: 100%;
font-size: 14px;
min-width: 0;
......@@ -80,7 +80,7 @@
width: 20%;
.title {
color: $gray-light;
color: $text-medium;
font-size: $font-size-small;
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
......@@ -91,7 +91,7 @@
}
.stat-collection-info {
color: $gray-light;
color: $text-medium;
font-style: italic;
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
<DataPreviewButton modalTitle={`${this.schema}.${this.tableName}`} />
{
AppConfig.tableProfile.isExploreEnabled &&
<a className="btn btn-default btn-shadow btn-block"
<a className="btn btn-default btn-block"
href={this.getExploreSqlUrl()}
role="button"
target="_blank"
......
amundsen_application/static/js/components/Tags/TagInfo/styles.scss
View file @ 3f8ea86f
......@@ -4,26 +4,24 @@
background-color: $gray-lightest;
border: 0;
border-radius: 4px;
color: $gray;
font-size: $font-size-large;
color: $text-dark;
font-size: $font-size-base;
margin: 4px;
overflow: hidden;
padding: 4px 8px;
padding: 8px;
text-overflow: ellipsis;
white-space: nowrap;
&.compact {
font-size: $font-size-base;
line-height: 24px;
line-height: 14px;
height: 30px;
margin: 2px;
padding: 3px 6px;
}
&:hover,
&:focus {
color: $gray;
background-color: $brand-color-2;
color: $text-dark;
background-color: $gray-lighter;
}
.tag-name {
......@@ -31,6 +29,6 @@
}
.tag-count {
color: $gray-light;
color: $text-medium;
}
}
amundsen_application/static/js/components/Tags/TagInput/styles.scss
View file @ 3f8ea86f
......@@ -7,8 +7,7 @@
*/
.tag-input .basic-multi-select {
.amundsen__control {
min-height: 34px;
min-height: 32px;
&,
.amundsen__control--is-focused,
......@@ -18,12 +17,14 @@
}
.amundsen__multi-value {
background-color: $gray-lightest !important;
background-color: $gray-lighter !important;
border-radius: 4px;
.amundsen__multi-value__label {
border-radius: 4px 0 0 4px;
color: $gray;
color: $text-dark;
line-height: 14px;
padding: 8px;
}
.amundsen__multi-value__remove {
......@@ -32,8 +33,8 @@
&:hover,
&:focus {
background-color: $brand-color-2 !important;
color: $gray;
background-color: $gray-light !important;
color: $text-dark;
}
}
}
......
amundsen_application/static/js/components/common/ConfirmDeleteButton/styles.scss
View file @ 3f8ea86f
@import 'variables';
.delete-button {
color: $gray-light;
color: $text-medium;
height: 24px;
width: 24px;
margin: auto;
......@@ -35,5 +35,5 @@
}
.popover-content button:hover,
.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 @@
.editable-container {
display: flex;
font-size: 16px;
color: $gray-light;
color: $text-medium;
&:hover {
.edit-link {
......@@ -14,13 +14,8 @@
.edit-link {
opacity: 0;
margin-left: 4px;
color: $brand-color-3;
text-decoration: none;
&:hover {
color: $brand-color-4;
}
&.no-value {
opacity: 1;
margin-left: 0;
......
amundsen_application/static/js/components/common/EntityCard/EntityCardSection/styles.scss
View file @ 3f8ea86f
......@@ -4,7 +4,7 @@
margin-bottom: 20px;
}
.entity-card-section .title {
color: $gray-light;
color: $text-medium;
font-size: 12px;
font-family: $font-family-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 @@
text-align: center;
position: absolute;
font-size: 20px;
color: $gray-light;
color: $text-medium;
/* for centering when parent has automatic height */
top: 50%;
left: 50%;
......
amundsen_application/static/js/components/common/Feedback/styles.scss
View file @ 3f8ea86f
......@@ -35,7 +35,7 @@
}
.title {
color: $gray-light;
color: $text-medium;
font-size: 12px;
font-family: $font-family-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 @@
.title {
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
color: $text-color;
color: $text-dark;
font-size: 16px;
}
.subtitle {
color: $gray-light;
color: $text-medium;
font-size: 14px;
}
......@@ -31,7 +31,7 @@
font-family: $font-family-sans-serif-bold;
font-weight: $font-weight-sans-serif-bold;
font-size: 12px;
color: $gray-light;
color: $text-medium;
margin-top: auto;
margin-bottom: auto;
white-space: nowrap;
......@@ -39,7 +39,7 @@
a {
text-decoration: none;
color: $text-color;
color: $text-dark;
display: flex;
flex-direction: row;
}
......
amundsen_application/static/js/components/common/Tabs/styles.scss
View file @ 3f8ea86f
......@@ -19,12 +19,12 @@
> a {
background: none;
border: none;
color: $gray-light;
color: $text-medium;
font-size: $font-size-large;
line-height: $line-height-large;
&:hover {
color: $text-color;
color: $text-dark;
}
// 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