@charset "utf-8"; /* > SKIN CSS: START ***********************************************************************************************************************/ /**************************************************************************************************************/ /* ******** ******** ******** */ /* >> NOTES: START ***************************************************************************************************************/ /* # About Skins 1 to 1 overrides, modifiers, decorators, and independents ## Modifiers Ex: .panel is modified with .e9-panel--fat-border ## Decorators Decorate .e9-bs-panel__star-icon { ... } The two underscores indicate that the element right of the two underscores are nested subcomponents of the element to the left of the underscore. Like this:
This means, the subcomponents are coupled with the parent component. The subcomponents can’t be used within another component. ## Independents These are just stand alone styles, not tied to anything. */ /* TOC: - SKIN CSS - - NOTES - GENERAL GLOBAL DEFAULTS */ /* NOTES: END ***************************************************************************************************************/ /* ******** ******** ******** */ /* >> GENERAL GLOBAL DEFAULTS: START ***************************************************************************************************************/ .e9-e9-simple-scaffol-skin {} .e9-e9-simple-scaffol-skin .ss-scaffolding { /* table-layout: fixed; */ } /* GENERAL GLOBAL DEFAULTS: END ***************************************************************************************************************/ /* ******** ******** ******** */ /* > SIMPLE SCAFFOL: START ***********************************************************************************************************************/ /* # Notes and warnings described at the bottom of this section */ /* # Component: ss-scaffolding */ /* Generally, always used with either --fat-stroke, --regular-stroke, or --pin-stroke, modifier. */ .ss-scaffolding { display:table; width:100%; height:100%; background-clip:padding-box; } .ss-scaffolding > .row { display:table-row; } .ss-scaffolding > .row::before, .ss-scaffolding > .row::after { content:initial; } .ss-scaffolding > .row > [class^="col-"], .ss-scaffolding > .row > [class^=" col-"] { display:table-cell; padding:15px; vertical-align:top; text-align:left; float:none; height:100%; background-clip:padding-box; background-color:transparent; } /* ## Open celled modifier */ /* Create a parenting header out a dark shaded scaffold cell. (Note: Light shaded scaffolds don't need a modifier to create a parenting header.) */ .ss-scaffolding > .row > .ss-scaffolding--open-celled { padding:0; background-clip:padding-box; background-color:rgba(0, 0, 0, .04); } /* ## Stroke modifiers */ /* ### Fat-stroke modifier */ .ss-scaffolding--fat-stroke { border-collapse:separate; } .ss-scaffolding--fat-stroke > .row > [class^="col-"], .ss-scaffolding--fat-stroke > .row > [class^=" col-"] { border-width:30px; border-style:solid; border-color:rgba(0, 0, 0, .04); background-color:rgba(0, 0, 0, .04); } /* Remove top border */ .ss-scaffolding--fat-stroke > .row + .row > [class^="col-"], .ss-scaffolding--fat-stroke > .row + .row > [class^=" col-"] { border-top-width:0; } /* Remove left border */ .ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^="col-"] { border-left-width:0; } /* ### Chunky-stroke modifier */ .ss-scaffolding--chunky-stroke { border-collapse:separate; } .ss-scaffolding--chunky-stroke > .row > [class^="col-"], .ss-scaffolding--chunky-stroke > .row > [class^=" col-"] { border-width:15px; border-style:solid; border-color:rgba(0, 0, 0, .04); background-color:rgba(0, 0, 0, .04); } /* Remove top border */ .ss-scaffolding--chunky-stroke > .row + .row > [class^="col-"], .ss-scaffolding--chunky-stroke > .row + .row > [class^=" col-"] { border-top-width:0; } /* Remove left border */ .ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^="col-"] { border-left-width:0; } /* ### Regular-stroke modifier */ .ss-scaffolding--regular-stroke { border-collapse:separate; } .ss-scaffolding--regular-stroke > .row > [class^="col-"], .ss-scaffolding--regular-stroke > .row > [class^=" col-"] { border-width:8px; border-style:solid; border-color:rgba(0,0,0,.04); background-color:rgba(0, 0, 0, .04); } /* Remove top border */ .ss-scaffolding--regular-stroke > .row + .row > [class^="col-"], .ss-scaffolding--regular-stroke > .row + .row > [class^=" col-"] { border-top-width:0; } /* Remove left border */ .ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^="col-"] { border-left-width:0; } /* ### Thin-stroke modifier */ .ss-scaffolding--thin-stroke { border-collapse:separate; } .ss-scaffolding--thin-stroke > .row > [class^="col-"], .ss-scaffolding--thin-stroke > .row > [class^=" col-"] { border-width:2px; border-style:solid; border-color:rgba(0,0,0,.04); background-color:rgba(0, 0, 0, .04); } /* Remove top border */ .ss-scaffolding--thin-stroke > .row + .row > [class^="col-"], .ss-scaffolding--thin-stroke > .row + .row > [class^=" col-"] { border-top-width:0; } /* Remove left border */ .ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-left-width:0; } /* ### Pin-stroke modifier */ .ss-scaffolding--pin-stroke { border-collapse:separate; } .ss-scaffolding--pin-stroke > .row > [class^="col-"], .ss-scaffolding--pin-stroke > .row > [class^=" col-"] { border-width:1px; border-style:solid; border-color:rgba(0,0,0,.04); } /* Remove top border */ .ss-scaffolding--pin-stroke > .row + .row > [class^="col-"], .ss-scaffolding--pin-stroke > .row + .row > [class^=" col-"] { border-top-width:0; } /* Remove left border */ .ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-left-width:0; } /* ## Transparent background modifier */ /* Used when just griding things out. */ .ss-scaffolding--transparent-bg > .row > [class^="col-"], .ss-scaffolding--transparent-bg > .row > [class^=" col-"] { background-color:transparent; } /* ## Removed perimeter modifiers */ /* Used when nesting scaffolds, so that perimeter borders do not double up. */ /* ### Fat-stroke perimeter modifier */ .ss-scaffolding--removed-fat-perimeter > .row > [class^="col-"], .ss-scaffolding--removed-fat-perimeter > .row > [class^=" col-"] { border-width:0; } /* Add top border */ .ss-scaffolding--removed-fat-perimeter > .row + .row > [class^="col-"], .ss-scaffolding--removed-fat-perimeter > .row + .row > [class^=" col-"] { border-top-width:30px; } /* Add left border */ .ss-scaffolding--removed-fat-perimeter > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--removed-fat-perimeter > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--removed-fat-perimeter > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--removed-fat-perimeter > .row > [class^=" col-"] + [class^="col-"] { border-left-width:30px; } /* ### Chunky-stroke perimeter modifier */ .ss-scaffolding--removed-chunky-perimeter > .row > [class^="col-"], .ss-scaffolding--removed-chunky-perimeter > .row > [class^=" col-"] { border-width:0; } /* Add top border */ .ss-scaffolding--removed-chunky-perimeter > .row + .row > [class^="col-"], .ss-scaffolding--removed-chunky-perimeter > .row + .row > [class^=" col-"] { border-top-width:15px; } /* Add left border */ .ss-scaffolding--removed-chunky-perimeter > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--removed-chunky-perimeter > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--removed-chunky-perimeter > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--removed-chunky-perimeter > .row > [class^=" col-"] + [class^="col-"] { border-left-width:15px; } /* ### Regular-stroke perimeter modifier */ .ss-scaffolding--removed-regular-perimeter > .row > [class^="col-"], .ss-scaffolding--removed-regular-perimeter > .row > [class^=" col-"] { border-width:0; } /* Add top border */ .ss-scaffolding--removed-regular-perimeter > .row + .row > [class^="col-"], .ss-scaffolding--removed-regular-perimeter > .row + .row > [class^=" col-"] { border-top-width:8px; } /* Add left border */ .ss-scaffolding--removed-regular-perimeter > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--removed-regular-perimeter > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--removed-regular-perimeter > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--removed-regular-perimeter > .row > [class^=" col-"] + [class^="col-"] { border-left-width:8px; } /* ### Thin-stroke perimeter modifier */ .ss-scaffolding--removed-thin-perimeter > .row > [class^="col-"], .ss-scaffolding--removed-thin-perimeter > .row > [class^=" col-"] { border-width:0; } /* Add top border */ .ss-scaffolding--removed-thin-perimeter > .row + .row > [class^="col-"], .ss-scaffolding--removed-thin-perimeter > .row + .row > [class^=" col-"] { border-top-width:2px; } /* Add left border */ .ss-scaffolding--removed-thin-perimeter > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--removed-thin-perimeter > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--removed-thin-perimeter > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--removed-thin-perimeter > .row > [class^=" col-"] + [class^="col-"] { border-left-width:2px; } /* ### Pin-stroke perimeter modifier */ .ss-scaffolding--removed-pin-perimeter > .row > [class^="col-"], .ss-scaffolding--removed-pin-perimeter > .row > [class^=" col-"] { border-width:0; } /* Add top border */ .ss-scaffolding--removed-pin-perimeter > .row + .row > [class^="col-"], .ss-scaffolding--removed-pin-perimeter > .row + .row > [class^=" col-"] { border-top-width:1px; } /* Add left border */ .ss-scaffolding--removed-pin-perimeter > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--removed-pin-perimeter > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--removed-pin-perimeter > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--removed-pin-perimeter > .row > [class^=" col-"] + [class^="col-"] { border-left-width:1px; } /* */ /* ***************** */ /* # Auto height on Simple Scaffol */ .ss-scaffolding--auto-height, .ss-scaffolding--auto-height > .row > [class^="col-"], .ss-scaffolding--auto-height > .row > [class^=" col-"] { height:auto !important; } /* # Modifier to make a transparent grid. Used in conjuction with stroke modifier, eg. ss-scaffolding--fat-stroke plus ss-scaffolding--transparent-stroke */ .ss-scaffolding.ss-scaffolding--transparent-stroke > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--transparent-stroke > .row > [class^=" col-"] { border-color:rgba(0, 0, 0,0); /*padding:0;*/ } .ss-scaffolding.ss-scaffolding--white-bg > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--white-bg > .row > [class^=" col-"] { background-color:#ffffff; } .ss-scaffolding.ss-scaffolding--fat-padding > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--fat-padding > .row > [class^=" col-"] { padding:30px; } .ss-scaffolding.ss-scaffolding--chunky-padding > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--chunky-padding > .row > [class^=" col-"] { padding:15px; } .ss-scaffolding.ss-scaffolding--regular-padding > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--regular-padding > .row > [class^=" col-"] { padding:8px; } .ss-scaffolding.ss-scaffolding--thin-padding > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--thin-padding > .row > [class^=" col-"] { padding:2px; } .ss-scaffolding.ss-scaffolding--pin-padding > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--pin-padding > .row > [class^=" col-"] { padding:1px; } .ss-scaffolding.e9-e9-ss-scaffolding--no-padding > .row > [class^="col-"], .ss-scaffolding.e9-e9-ss-scaffolding--no-padding > .row > [class^=" col-"] { padding:0; } /* # Darken modifier for Simple Scaffol strokes */ .ss-scaffolding.ss-scaffolding--dark-stroke > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--dark-stroke > .row > [class^=" col-"] { border-color:rgba(0,0,0,.08); } .ss-scaffolding.ss-scaffolding--darker-stroke > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--darker-stroke > .row > [class^=" col-"] { border-color:rgba(0,0,0,.15); } .ss-scaffolding.ss-scaffolding--darkest-stroke > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--darkest-stroke > .row > [class^=" col-"] { border-color:rgba(0,0,0,.3); } /* # Darken modifier for Simple Scaffol strokes */ .ss-scaffolding.ss-scaffolding--dark-bg > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--dark-bg > .row > [class^=" col-"] { background-color:rgba(0, 0, 0, .08); } .ss-scaffolding.ss-scaffolding--darker-bg > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--darker-bg > .row > [class^=" col-"] { background-color:rgba(0, 0, 0, .15); } .ss-scaffolding.ss-scaffolding--darkest-bg > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--darkest-bg > .row > [class^=" col-"] { background-color:rgba(0, 0, 0, .3); } /* ***************** */ /* ## Responsive modifiers */ /* ### Modifier for "with perimeter" scaffolding */ @media (max-width: 769px) { /* Basic shared styles */ .ss-scaffolding.ss-scaffolding--responsive-with-perimeter > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--responsive-with-perimeter > .row > [class^=" col-"] { display:block; float:left; /*border-width:0;*/ width:100%; } /* Fat-stroke: Add bottom and side strokes */ .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^="col-"] { border-bottom-width:30px; border-left-width:30px; border-right-width:30px; border-top-width:0; } /* Chunky-stroke: Add bottom and side strokes */ .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^="col-"] { border-bottom-width:15px; border-left-width:15px; border-right-width:15px; border-top-width:0; } /* Regular-stroke: Add bottom and side strokes */ .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^="col-"] { border-bottom-width:8px; border-left-width:8px; border-right-width:8px; border-top-width:0; } /* Thin-stroke: Add bottom and side strokes */ .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-bottom-width:2px; border-left-width:2px; border-right-width:2px; border-top-width:0; } /* Pin-stroke: Add bottom and side strokes */ .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-with-perimeter.ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-bottom-width:1px; border-left-width:1px; border-right-width:1px; border-top-width:0; } } /* ### Modifier for "without perimeter" scaffolding */ @media (max-width: 769px) { /* Basic shared styles */ .ss-scaffolding.ss-scaffolding--responsive-without-perimeter > .row > [class^="col-"], .ss-scaffolding.ss-scaffolding--responsive-without-perimeter > .row > [class^=" col-"] { display:block; float:left; border-width:0; width:100%; } /* Fat-stroke: Add top strokes */ .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--fat-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--fat-stroke > .row > [class^=" col-"] + [class^="col-"] { border-top-width:30px; } /* Chunky-stroke: Add top strokes */ .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--chunky-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--chunky-stroke > .row > [class^=" col-"] + [class^="col-"] { border-top-width:15px; } /* Regular-stroke: Add top strokes */ .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--regular-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--regular-stroke > .row > [class^=" col-"] + [class^="col-"] { border-top-width:8px; } /* Thin-stroke: Add top strokes */ .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--thin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--thin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-top-width:2px; } /* Pin-stroke: Add top strokes */ .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^="col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--pin-stroke > .row > [class^="col-"] + [class^=" col-"], .ss-scaffolding--responsive-without-perimeter.ss-scaffolding--pin-stroke > .row > [class^=" col-"] + [class^="col-"] { border-top-width:1px; } } /* # Warnings */ /* - IE has problems with applying 100% height to the scaffolding. In particular layouts, this is less than desirable. Possible solutions could be: - * { height:100%; } // This works, but causes havoc all elsewhere. - Give fixed heights to the scaffolding whenever needed. */ /* SIMPLE SCAFFOL: END ***********************************************************************************************************************/ /* SKIN CSS: END ***********************************************************************************************************************/