// black alpha = 90% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGB4BsQogJEGggAKvQSEMnZimwAAAABJRU5ErkJggg==) repeat; // black alpha = 70% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==) repeat; // black alpha = 50% // background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==) repeat;
// Core functions @import '../../functions';
// Core variables and mixins @import '../../variables'; @import '../../mixins';
// The Grid @import '../../grid';
@if $compile-grid {
@include grid-debug();
}
.debug-cross-section {
.container-fixed, .container-liquid, &.container-fixed, &.container-liquid { background: url('../images/bu-cross-section.png'); background-size: building-units(2) building-units(2); }
}
.debug-bu-overlay {
background-size: building-units(2) building-units(2); position: absolute; z-index: 99997; top: 0; left: 0; right: 0; pointer-events: none; background: url('../images/bu-cross-section-alpha.png'); opacity: .25;
}
debug {
.media-frame, &.media-frame { background: #ddf; }
}
// scss-lint:disable IdSelector debug-thingy {
position: fixed; display: block; // black alpha = 70% background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat; border: 1px solid #000; border-color: rgba(0, 0, 0, .2); top: 12px; right: 12px; padding: 12px; border-radius: 6px; font-size: .75em; color: #fff; z-index: 99999; min-width: 100px; .fa { display: inline-block; width: 16px; } .color-swatch { display: inline-table; width: building-units(2); height: building-units(2); border: 2px solid rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); margin: 7px 0; outline: inset 1px #ccc; .fa { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } }
}
debug-thingy .size-info {
font-size: 10px;
}
debug-thingy .icon-cancel {
position: absolute; top: 2px; right: 2px; font-size: 8px;
}
debug-thingy .size-o-tron {
position: relative; background: #000; width: 100%; height: 2px; margin: 10px 0 20px; cursor: move;
}
.size-o-tron .screensize {
position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: #666; margin-bottom: 0;
}
debug-thingy .size-o-tron .size-bar {
background: #0ca1dc; width: 0; height: 2px;
}
debug-thingy .size-o-tron .breakpoint {
background: #eee; position: absolute; top: 0; left: 0; width: 1px; height: 2px;
} // scss-lint:enable IdSelector
.debug-breakpoint-thingy {
position: fixed; z-index: 99998; top: 0; left: 0; width: 0; height: 100%; border-left: 1px dashed #0ca1dc; border-color: rgba(12, 161, 220, .75);
}
.debug-image-overlay {
position: absolute; background-repeat: no-repeat; z-index: 99996; top: 0; left: 0; width: 100%; min-height: 100%; opacity: .25; pointer-events: none; &.fixed { position: fixed; } &.align-left { background-position: top left; text-align: left; } &.align-center { background-position: top center; text-align: center; } &.align-right { background-position: top right; text-align: right; } // results in a 50% grey, if html and overlay are equal. // contrasts though aren't as good as with mixed-blend-mode &.inverted { opacity: .5; // most prefixes not supported today, but it won't hurt and the time may come. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); } // Currently only enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags // Will be featured in Safari 8 and Firefox 32 &.mixed { opacity: 1; // prefixes not supported today, but it won't hurt and the time may come. -webkit-mix-blend-mode: difference; -moz-mix-blend-mode: difference; -o-mix-blend-mode: difference; -ms-mix-blend-mode: difference; mix-blend-mode: difference; }
}
.debug-breakpoint-thingy:before, .debug-breakpoint-thingy:after {
content: ' '; // black alpha = 50% background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==') repeat; color: #fff; padding: .1em .3em;
}
.debug-breakpoint-thingy:before {
text-align: right;
}
.debug-image-overlay-settings {
border-top: 1px solid #ccc; margin: building-units(1) 0 0; //0; padding: building-units(1) 0 0; //0; button { background: #000; } .debug-col { width: 170px; span.icon { display: inline-block; width: 28px; } select, input { width: 116px; color: #666; } input[type="number"] { width: 40px; } input[type="range"] { vertical-align: middle; } }
}
.measure-rect {
.measure-rect-background, .measure-rect-thumb, .measure-rect-border { position: fixed; display: block; z-index: 99998; } .measure-rect-background { bottom: 0; left: 0; right: 0; top: 0; // black alpha = 70% background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat; } .measure-rect-thumb { left: 100px; top: 100px; width: 20px; height: 20px; border: 1px solid #0090c4; // blue alpha = 50% background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkmHi0ngENMNJAEAAnuAkvTPFU7wAAAABJRU5ErkJggg==') repeat; &.top.left { cursor: nw-resize; } &.top.right { cursor: ne-resize; } &.bottom.left { cursor: sw-resize; } &.bottom.right { cursor: se-resize; } } .measure-rect-border { outline: 2px solid #0090c4; cursor: move; }
}
.noselect {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.mouse-move-event-target-dummy {
display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; min-width: 100%;
}
.cursor-crosshair {
cursor: crosshair !important;
}
.debug-iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border: 0; box-sizing: border-box;
}
.debug-scroll-pane {
position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #333; margin: 0; padding: 0; box-sizing: content-box; overflow: auto;
}
.debug-scroll-pane-thumb {
position: fixed; background: #fff; margin: 0; padding: 0; width: 20px; height: 20px; border: 2px solid #000;
}
// scss-lint:disable IdSelector measure-rect-info {
display: none;
} // scss-lint:enable IdSelector
.breakpoint-thingy-wrapper {
position: relative; width: 100%; height: 100%; background: #f00;
}
.debug-image-overlay-wrapper {
overflow: hidden;
}
@include create-emphased-classes($grid-settings-size-exclusive);
.visible-on, .hidden-on {
margin-bottom: 12px; span { display: block; padding: 10px 12px; text-align: center; border-radius: 4px; } .hidden-xs, .hidden-s, .hidden-m, .hidden-l, .hidden-xl { color: #999; border: 1px solid #ddd; background-color: #eee; } .visible-xs-block, .visible-s-block, .visible-m-block, .visible-l-block, .visible-xl-block { color: #468847; border: 1px solid #d6e9c6; background-color: #dff0d8; }
}