bulma/docs/_sass/main.sass

269 lines
4.4 KiB
Sass
Raw Normal View History

2018-04-09 09:35:44 +00:00
.bd-main
overflow: hidden
position: relative
2018-07-13 23:42:07 +00:00
.bd-figure
+block
2018-07-14 13:18:43 +00:00
align-items: center
2018-07-13 23:42:07 +00:00
border: 2px solid $white-ter
border-radius: $radius
2018-07-14 13:18:43 +00:00
display: flex
flex-direction: column
2018-07-13 23:42:07 +00:00
text-align: center
2018-07-14 13:18:43 +00:00
img
margin: 1em
2018-07-13 23:42:07 +00:00
figcaption
2018-07-14 13:18:43 +00:00
align-self: stretch
2018-07-13 23:42:07 +00:00
background-color: $white-ter
color: $text-light
font-size: $size-small
padding: 1em
2018-04-09 09:35:44 +00:00
// Lead
.bd-lead
position: relative
.bd-breadcrumb
2018-04-09 11:45:52 +00:00
display: flex
justify-content: space-between
2018-04-09 15:50:33 +00:00
margin-bottom: $main-spacing
2018-04-09 11:45:52 +00:00
.breadcrumb:not(:last-child)
margin-bottom: 0
.bd-prev-next
align-items: flex-start
color: $grey-light
display: none
flex-grow: 0
flex-shrink: 0
margin-left: 0.5rem
text-align: center
a,
span
border-radius: $radius
width: 1.5rem
a
&:hover
background-color: $background
2018-04-09 09:35:44 +00:00
2018-04-09 19:19:29 +00:00
.bd-prev-next-bis
border-top: 2px solid $background
display: flex
justify-content: space-between
margin-top: $main-spacing
a
margin-top: $main-spacing / 2
.bd-prev-next-bis-previous
margin-right: auto
.bd-prev-next-bis-next
margin-left: auto
2018-04-09 09:35:44 +00:00
.bd-header
2018-04-09 15:50:33 +00:00
margin-bottom: $main-spacing
2018-04-09 09:35:44 +00:00
.subtitle
color: $text-light
strong
color: currentColor
2018-04-09 15:50:33 +00:00
#meta
margin-top: -0.5rem
2018-04-09 09:35:44 +00:00
2018-07-12 16:15:22 +00:00
.bd-tabs
margin-bottom: $main-spacing
2018-10-28 08:57:38 +00:00
+mobile
.bd-tabs
margin-left: -1.5rem
margin-right: -1.5rem
.tabs
ul
flex-wrap: nowrap
+tablet
.bd-tabs
.tabs
overflow: visible
ul,
a
border-bottom-color: $white-ter
border-bottom-width: 2px
a
margin-bottom: -2px
li:not(.is-active) a:hover
border-bottom-color: $border
ul
flex-wrap: wrap
max-width: 100%
2018-07-12 16:15:22 +00:00
2018-04-09 16:11:24 +00:00
.bd-content
hr:first-child
display: none
& + .bd-anchor-title
padding-top: 0
2018-07-14 13:18:43 +00:00
.bd-anchor-link
top: 0
2018-04-09 16:11:24 +00:00
2018-04-09 09:35:44 +00:00
// Side
.bd-side,
.bd-side-background
background-color: $white-bis
.bd-side
position: relative
.bd-side-background
bottom: 0
left: 50%
position: absolute
right: 0
top: 0
2018-04-10 22:52:51 +00:00
%bd-list
font-size: 0.875rem
li
&:not(:last-child)
margin-bottom: 0.5em
2018-04-11 00:14:29 +00:00
&.is-past
a
color: $grey-light
2018-04-10 22:52:51 +00:00
&.is-current
a
color: $link
a
color: $text-light
&:hover
color: $link
2018-04-09 16:59:04 +00:00
.bd-category
a
&:hover
color: $link
&:not(:last-child)
margin-bottom: 0.5rem
2018-04-09 19:19:29 +00:00
&.is-active
.bd-category-toggle
.icon
transform: rotate(180deg)
.bd-category-list
display: block
2018-04-09 16:59:04 +00:00
.bd-category-header
position: relative
.bd-category-toggle
+overlay
align-items: center
color: $grey-light
display: flex
justify-content: flex-end
.icon
font-size: 0.75rem
2018-04-09 19:19:29 +00:00
transform-origin: center
transition-duration: $speed
transition-property: transform
2018-04-09 16:59:04 +00:00
.bd-category-name
color: $text-strong
position: relative
2018-04-11 11:54:56 +00:00
&.is-active
color: $link
2018-07-13 23:42:07 +00:00
.tag
border-radius: 2px
font-family: Verdana
font-size: 0.5rem
font-weight: bold
height: 2.25em
margin-left: 0.5em
vertical-align: text-bottom
2018-04-09 16:59:04 +00:00
.bd-category-list
2018-04-10 22:52:51 +00:00
@extend %bd-list
2018-04-09 16:59:04 +00:00
display: none
padding: 0.5rem
2018-04-10 22:52:51 +00:00
.bd-anchors-reference
height: 1px
.bd-anchors
2018-04-11 01:11:12 +00:00
display: none
max-width: $sidebar-width
2018-04-10 22:52:51 +00:00
padding-top: calc(1.5rem - 1px)
2018-04-11 00:14:29 +00:00
+tablet
2018-04-11 01:11:12 +00:00
&.is-active
display: block
2018-04-11 00:14:29 +00:00
&.is-pinned
position: fixed
top: 0
2018-04-10 22:52:51 +00:00
.bd-anchors-title
color: $grey-light
font-size: 0.875rem
font-weight: $weight-semibold
margin-bottom: 0.5rem
.bd-anchors-list
@extend %bd-list
2018-04-09 16:59:04 +00:00
li
2018-04-10 22:52:51 +00:00
&:last-child
margin-top: 1em
2018-04-11 00:14:29 +00:00
a
color: $text-strong
2018-04-09 16:59:04 +00:00
2018-04-09 09:35:44 +00:00
+touch
.bd-lead,
.bd-side
padding: 1.5rem
2018-04-09 16:11:24 +00:00
.bd-header-carbon
margin-top: 1.5rem
2018-04-09 09:35:44 +00:00
2018-06-25 08:30:44 +00:00
+touch
2018-04-09 09:35:44 +00:00
.bd-side-background
display: none
2018-06-25 08:30:44 +00:00
+desktop
2018-04-09 09:35:44 +00:00
.bd-duo
display: flex
.bd-lead
background-color: $white
overflow: hidden
flex-grow: 1
flex-shrink: 1
2018-04-09 11:45:52 +00:00
.bd-prev-next
display: flex
2018-04-09 09:35:44 +00:00
.bd-side
2018-04-09 16:32:12 +00:00
flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
2018-04-09 09:35:44 +00:00
+desktop
.bd-main
padding: 0 3rem
.bd-lead
2018-04-09 13:15:31 +00:00
margin-left: -3rem
padding: 3rem
2018-04-09 22:53:34 +00:00
&:last-child
margin-right: -3rem
2018-04-09 16:11:24 +00:00
.bd-header
2018-04-09 16:32:12 +00:00
align-items: center
2018-04-09 16:11:24 +00:00
display: flex
2018-07-12 16:15:22 +00:00
min-height: 140px
2018-04-09 16:11:24 +00:00
.bd-header-titles
flex-grow: 1
flex-shrink: 1
.bd-header-carbon
flex-grow: 0
flex-shrink: 0
2018-04-09 22:53:34 +00:00
margin: -15px 0 -15px ($main-spacing * 2)
2018-04-09 16:11:24 +00:00
width: $carbon-width
2018-04-09 09:35:44 +00:00
.bd-side
padding: 3rem 0 3rem 1.5rem
2018-04-11 01:11:12 +00:00
+widescreen
.bd-header-carbon
margin-left: ($main-spacing * 3)
+fullhd
.bd-header-carbon
margin-left: ($main-spacing * 4)