|
|
/* * # Dividers * http://github.com/quirkyinc/semantic * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * * Released: April 17 2013 */ /******************************* Divider *******************************/ .ui.divider { margin: 1em 0em; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.8); height: 0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui.vertical.divider, .ui.horizontal.divider { position: absolute; border: none; height: 0em; margin: 0em; background-color: transparent; font-size: 0.8rem; font-weight: bold; text-align: center; text-transform: uppercase; color: rgba(0, 0, 0, 0.8); } /*-------------- Vertical ---------------*/ .vertical.ui.divider { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0% 0% 0% -3%; width: 6%; height: 50%; line-height: 0; padding: 0em; } .vertical.ui.divider:before, .vertical.ui.divider:after { position: absolute; left: 50%; content: " "; z-index: 3; border-left: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.8); width: 0%; height: 80%; } .vertical.ui.divider:before { top: -100%; } .vertical.ui.divider:after { top: auto; bottom: 0px; } /*-------------- Horizontal ---------------*/ .horizontal.ui.divider { position: relative; top: 0%; left: 0%; margin: 1rem 0rem; width: 100%; height: 1em; padding: 0em; line-height: 1; } .horizontal.ui.divider:before, .horizontal.ui.divider:after { position: absolute; content: " "; z-index: 3; width: 45%; top: 50%; height: 0%; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.8); } .horizontal.ui.divider:before { left: 0%; } .horizontal.ui.divider:after { left: auto; right: 0%; } /******************************* Variations *******************************/ /*-------------- Inverted ---------------*/ .ui.divider.inverted { color: #ffffff; } .ui.vertical.inverted.divider, .ui.horizontal.inverted.divider { color: rgba(255, 255, 255, 0.9); } .ui.divider.inverted, .ui.divider.inverted:after, .ui.divider.inverted:before { border-top-color: rgba(0, 0, 0, 0.15); border-bottom-color: rgba(255, 255, 255, 0.15); border-left-color: rgba(0, 0, 0, 0.15); border-right-color: rgba(255, 255, 255, 0.15); } /*-------------- Fitted ---------------*/ .ui.fitted.divider { margin: 0em; } /*-------------- Clearing ---------------*/ .ui.clearing.divider { clear: both; }
|