541d20ef83
This commit implements STUD-1490, allowing creation of components on the container page. It also enables the delete and duplicate buttons now that new content can be created that would benefit. Note that it also creates shared functionality for adding components, and refactors the unit page to use it too.
88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
// studio - elements - xblock rendering
|
|
// ==========================
|
|
|
|
// extends - UI archetypes - xblock rendering
|
|
%wrap-xblock {
|
|
margin: ($baseline/2);
|
|
border: 1px solid $gray-l4;
|
|
border-radius: ($baseline/5);
|
|
background: $white;
|
|
box-shadow: 0px 1px 1px $shadow-l1;
|
|
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 1px $shadow;
|
|
}
|
|
|
|
// UI: xblock header
|
|
.xblock-header {
|
|
@include box-sizing(border-box);
|
|
@include ui-flexbox();
|
|
@extend %ui-align-center-flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid $gray-l4;
|
|
border-radius: ($baseline/5) ($baseline/5) 0 0;
|
|
min-height: ($baseline*2.5);
|
|
background-color: $gray-l6;
|
|
padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline);
|
|
|
|
.header-details {
|
|
@extend %cont-truncated;
|
|
@extend %ui-justify-left-flex;
|
|
@include ui-flexbox();
|
|
width: flex-grid(6,12);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.header-actions {
|
|
@include ui-flexbox();
|
|
@extend %ui-justify-right-flex;
|
|
width: flex-grid(6,12);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// UI: xblocks - calls-to-action
|
|
.wrapper-xblock .header-actions {
|
|
@extend %actions-header;
|
|
|
|
.action-button [class^="icon-"] {
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
// UI: xblock is collapsible
|
|
.wrapper-xblock.is-collapsible,
|
|
.wrapper-xblock.xblock-type-container {
|
|
|
|
[class^="icon-"] {
|
|
font-style: normal;
|
|
}
|
|
|
|
.expand-collapse {
|
|
@extend %expand-collapse;
|
|
margin: 0 ($baseline/4);
|
|
height: ($baseline*1.25);
|
|
width: $baseline;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.action-view {
|
|
|
|
.action-button {
|
|
transition: none;
|
|
}
|
|
|
|
.action-button-text {
|
|
padding-right: ($baseline/5);
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|