tuxwebror/app/assets/stylesheets/bulma/bulma-extensions/bulma-divider.scss
2018-12-21 19:06:39 +01:00

321 lines
7.6 KiB
SCSS

@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@keyframes spinAround {
from {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
.is-divider,
.is-divider-vertical {
display: block;
position: relative;
border-top: .1rem solid #dbdbdb;
height: .1rem;
margin: 2rem 0;
text-align: center
}
.is-divider-vertical[data-content]::after,
.is-divider[data-content]::after {
background: #fff;
color: #b5b5b5;
content: attr(data-content);
display: inline-block;
font-size: .75rem;
padding: .4rem .8rem;
-webkit-transform: translateY(-1.1rem);
transform: translateY(-1.1rem);
text-align: center
}
@media screen and (min-width:769px),
print {
.is-divider-vertical {
display: block;
flex: none;
width: auto;
height: auto;
padding: 2rem;
margin: 0;
position: relative;
border-top: none;
min-height: 2rem
}
.is-divider-vertical::before {
border-left: .1rem solid #dbdbdb;
bottom: 1rem;
content: "";
display: block;
left: 50%;
position: absolute;
top: 1rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.is-divider-vertical[data-content]::after {
position: absolute;
left: 50%;
top: 50%;
padding: .1rem;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%)
}
}
.is-divider-vertical.is-white,
.is-divider.is-white {
border-top-color: #fff
}
.is-divider-vertical.is-white[data-content]::after,
.is-divider.is-white[data-content]::after {
background: #0a0a0a;
color: #fff
}
.is-divider-vertical.is-white::before,
.is-divider.is-white::before {
border-left-color: #fff
}
.is-divider-vertical.is-black,
.is-divider.is-black {
border-top-color: #0a0a0a
}
.is-divider-vertical.is-black[data-content]::after,
.is-divider.is-black[data-content]::after {
background: #fff;
color: #0a0a0a
}
.is-divider-vertical.is-black::before,
.is-divider.is-black::before {
border-left-color: #0a0a0a
}
.is-divider-vertical.is-light,
.is-divider.is-light {
border-top-color: #f5f5f5
}
.is-divider-vertical.is-light[data-content]::after,
.is-divider.is-light[data-content]::after {
background: #363636;
color: #f5f5f5
}
.is-divider-vertical.is-light::before,
.is-divider.is-light::before {
border-left-color: #f5f5f5
}
.is-divider-vertical.is-dark,
.is-divider.is-dark {
border-top-color: #363636
}
.is-divider-vertical.is-dark[data-content]::after,
.is-divider.is-dark[data-content]::after {
background: #f5f5f5;
color: #363636
}
.is-divider-vertical.is-dark::before,
.is-divider.is-dark::before {
border-left-color: #363636
}
.is-divider-vertical.is-primary,
.is-divider.is-primary {
border-top-color: #00d1b2
}
.is-divider-vertical.is-primary[data-content]::after,
.is-divider.is-primary[data-content]::after {
background: #fff;
color: #00d1b2
}
.is-divider-vertical.is-primary::before,
.is-divider.is-primary::before {
border-left-color: #00d1b2
}
.is-divider-vertical.is-link,
.is-divider.is-link {
border-top-color: #3273dc
}
.is-divider-vertical.is-link[data-content]::after,
.is-divider.is-link[data-content]::after {
background: #fff;
color: #3273dc
}
.is-divider-vertical.is-link::before,
.is-divider.is-link::before {
border-left-color: #3273dc
}
.is-divider-vertical.is-info,
.is-divider.is-info {
border-top-color: #209cee
}
.is-divider-vertical.is-info[data-content]::after,
.is-divider.is-info[data-content]::after {
background: #fff;
color: #209cee
}
.is-divider-vertical.is-info::before,
.is-divider.is-info::before {
border-left-color: #209cee
}
.is-divider-vertical.is-success,
.is-divider.is-success {
border-top-color: #23d160
}
.is-divider-vertical.is-success[data-content]::after,
.is-divider.is-success[data-content]::after {
background: #fff;
color: #23d160
}
.is-divider-vertical.is-success::before,
.is-divider.is-success::before {
border-left-color: #23d160
}
.is-divider-vertical.is-warning,
.is-divider.is-warning {
border-top-color: #ffdd57
}
.is-divider-vertical.is-warning[data-content]::after,
.is-divider.is-warning[data-content]::after {
background: rgba(0, 0, 0, .7);
color: #ffdd57
}
.is-divider-vertical.is-warning::before,
.is-divider.is-warning::before {
border-left-color: #ffdd57
}
.is-divider-vertical.is-danger,
.is-divider.is-danger {
border-top-color: #ff3860
}
.is-divider-vertical.is-danger[data-content]::after,
.is-divider.is-danger[data-content]::after {
background: #fff;
color: #ff3860
}
.is-divider-vertical.is-danger::before,
.is-divider.is-danger::before {
border-left-color: #ff3860
}
.is-divider-vertical.is-black-bis,
.is-divider.is-black-bis {
border-top-color: #121212
}
.is-divider-vertical.is-black-bis[data-content]::after,
.is-divider.is-black-bis[data-content]::after {
background: #fff;
color: #121212
}
.is-divider-vertical.is-black-bis::before,
.is-divider.is-black-bis::before {
border-left-color: #121212
}
.is-divider-vertical.is-black-ter,
.is-divider.is-black-ter {
border-top-color: #242424
}
.is-divider-vertical.is-black-ter[data-content]::after,
.is-divider.is-black-ter[data-content]::after {
background: #fff;
color: #242424
}
.is-divider-vertical.is-black-ter::before,
.is-divider.is-black-ter::before {
border-left-color: #242424
}
.is-divider-vertical.is-grey-darker,
.is-divider.is-grey-darker {
border-top-color: #363636
}
.is-divider-vertical.is-grey-darker[data-content]::after,
.is-divider.is-grey-darker[data-content]::after {
background: #fff;
color: #363636
}
.is-divider-vertical.is-grey-darker::before,
.is-divider.is-grey-darker::before {
border-left-color: #363636
}
.is-divider-vertical.is-grey-dark,
.is-divider.is-grey-dark {
border-top-color: #4a4a4a
}
.is-divider-vertical.is-grey-dark[data-content]::after,
.is-divider.is-grey-dark[data-content]::after {
background: #fff;
color: #4a4a4a
}
.is-divider-vertical.is-grey-dark::before,
.is-divider.is-grey-dark::before {
border-left-color: #4a4a4a
}
.is-divider-vertical.is-grey,
.is-divider.is-grey {
border-top-color: #7a7a7a
}
.is-divider-vertical.is-grey[data-content]::after,
.is-divider.is-grey[data-content]::after {
background: #fff;
color: #7a7a7a
}
.is-divider-vertical.is-grey::before,
.is-divider.is-grey::before {
border-left-color: #7a7a7a
}
.is-divider-vertical.is-grey-light,
.is-divider.is-grey-light {
border-top-color: #b5b5b5
}
.is-divider-vertical.is-grey-light[data-content]::after,
.is-divider.is-grey-light[data-content]::after {
background: #fff;
color: #b5b5b5
}
.is-divider-vertical.is-grey-light::before,
.is-divider.is-grey-light::before {
border-left-color: #b5b5b5
}
.is-divider-vertical.is-grey-lighter,
.is-divider.is-grey-lighter {
border-top-color: #dbdbdb
}
.is-divider-vertical.is-grey-lighter[data-content]::after,
.is-divider.is-grey-lighter[data-content]::after {
background: rgba(0, 0, 0, .7);
color: #dbdbdb
}
.is-divider-vertical.is-grey-lighter::before,
.is-divider.is-grey-lighter::before {
border-left-color: #dbdbdb
}
.is-divider-vertical.is-white-ter,
.is-divider.is-white-ter {
border-top-color: #f5f5f5
}
.is-divider-vertical.is-white-ter[data-content]::after,
.is-divider.is-white-ter[data-content]::after {
background: rgba(0, 0, 0, .7);
color: #f5f5f5
}
.is-divider-vertical.is-white-ter::before,
.is-divider.is-white-ter::before {
border-left-color: #f5f5f5
}
.is-divider-vertical.is-white-bis,
.is-divider.is-white-bis {
border-top-color: #fafafa
}
.is-divider-vertical.is-white-bis[data-content]::after,
.is-divider.is-white-bis[data-content]::after {
background: rgba(0, 0, 0, .7);
color: #fafafa
}
.is-divider-vertical.is-white-bis::before,
.is-divider.is-white-bis::before {
border-left-color: #fafafa
}