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
.folder-view
display: flex
gap: space-x(4.5)
flex-wrap: wrap
/////////////////////////////
.folder-view-item
$body-size: 200px
$icon-size: 30px
$text-size: 17px
transition: $transition-base
display: flex
align-items: stretch
width: $body-size
flex-grow: 0
flex-shrink: 0
position: relative
&:hover,
&:active,
&:focus
.folder-view-item__settings
display: block
&__body
@include clickable
flex-grow: 1
display: flex
flex-direction: column
align-items: center
position: relative
padding: #{ $card-spacer-y * 2 } $card-spacer-x
border-radius: $border-radius
transition: $transition-base
background-color: $gray-100
border: 1px solid $gray-100
&:hover,
&:active,
&:focus
background-color: $gray-200
text-decoration: none
&__icon
font-size: $icon-size
margin-bottom: #{ $card-spacer-y * 2 }
&__text
line-height: 1.2
text-align: center
font-size: $text-size
&__settings
transition: $transition-base
display: none
// best alignment to fit <icon-button> hovering block
$offset-y: 6px
$offset-x: 11px
position: absolute
top: $offset-y
right: $offset-x
// enhenced hover contrast
.b-icon-button:hover::before
background-color: $gray-200
// fitting radius with its parent container
.b-icon-button::before
border-radius: $border-radius