106 lines
2.2 KiB
SCSS
106 lines
2.2 KiB
SCSS
// studio - views - container
|
|
// ==========================
|
|
// The container view renders xblocks three levels deep: Page Level, Nesting Level, and Element Level.
|
|
|
|
// For containers rendered at the element level, the container is rendered in a way that allows the user to navigate to a separate container page for that container making its children populate the nesting and element levels.
|
|
|
|
// UI: container page view
|
|
body.view-container {
|
|
|
|
.mast {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.content-primary, .content-supplementary {
|
|
@include box-sizing(border-box);
|
|
float: left;
|
|
}
|
|
|
|
.content-primary {
|
|
margin-right: flex-gutter();
|
|
width: flex-grid(9,12);
|
|
}
|
|
|
|
.content-supplementary {
|
|
width: flex-grid(3,12);
|
|
|
|
label {
|
|
@extend %t-title8;
|
|
}
|
|
}
|
|
}
|
|
|
|
// UI: xblock rendering
|
|
body.view-container .content-primary{
|
|
|
|
.wrapper-xblock {
|
|
@extend %wrap-xblock;
|
|
|
|
// CASE: page level xblock rendering
|
|
&.level-page {
|
|
margin: 0;
|
|
|
|
.xblock-header {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// CASE: nesting level xblock rendering
|
|
&.level-nesting {
|
|
border: none;
|
|
padding-bottom: $baseline;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
background-color: $gray-l7;
|
|
box-shadow: 0 0 1px $shadow-d2 inset;
|
|
}
|
|
|
|
.xblock-header {
|
|
@include ui-flexbox();
|
|
margin-bottom: ($baseline/2);
|
|
border-bottom: none;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
// CASE: element level xblock rendering
|
|
&.level-element {
|
|
margin: 0 ($baseline*2) $baseline ($baseline*2);
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
border-color: $blue;
|
|
}
|
|
|
|
.xblock-header {
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid $gray-l4;
|
|
background-color: $gray-l6;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.xblock-render {
|
|
margin: $baseline;
|
|
}
|
|
|
|
// STATE: xBlock containers styled as rows.
|
|
&.xblock-type-container {
|
|
|
|
.xblock-header {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
border-radius: ($baseline/5);
|
|
}
|
|
|
|
.xblock-render {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|