wishthis/semantic/dist/components/divider.css

298 lines
8.3 KiB
CSS
Raw Normal View History

2022-01-13 13:00:31 +00:00
/*!
2022-08-05 07:56:36 +00:00
* # Fomantic-UI 2.9.0-beta.301+42e68bc - Divider
2022-01-13 13:00:31 +00:00
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Divider
*******************************/
.ui.divider {
margin: 1rem 0;
line-height: 1;
height: 0;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(0, 0, 0, 0.85);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*--------------
Basic
---------------*/
.ui.divider:not(.vertical):not(.horizontal) {
border-top: 1px solid rgba(34, 36, 38, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/*--------------
Coupling
---------------*/
/* Allow divider between each column row */
.ui.grid > .column + .divider,
.ui.grid > .row > .column + .divider {
left: auto;
}
/*--------------
Horizontal
---------------*/
.ui.horizontal.divider {
display: table;
white-space: nowrap;
height: auto;
margin: '';
line-height: 1;
text-align: center;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider::before,
.ui.horizontal.divider::after {
2022-01-13 13:00:31 +00:00
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
background-repeat: no-repeat;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider::before {
2022-01-13 13:00:31 +00:00
background-position: right 1em top 50%;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider::after {
2022-01-13 13:00:31 +00:00
background-position: left 1em top 50%;
}
/*--------------
Vertical
---------------*/
.ui.vertical.divider {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 50%;
line-height: 0;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
2022-08-05 09:25:53 +00:00
.ui.vertical.divider::before,
.ui.vertical.divider::after {
2022-01-13 13:00:31 +00:00
position: absolute;
left: 50%;
content: '';
z-index: 3;
border-left: 1px solid rgba(34, 36, 38, 0.15);
border-right: 1px solid rgba(255, 255, 255, 0.1);
width: 0;
height: calc(100% - 1rem);
}
2022-08-05 09:25:53 +00:00
.ui.vertical.divider::before {
2022-01-13 13:00:31 +00:00
top: -100%;
}
2022-08-05 09:25:53 +00:00
.ui.vertical.divider::after {
2022-01-13 13:00:31 +00:00
top: auto;
bottom: 0;
}
/* Inside grid */
2022-02-25 15:21:56 +00:00
@media only screen and (max-width: 767.98px) {
2022-01-13 13:00:31 +00:00
.ui.stackable.grid .ui.vertical.divider,
.ui.grid .stackable.row .ui.vertical.divider {
display: table;
white-space: nowrap;
height: auto;
margin: '';
overflow: hidden;
line-height: 1;
text-align: center;
position: static;
top: 0;
left: 0;
-webkit-transform: none;
transform: none;
}
2022-08-05 09:25:53 +00:00
.ui.stackable.grid .ui.vertical.divider::before,
.ui.grid .stackable.row .ui.vertical.divider::before,
.ui.stackable.grid .ui.vertical.divider::after,
.ui.grid .stackable.row .ui.vertical.divider::after {
2022-01-13 13:00:31 +00:00
left: 0;
border-left: none;
border-right: none;
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
background-repeat: no-repeat;
}
2022-08-05 09:25:53 +00:00
.ui.stackable.grid .ui.vertical.divider::before,
.ui.grid .stackable.row .ui.vertical.divider::before {
2022-01-13 13:00:31 +00:00
background-position: right 1em top 50%;
}
2022-08-05 09:25:53 +00:00
.ui.stackable.grid .ui.vertical.divider::after,
.ui.grid .stackable.row .ui.vertical.divider::after {
2022-01-13 13:00:31 +00:00
background-position: left 1em top 50%;
}
}
/*--------------
Icon
---------------*/
.ui.divider > .icon {
margin: 0;
font-size: 1rem;
height: 1em;
vertical-align: middle;
}
/*--------------
Header
---------------*/
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider[class*="left aligned"]::before {
2022-01-13 13:00:31 +00:00
display: none;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider[class*="left aligned"]::after {
2022-01-13 13:00:31 +00:00
width: 100%;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider[class*="right aligned"]::before {
2022-01-13 13:00:31 +00:00
width: 100%;
}
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider[class*="right aligned"]::after {
2022-01-13 13:00:31 +00:00
display: none;
}
/*******************************
Variations
*******************************/
/*--------------
Hidden
---------------*/
.ui.hidden.divider {
border-color: transparent !important;
}
2022-08-05 09:25:53 +00:00
.ui.hidden.divider::before,
.ui.hidden.divider::after {
2022-01-13 13:00:31 +00:00
display: none;
}
/*--------------
Inverted
---------------*/
.ui.divider.inverted,
.ui.vertical.inverted.divider,
.ui.horizontal.inverted.divider {
color: #FFFFFF;
}
.ui.divider.inverted,
2022-08-05 09:25:53 +00:00
.ui.divider.inverted::after,
.ui.divider.inverted::before {
2022-01-13 13:00:31 +00:00
border-top-color: rgba(34, 36, 38, 0.15) !important;
border-left-color: rgba(34, 36, 38, 0.15) !important;
border-bottom-color: rgba(255, 255, 255, 0.15) !important;
border-right-color: rgba(255, 255, 255, 0.15) !important;
}
/*--------------
Fitted
---------------*/
.ui.fitted.divider {
margin: 0;
}
/*--------------
Clearing
---------------*/
.ui.clearing.divider {
clear: both;
}
/*--------------
Section
---------------*/
.ui.section.divider {
margin-top: 2rem;
margin-bottom: 2rem;
}
/*--------------
Sizes
---------------*/
.ui.divider {
font-size: 1rem;
}
.ui.mini.divider {
2022-08-05 09:25:53 +00:00
font-size: 0.78571429rem;
2022-01-13 13:00:31 +00:00
}
.ui.tiny.divider {
2022-08-05 09:25:53 +00:00
font-size: 0.85714286rem;
2022-01-13 13:00:31 +00:00
}
.ui.small.divider {
2022-08-05 09:25:53 +00:00
font-size: 0.92857143rem;
2022-01-13 13:00:31 +00:00
}
.ui.large.divider {
2022-08-05 09:25:53 +00:00
font-size: 1.14285714rem;
2022-01-13 13:00:31 +00:00
}
.ui.big.divider {
2022-08-05 09:25:53 +00:00
font-size: 1.28571429rem;
2022-01-13 13:00:31 +00:00
}
.ui.huge.divider {
2022-08-05 09:25:53 +00:00
font-size: 1.42857143rem;
2022-01-13 13:00:31 +00:00
}
.ui.massive.divider {
2022-08-05 09:25:53 +00:00
font-size: 1.71428571rem;
2022-01-13 13:00:31 +00:00
}
/*******************************
Theme Overrides
*******************************/
2022-08-05 09:25:53 +00:00
.ui.horizontal.divider::before,
.ui.horizontal.divider::after {
2022-01-13 13:00:31 +00:00
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
}
2022-02-25 15:21:56 +00:00
@media only screen and (max-width: 767px) {
2022-08-05 09:25:53 +00:00
.ui.stackable.grid .ui.vertical.divider::before,
.ui.grid .stackable.row .ui.vertical.divider::before,
.ui.stackable.grid .ui.vertical.divider::after,
.ui.grid .stackable.row .ui.vertical.divider::after {
2022-01-13 13:00:31 +00:00
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
}
}
/*******************************
Site Overrides
*******************************/