bulma/docs/_sass/specific.sass

296 lines
5.2 KiB
Sass
Raw Normal View History

2018-04-10 10:45:48 +00:00
+selection
background-color: $primary
color: $primary-invert
2018-04-11 23:20:58 +00:00
.bd-post
.table
font-size: 1rem
.bd-anchor-title
margin-top: 0 !important
2018-04-11 11:54:56 +00:00
.bd-has-drawing
position: relative
.bd-drawing
display: none
pointer-events: none
position: absolute
&.bd-is-try-it-out
bottom: 100%
right: 100%
&.bd-is-love-letters
bottom: 110%
right: 10%
&.bd-is-crazy
left: -10%
top: 110%
&.bd-is-customize
right: -10%
top: 105%
&.bd-is-opinion-free
right: 100%
top: 110%
&.bd-is-join-us
bottom: 80%
left: 100%
&.bd-is-spam-free
bottom: 100%
right: 90%
+tablet
.bd-drawing
display: inline
2018-04-09 19:19:29 +00:00
.bd-links
counter-reset: bd-links
.bd-link
border-radius: $radius-large
color: $text-light
display: block
font-size: $size-5
2018-04-10 21:38:00 +00:00
padding: 1rem 3rem 1.5rem 5rem
position: relative
2018-04-10 14:38:50 +00:00
transition-duration: $speed
transition-property: background-color, color
2018-04-09 19:19:29 +00:00
strong
font-weight: $weight-semibold
&:hover
background-color: $white-bis
2018-04-11 23:20:58 +00:00
.bd-link-surtitle
float: right
font-size: 0.75em
margin-bottom: 1em
margin-left: 2em
opacity: 0.5
padding-top: 0.25em
2018-04-09 19:19:29 +00:00
.bd-link-name
2018-04-09 20:16:50 +00:00
line-height: 1.25
margin-bottom: 0.25em
2018-04-09 19:19:29 +00:00
position: relative
2018-04-09 20:16:50 +00:00
2018-04-10 21:38:00 +00:00
.bd-link-figure
position: absolute
right: calc(100% + 0.5em)
text-align: center
top: 0
min-width: 1.5em
2018-04-09 20:16:50 +00:00
.bd-link-counter
color: $link
2018-04-10 21:38:00 +00:00
display: block
2018-04-09 20:16:50 +00:00
counter-increment: bd-links
font-weight: $weight-normal
2018-04-09 19:19:29 +00:00
&::before
content: counter(bd-links)
2018-04-09 20:16:50 +00:00
.bd-link-icon
2018-04-10 21:38:00 +00:00
display: block
2018-04-09 20:16:50 +00:00
font-size: 2rem
width: 1.5em
2018-04-09 19:19:29 +00:00
2018-04-11 17:58:11 +00:00
.bd-link-more
font-size: 0.75em
opacity: 0.5
2018-04-09 19:19:29 +00:00
+desktop
.bd-links
display: flex
flex-wrap: wrap
.bd-link
width: 50%
.bd-link-name
color: $text-strong
font-size: $size-4
font-weight: $weight-semibold
.bd-docs
display: flex
flex-wrap: wrap
.bd-doc
margin: 0 3rem 1.5rem 0
+mobile
min-width: calc(50% - 3rem)
+tablet
min-width: calc(33.3333% - 3rem)
.bd-doc-title
color: $text-strong
a
color: currentColor
&:hover
color: $link
&:not(:last-child)
margin-bottom: 0.75rem
.bd-boxes
display: flex
flex-wrap: wrap
justify-content: space-between
.bd-box
border: 4px solid $background
border-radius: $radius
.bd-box-header
text-align: center
2018-04-09 13:15:31 +00:00
.bd-typo
2018-04-09 19:19:29 +00:00
text-align: center
2018-04-09 15:33:44 +00:00
&:not(:first-child)
2018-04-09 19:19:29 +00:00
margin-top: $main-spacing
2018-04-09 13:15:31 +00:00
2018-04-09 09:35:44 +00:00
.bd-has-text-rss
color: $rss
2018-04-10 17:22:04 +00:00
.has-text-star
2018-04-09 09:35:44 +00:00
color: $star
2018-04-09 22:53:34 +00:00
// $navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
// @each $name, $color in $navbar-items
// .bd-navbar-item-#{$name}
// .icon
// color: $color
// &:hover
// background-color: $color !important
// color: #fff !important
// .icon
// color: currentColor !important
// .bd-navbar-item-expo
// &:hover
// color: #8F6900 !important
// .icon
// color: #F4B300 !important
2018-04-09 09:35:44 +00:00
2017-10-26 18:47:48 +00:00
.bd-special-shadow
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
2017-10-26 19:00:25 +00:00
height: 8px
2017-10-26 18:47:48 +00:00
left: 0
opacity: 0
position: absolute
right: 0
top: 100%
transform: scaleY(0)
transform-origin: center top
+touch
.bd-is-clipped-touch
overflow: hidden !important
2017-07-02 22:49:54 +00:00
#images
tr
td:nth-child(2)
width: 320px
2017-08-14 11:44:24 +00:00
.bd-color
2017-07-02 22:49:54 +00:00
border-radius: 2px
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
display: inline-block
float: left
height: 24px
margin-right: 8px
width: 24px
2017-08-14 11:44:24 +00:00
.button.bd-is-rss
2018-04-09 09:35:44 +00:00
background-color: $rss
2017-07-02 22:49:54 +00:00
border-color: transparent
color: #fff
&:hover
2018-04-09 09:35:44 +00:00
background-color: darken($rss, 5%)
2017-07-02 22:49:54 +00:00
&:active
2018-04-09 09:35:44 +00:00
background-color: darken($rss, 10%)
2017-07-24 13:44:24 +00:00
2017-08-14 11:44:24 +00:00
.bd-view-all-versions
2017-07-24 13:44:24 +00:00
color: $text-light
&:hover
text-decoration: underline
2017-07-26 20:06:52 +00:00
2017-08-14 11:44:24 +00:00
.bd-feature-title
2017-07-26 20:06:52 +00:00
color: $text-light
a
border-bottom: 1px solid transparent
color: $text-strong
&:hover
border-bottom-color: $primary
2017-07-29 13:38:45 +00:00
2017-08-14 11:44:24 +00:00
.bd-anchor-title
2017-07-29 14:31:19 +00:00
padding-top: 1.5rem
position: relative
2017-08-07 18:51:57 +00:00
+until($widescreen)
2017-07-29 22:16:31 +00:00
padding-left: 2rem
2017-07-29 14:31:19 +00:00
2017-08-14 11:44:24 +00:00
.bd-anchor-link
2017-07-29 14:31:19 +00:00
position: absolute
right: calc(100% + 1rem)
2018-07-14 13:18:43 +00:00
top: 1.5rem
2017-08-07 18:51:57 +00:00
+until($widescreen)
2017-07-29 22:16:31 +00:00
left: 0
right: auto
2017-07-29 14:31:19 +00:00
2018-03-26 17:20:46 +00:00
.has-text-orange
color: $orange !important
2018-04-11 08:41:32 +00:00
.has-text-purple
color: $purple !important
2018-04-09 20:16:50 +00:00
.has-text-bootstrap
color: $bootstrap !important
2017-08-03 19:29:09 +00:00
2018-04-09 20:16:50 +00:00
.has-text-patreon
color: $patreon !important
2017-07-30 17:22:13 +00:00
2017-08-14 11:44:24 +00:00
.bd-emoji
2017-07-30 17:22:13 +00:00
margin-right: 0.5em
2017-08-14 11:44:24 +00:00
margin-top: 2px
2017-08-14 12:59:16 +00:00
2018-01-10 11:48:03 +00:00
.bd-emoji-bis
font-size: 1.25em
vertical-align: middle
2017-08-14 12:59:16 +00:00
$notification-background-color: $background !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
.bd-notification
background-color: $background
border-radius: $radius
2018-04-10 10:45:48 +00:00
color: $text-light
font-weight: $weight-semibold
2017-08-14 17:25:14 +00:00
padding: 1.25rem 0
2017-08-14 12:59:16 +00:00
position: relative
text-align: center
.title,
.subtitle,
.content,
strong
color: currentColor
code,
pre
2018-04-10 10:45:48 +00:00
background-color: rgba($black, 0.2)
border-radius: $radius
color: $white
2017-08-14 12:59:16 +00:00
pre code
2018-04-10 10:45:48 +00:00
background-color: transparent
2017-08-14 12:59:16 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
2017-09-09 16:32:12 +00:00
.bd-icon-size .icon
2017-10-13 11:12:53 +00:00
background-color: $yellow
.bd-mwb-table
td
vertical-align: middle
img
2017-10-24 09:31:45 +00:00
vertical-align: middle