aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-pt2021/assets/bulma-0.9.3/sass/components/tabs.sass
blob: 2cb6a5431cdc13afc35ad772b5fbb90cf3f4a1e4 (plain)
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
@import "../utilities/mixins"

$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
$tabs-link-color: $text !default
$tabs-link-hover-border-bottom-color: $text-strong !default
$tabs-link-hover-color: $text-strong !default
$tabs-link-active-border-bottom-color: $link !default
$tabs-link-active-color: $link !default
$tabs-link-padding: 0.5em 1em !default

$tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default

$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default

$tabs-toggle-link-border-color: $border !default
$tabs-toggle-link-border-style: solid !default
$tabs-toggle-link-border-width: 1px !default
$tabs-toggle-link-hover-background-color: $background !default
$tabs-toggle-link-hover-border-color: $border-hover !default
$tabs-toggle-link-radius: $radius !default
$tabs-toggle-link-active-background-color: $link !default
$tabs-toggle-link-active-border-color: $link !default
$tabs-toggle-link-active-color: $link-invert !default

.tabs
  @extend %block
  +overflow-touch
  @extend %unselectable
  align-items: stretch
  display: flex
  font-size: $size-normal
  justify-content: space-between
  overflow: hidden
  overflow-x: auto
  white-space: nowrap
  a
    align-items: center
    border-bottom-color: $tabs-border-bottom-color
    border-bottom-style: $tabs-border-bottom-style
    border-bottom-width: $tabs-border-bottom-width
    color: $tabs-link-color
    display: flex
    justify-content: center
    margin-bottom: -#{$tabs-border-bottom-width}
    padding: $tabs-link-padding
    vertical-align: top
    &:hover
      border-bottom-color: $tabs-link-hover-border-bottom-color
      color: $tabs-link-hover-color
  li
    display: block
    &.is-active
      a
        border-bottom-color: $tabs-link-active-border-bottom-color
        color: $tabs-link-active-color
  ul
    align-items: center
    border-bottom-color: $tabs-border-bottom-color
    border-bottom-style: $tabs-border-bottom-style
    border-bottom-width: $tabs-border-bottom-width
    display: flex
    flex-grow: 1
    flex-shrink: 0
    justify-content: flex-start
    &.is-left
      padding-right: 0.75em
    &.is-center
      flex: none
      justify-content: center
      padding-left: 0.75em
      padding-right: 0.75em
    &.is-right
      justify-content: flex-end
      padding-left: 0.75em
  .icon
    &:first-child
      +ltr-property("margin", 0.5em)
    &:last-child
      +ltr-property("margin", 0.5em, false)
  // Alignment
  &.is-centered
    ul
      justify-content: center
  &.is-right
    ul
      justify-content: flex-end
  // Styles
  &.is-boxed
    a
      border: 1px solid transparent
      +ltr
        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
      +rtl
        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
      &:hover
        background-color: $tabs-boxed-link-hover-background-color
        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
    li
      &.is-active
        a
          background-color: $tabs-boxed-link-active-background-color
          border-color: $tabs-boxed-link-active-border-color
          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
  &.is-fullwidth
    li
      flex-grow: 1
      flex-shrink: 0
  &.is-toggle
    a
      border-color: $tabs-toggle-link-border-color
      border-style: $tabs-toggle-link-border-style
      border-width: $tabs-toggle-link-border-width
      margin-bottom: 0
      position: relative
      &:hover
        background-color: $tabs-toggle-link-hover-background-color
        border-color: $tabs-toggle-link-hover-border-color
        z-index: 2
    li
      & + li
        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
      &:first-child a
        +ltr
          border-top-left-radius: $tabs-toggle-link-radius
          border-bottom-left-radius: $tabs-toggle-link-radius
        +rtl
          border-top-right-radius: $tabs-toggle-link-radius
          border-bottom-right-radius: $tabs-toggle-link-radius
      &:last-child a
        +ltr
          border-top-right-radius: $tabs-toggle-link-radius
          border-bottom-right-radius: $tabs-toggle-link-radius
        +rtl
          border-top-left-radius: $tabs-toggle-link-radius
          border-bottom-left-radius: $tabs-toggle-link-radius
      &.is-active
        a
          background-color: $tabs-toggle-link-active-background-color
          border-color: $tabs-toggle-link-active-border-color
          color: $tabs-toggle-link-active-color
          z-index: 1
    ul
      border-bottom: none
    &.is-toggle-rounded
      li
        &:first-child a
          +ltr
            border-bottom-left-radius: $radius-rounded
            border-top-left-radius: $radius-rounded
            padding-left: 1.25em
          +rtl
            border-bottom-right-radius: $radius-rounded
            border-top-right-radius: $radius-rounded
            padding-right: 1.25em
        &:last-child a
          +ltr
            border-bottom-right-radius: $radius-rounded
            border-top-right-radius: $radius-rounded
            padding-right: 1.25em
          +rtl
            border-bottom-left-radius: $radius-rounded
            border-top-left-radius: $radius-rounded
            padding-left: 1.25em
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large