Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
.rui-breadcrumbs {
2
  margin-top: 20px;
3
  margin-bottom: 20px;
4
 
5
  @include media-breakpoint-between(xs, sm) {
6
  margin-top: 6px;
7
  }
8
}
9
 
10
.breadcrumb,
11
.coursefilesbreadcrumb {
12
  display: flex;
13
  flex-wrap: wrap;
14
  padding: 0;
15
  margin: 0;
16
 
17
  z-index: 0;
18
 
19
  @include font-size($breadcrumb-font-size);
20
  list-style: none;
21
 
22
  @include media-breakpoint-between(xs, sm) {
23
    width: max-content;
24
    justify-content: center;
25
    margin: 0 auto;
26
  }
27
}
28
 
29
.breadcrumbs-container {
30
  @include media-breakpoint-up(lg) {
31
    width: 100%;
32
  }
33
 
34
  @include media-breakpoint-between(xs, sm) {
35
    margin-left: auto;
36
    margin-right: auto;
37
    padding: 0 0 5px;
38
    overflow-x: auto;
39
 
40
    .pagelayout-incourse &,
41
    .pagelayout-course & {
42
      width: calc(100% - 100px);
43
    }
44
  }
45
 
46
}
47
 
48
.breadcrumb--in-content {
49
  margin: 0;
50
}
51
 
52
.breadcrumb-item {
53
  display: flex;
54
  color: $breadcrumb-color;
55
 
56
  &:hover {
57
    color: $link-hover-color;
58
  }
59
 
60
  .theme-dark & {
61
    color: $dm-breadcrumb-color;
62
  }
63
 
64
  &:first-child {
65
    a {
66
      color: $body-color-light;
67
 
68
      .theme-dark & {
69
        color: $dm-body-color-light;
70
      }
71
    }
72
  }
73
 
74
  .text-truncate {
75
    max-width: 300px;
76
  }
77
 
78
  // The separator between breadcrumbs (by default, a forward-slash: "/")
79
  +.breadcrumb-item {
80
 
81
    &::before {
82
      display: inline-flex; // Suppress underlining of the separator in modern browsers
83
      align-items: center;
84
      padding-right: $breadcrumb-item-padding;
85
      font-size: 10px;
86
      color: $breadcrumb-divider-color;
87
      content: escape-svg($breadcrumb-divider);
88
 
89
      .theme-dark & {
90
        color: $dm-breadcrumb-divider-color;
91
      }
92
    }
93
  }
94
 
95
  &.breadcrumb-item--last {
96
    opacity: .6;
97
  }
98
 
99
  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
100
  // without `<ul>`s. The `::before` pseudo-element generates an element
101
  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
102
  //
103
  // To trick IE into suppressing the underline, we give the pseudo-element an
104
  // underline and then immediately remove it.
105
  +.breadcrumb-item:hover::before {
106
    text-decoration: underline;
107
  }
108
 
109
  // stylelint-disable-next-line no-duplicate-selectors
110
  +.breadcrumb-item:hover::before {
111
    text-decoration: none;
112
  }
113
 
114
 
115
  &.active {
116
    color: $breadcrumb-active-color;
117
 
118
    &:after {
119
      content: '';
120
      background-color: var(--primary-color-100);
121
 
122
      border-radius: $btn-border-radius;
123
 
124
      position: absolute;
125
      left: -3px;
126
      top: -2px;
127
      width: calc(100% + 6px);
128
      height: calc(100% + 4px);
129
      z-index: -1;
130
 
131
      .theme-dark & {
132
        background-color: $dm-gray-700;
133
      }
134
    }
135
 
136
    .theme-dark & {
137
      color: $dm-breadcrumb-active-color;
138
    }
139
  }
140
 
141
  .breadcrumbs-textonly {
142
    margin: 0.25rem 0;
143
    display: grid;
144
    color: $breadcrumb-active-color;
145
  }
146
 
147
  a,
148
  .breadcrumbs-textonly {
149
    position: relative;
150
    display: inline-flex;
151
    z-index: 1;
152
 
153
    padding: 3px 0;
154
    margin: .25rem 8px .25rem 0;
155
 
156
    transition: $transition-base;
157
  }
158
 
159
  a {
160
    color: $breadcrumb-color;
161
    font-weight: $font-weight-medium;
162
 
163
    .theme-dark & {
164
      color: $dm-breadcrumb-color;
165
    }
166
 
167
    .text-truncate {
168
      display: inline-block;
169
      max-width: 200px;
170
    }
171
 
172
    &:hover {
173
      text-decoration: none;
174
      color: var(--main-theme-color);
175
 
176
      .theme-dark & {
177
        color: $dm-breadcrumb-active-color;
178
      }
179
    }
180
  }
181
}