UNPKG

@atlassian/aui/src/less/aui-experimental-progress-tracker.less

Version:

2.59 kBtext/lessView Raw

1@import (reference) './imports/global';
2
3/* Layout */
aui-progress-tracker {
  display: table;
  font-size: 12px;
  margin: 10px 0 0;
  padding: 0;
  table-layout: fixed;
  word-wrap: break-word; /* doesn't work in IE */
11}
aui-progress-tracker:first-child {
  margin-top: 0;
14}
aui-progress-tracker-step {
  box-sizing: border-box;
  display: table-cell;
  padding: 0 10px;
  max-width: 140px;
  min-width: 80px;
  text-align: center;
22}
23
24/* Progress Bar */
25span, a {
  .aui-progress-tracker-step > & {
      #aui.typography.h400();
      font-weight: @aui-font-weight-normal;
      color: @aui-progress-tracker-visited-step-text-color;
      display: block;
      outline: none;
      padding-top: 25px;
      position: relative;
34
      &:before {
          background: @aui-progress-tracker-current-step-color;
          border-radius: 100%;
          content: "";
          height: 8px;
          left: 50%;
          margin-left: -5px;
          position: absolute;
          top: 4px;
          width: 8px;
      }
  }
  .aui-progress-tracker-step + .aui-progress-tracker-step > &:after {
      background: @aui-progress-tracker-current-step-color;
      box-shadow: -5px 0 0 -2px @aui-progress-tracker-current-step-color, 5px 0 0 -2px @aui-progress-tracker-current-step-color;
      content: "";
      height: 8px;
      left: -50%;
      margin-left: -20px; /* touches right edge of previous dot */
      margin-right: 1px; /* touches left edge of this dot */
      position: absolute;
      right: 50%;
      top: 4px;
  }
  .aui-progress-tracker-step-current>& {
      color: @aui-progress-tracker-current-step-text-color;
      font-weight: @aui-font-weight-semibold;
  }
  .aui-progress-tracker-step-current ~ .aui-progress-tracker-step>& {
      color: @aui-progress-tracker-step-text-color;
      font-weight: @aui-font-weight-normal;
66
      &:hover {
          color: @aui-progress-tracker-step-text-color;
      }
70
      &:before {
          background-color: @aui-progress-tracker-step-color;
      }
74
      &:after {
          background-color: transparent;
          border: none;
          box-shadow: none;
      }
  }
81}
aui-progress-tracker-step > a {
  &:hover {
      color: @aui-progress-tracker-visited-step-hover-text-color;
  }
86
  &:active {
      color: @aui-progress-tracker-visited-step-active-text-color;
  }
90}
91
92/* Interaction wih page layout */
aui-page-header-actions .aui-progress-tracker {
  float: right;
95}

1	`@import (reference) './imports/global';`
2
3	`/* Layout */`
4	`.aui-progress-tracker {`
5	`display: table;`
6	`font-size: 12px;`
7	`margin: 10px 0 0;`
8	`padding: 0;`
9	`table-layout: fixed;`
10	`word-wrap: break-word; /* doesn't work in IE */`
11	`}`
12	`.aui-progress-tracker:first-child {`
13	`margin-top: 0;`
14	`}`
15	`.aui-progress-tracker-step {`
16	`box-sizing: border-box;`
17	`display: table-cell;`
18	`padding: 0 10px;`
19	`max-width: 140px;`
20	`min-width: 80px;`
21	`text-align: center;`
22	`}`
23
24	`/* Progress Bar */`
25	`span, a {`
26	`.aui-progress-tracker-step > & {`
27	`#aui.typography.h400();`
28	`font-weight: @aui-font-weight-normal;`
29	`color: @aui-progress-tracker-visited-step-text-color;`
30	`display: block;`
31	`outline: none;`
32	`padding-top: 25px;`
33	`position: relative;`
34
35	`&:before {`
36	`background: @aui-progress-tracker-current-step-color;`
37	`border-radius: 100%;`
38	`content: "";`
39	`height: 8px;`
40	`left: 50%;`
41	`margin-left: -5px;`
42	`position: absolute;`
43	`top: 4px;`
44	`width: 8px;`
45	`}`
46	`}`
47	`.aui-progress-tracker-step + .aui-progress-tracker-step > &:after {`
48	`background: @aui-progress-tracker-current-step-color;`
49	`box-shadow: -5px 0 0 -2px @aui-progress-tracker-current-step-color, 5px 0 0 -2px @aui-progress-tracker-current-step-color;`
50	`content: "";`
51	`height: 8px;`
52	`left: -50%;`
53	`margin-left: -20px; /* touches right edge of previous dot */`
54	`margin-right: 1px; /* touches left edge of this dot */`
55	`position: absolute;`
56	`right: 50%;`
57	`top: 4px;`
58	`}`
59	`.aui-progress-tracker-step-current>& {`
60	`color: @aui-progress-tracker-current-step-text-color;`
61	`font-weight: @aui-font-weight-semibold;`
62	`}`
63	`.aui-progress-tracker-step-current ~ .aui-progress-tracker-step>& {`
64	`color: @aui-progress-tracker-step-text-color;`
65	`font-weight: @aui-font-weight-normal;`
66
67	`&:hover {`
68	`color: @aui-progress-tracker-step-text-color;`
69	`}`
70
71	`&:before {`
72	`background-color: @aui-progress-tracker-step-color;`
73	`}`
74
75	`&:after {`
76	`background-color: transparent;`
77	`border: none;`
78	`box-shadow: none;`
79	`}`
80	`}`
81	`}`
82	`.aui-progress-tracker-step > a {`
83	`&:hover {`
84	`color: @aui-progress-tracker-visited-step-hover-text-color;`
85	`}`
86
87	`&:active {`
88	`color: @aui-progress-tracker-visited-step-active-text-color;`
89	`}`
90	`}`
91
92	`/* Interaction wih page layout */`
93	`.aui-page-header-actions .aui-progress-tracker {`
94	`float: right;`
95	`}`