Newer
Older
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
// Two columns in List elements: Note: There is a separate .-columns class for p which defines paragraphs as two-columns
.two-cols {
column-count: 2;
column-gap: 1px;
margin-top: 0;
@media #{$bp2} {
margin-left: 0;
width: calc(100% - 35px);
}
@media #{$bp4} {
width: 100%;
}
// For other unstyled-list styles see unstyled-list.scss
&.unstyled-list {
// Li acts as wrapper for two column-list
li {
display: flex;
flex-wrap: wrap;
margin-bottom: g(-.5);
}
}
// Links/buttons inside two column (desktop) toolbars in results list and record list sidebars
.results-actions &,
.record-actions.-secondary & {
a,
.record-action {
@media #{$bp5} {
width: calc(100% - #{g(.5)});
}
}
}
}
// One column/general tool elements in sidebar: Behaviour @ breakpoints (see settings.scss)
// For other '.results-actions a' styles or '.record-actions' styles see results.scss and record.scss
// Result list toolbar element widths
.results-actions a {
width: 100%;
@media #{$bp4} {
width: calc(100% - 14px);
}
}
// Record view toolbar(s) and toolbar element widths.
// The toolbar is built like so:
// .record-actions.-primary (single column desktop view)
// h3
// ul
// li
// a .record-action-group (bookbag)
// a .record-action
// .record-actions.-secondary (two column desktop view)
// h3
// ul
// li
// a .record-action
.record-actions {
margin-left: 35px;
width: calc(100% - 75px);
@media #{$bp1} {
margin-left: 0;
width: 100%;
}
@media #{$bp2} {
margin-left: 0;
}
@media #{$bp2} {
width: 100%;
}
// Links/buttons inside the two-column (desktop view) elements (one column on XS, SM)
&.-secondary .record-action {
width: 100%;
}
// Width of entire UL element determines available space for buttons!
ul {
@media #{$bp1} {
margin-right: 35px;
width: calc(100% - 75px);
}
@media #{$bp2} {
margin-right: 0;
width: calc(100% - 35px);
}
@media #{$bp5} {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}
}