aboutsummaryrefslogtreecommitdiff
path: root/semantic/src/definitions/collections/breadcrumb.less
blob: df6f979fd317de36e54a369bee4e3316b44268e0 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*!
 * # Fomantic-UI - Breadcrumb
 * http://github.com/fomantic/Fomantic-UI/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'collection';
@element : 'breadcrumb';

@import (multiple) '../../theme.config';


/*******************************
           Breadcrumb
*******************************/

.ui.breadcrumb {
  line-height: @lineHeight;
  display: @display;
  margin: @verticalMargin 0;
  vertical-align: @verticalAlign;
}
.ui.breadcrumb:first-child {
  margin-top: 0;
}
.ui.breadcrumb:last-child {
  margin-bottom: 0;
}

/*******************************
          Content
*******************************/

/* Divider */
.ui.breadcrumb .divider {
  display: inline-block;
  opacity: @dividerOpacity;
  margin: 0 @dividerSpacing 0;

  font-size: @dividerSize;
  color: @dividerColor;
  vertical-align: @dividerVerticalAlign;
}

/* Link */
.ui.breadcrumb a {
  color: @linkColor;
}
.ui.breadcrumb a:hover {
  color: @linkHoverColor;
}


/* Icon Divider */
.ui.breadcrumb .icon.divider {
  font-size: @iconDividerSize;
  vertical-align: @iconDividerVerticalAlign;
}

/* Section */
.ui.breadcrumb a.section {
  cursor: pointer;
}
.ui.breadcrumb .section {
  display: inline-block;
  margin: @sectionMargin;
  padding: @sectionPadding;
}

/* Loose Coupling */
.ui.breadcrumb.segment {
  display: inline-block;
  padding: @segmentPadding;
}

& when (@variationBreadcrumbInverted) {
  /* Inverted */
  .ui.inverted.breadcrumb {
    color: @invertedColor;
  }
  .ui.inverted.breadcrumb > .active.section {
    color: @invertedActiveColor;
  }
  .ui.inverted.breadcrumb > .divider {
    color: @invertedDividerColor;
  }
}

/*******************************
            States
*******************************/

.ui.breadcrumb .active.section {
  font-weight: @activeFontWeight;
}


/*******************************
           Variations
*******************************/

.ui.breadcrumb {
  font-size: @medium;
}
& when not (@variationBreadcrumbSizes = false) {
  each(@variationBreadcrumbSizes, {
    @s: @@value;
    .ui.@{value}.breadcrumb {
      font-size: @s;
    }
  })
}

.loadUIOverrides();