UNPKG

2.42 kBtext/lessView Raw
1@import (reference) './imports/global';
2
3// Help block
4@aui-help-header-color: var(--aui-lesser-header-text);
5@aui-help-border-color: var(--aui-help-color);
6@aui-help-illustration-width: 128px;
7@aui-help-content-padding-left: 20px;
8
9// Inline Dialog Theme
10@aui-inline-dialog-help-border-color: @aui-help-border-color;
11@aui-inline-dialog-help-headline-color: var(--aui-lesser-header-text);
12@aui-inline-dialog-help-border-width: 2px;
13@aui-inline-dialog2-help-arrow-margin-offset: 1px;
14
15.aui-help {
16 &.aui-help-text,
17 &.aui-help-empty-state {
18 margin: 10px 0 0 0;
19 overflow: hidden;
20 padding: 0;
21 width: 720px;
22 }
23
24 .aui-help-content {
25 border-left: 4px solid @aui-help-border-color;
26 font-size: @aui-font-size-large;
27 line-height: 1.5;
28 padding-left: @aui-help-content-padding-left;
29
30 > h1,
31 > h2,
32 > h3,
33 > h4,
34 > h5,
35 > h6 {
36 #aui.typography.h100(@aui-help-header-color);
37 }
38 }
39
40 .aui-help-illustration + .aui-help-content {
41 border-left: none;
42 margin-left: @aui-help-illustration-width;
43 }
44
45 .aui-help-illustration {
46 float: left;
47 }
48
49 .aui-help-content > p {
50 margin: 5px 0 0 0;
51 }
52
53 // Inline Dialog2 help
54 aui-inline-dialog&,
55 & {
56 --aui-inline-dialog-border-color: @aui-inline-dialog-help-border-color;
57 --aui-inline-dialog-border-width: 2px;
58
59 .aui-inline-dialog-contents {
60 h2:first-child {
61 #aui.typography.h100(@aui-inline-dialog-help-headline-color);
62 }
63 }
64 }
65
66 // Inline dialog help
67 .aui-inline-dialog-arrow.aui-css-arrow {
68 &::after,
69 &::before {
70 border-color: @aui-inline-dialog-help-border-color transparent;
71 }
72 &::after {
73 border-bottom-color: @aui-inline-dialog-bg-color;
74 top: @aui-inline-dialog-help-border-width;
75 }
76
77 &.aui-bottom-arrow::after {
78 border-top-color: @aui-inline-dialog-bg-color;
79 top: -@aui-inline-dialog-help-border-width;
80 }
81
82 &.aui-left-arrow::before {
83 border-color: transparent @aui-inline-dialog-help-border-color;
84 }
85
86 &.aui-left-arrow::after {
87 border-right-color: @aui-inline-dialog-bg-color;
88 right: -@aui-inline-dialog-help-border-width;
89 }
90 }
91}