Files
redash/client/app/components/empty-state/empty-state.less
Rafael Wendel 0560e2410e Improve css and add focus styles (#5420)
* Add styles for focused ant menus

* Add disabled styles to clickable button

* Improved dashboard header syntax and added focus

* Improved CSS syntax

* Add interactive styles

* Improved anchor dependent styles

* Improved styles of widget (gray more/delete btns)

* Add interactive style for favorite star

* Improved style of delete btn

* Make table content fill all space

* Added focus and active styles

* Scoped query snippets list

* Fixed behavior for all major browsers

* Replaced button styles with plain button

* Scoped items list styles

* Added focus styles to ant table

* Add plain button (#5419)

* Minor syntax improvements

* Refactor of Link component (#5418)
2021-03-17 14:26:08 -03:00

99 lines
1.5 KiB
Plaintext

@import (reference, less) "~@/assets/less/ant";
// Empty states
.empty-state {
width: 100%;
margin: 0 auto 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 14px;
line-height: 21px;
.empty-state__summary,
.empty-state__steps {
width: 48%;
padding: 35px;
padding-bottom: 25px;
}
.empty-state__steps {
padding-left: 0;
}
.empty-state__summary {
align-self: flex-start;
text-align: center;
background: rgba(102, 136, 153, 0.025);
p {
margin-bottom: 0;
}
}
ol {
margin-bottom: 15px;
padding: 17px;
}
li.done {
text-decoration: line-through;
}
h2 {
margin: 0 0 15px;
}
h4 {
margin-top: 0;
margin-bottom: 15px;
}
a:hover {
cursor: pointer;
}
@media (max-width: 767px) {
flex-direction: column;
.empty-state__summary {
margin-bottom: 25px;
padding-bottom: 15px;
}
.empty-state__summary,
.empty-state__steps {
width: 100%;
}
.empty-state__steps {
padding-left: 35px;
padding-top: 15px;
}
}
}
// close button
.empty-state-wrapper {
position: relative;
.close-button {
position: absolute;
top: 15px;
right: 25px;
font-size: 15px;
color: @text-color-secondary;
cursor: pointer;
transition: color @animation-duration-slow;
&:hover,
&:focus {
color: @text-color;
}
&:active {
filter: contrast(200%);
}
}
}