130 lines
2.5 KiB
SCSS
130 lines
2.5 KiB
SCSS
// studio - elements - editing dialog
|
|
// ========================
|
|
|
|
body.course.feature-edit-dialog {
|
|
|
|
// dialog
|
|
.wrapper-dialog {
|
|
@extend %ui-depth5;
|
|
@include transition(all $tmg-f2 ease-in-out);
|
|
position: fixed;
|
|
top: 0;
|
|
background: $black-t2;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
margin-right: -0.25em; /* Adjusts for spacing */
|
|
}
|
|
|
|
.dialog {
|
|
@include box-sizing(border-box);
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: $baseline*23;
|
|
box-shadow: 0px 0px 7px $shadow-d1;
|
|
border-radius: ($baseline/5);
|
|
background-color: $gray-l4;
|
|
padding: 7px;
|
|
text-align: left;
|
|
|
|
.title {
|
|
@extend %t-title5;
|
|
margin-bottom: ($baseline/2);
|
|
font-weight: 600;
|
|
color: $black;
|
|
}
|
|
|
|
.message {
|
|
@extend %t-copy-sub2;
|
|
color: $gray;
|
|
}
|
|
|
|
.error {
|
|
color: $white;
|
|
}
|
|
|
|
form {
|
|
padding: 0;
|
|
|
|
.form-content {
|
|
box-shadow: 0 0 3px $shadow-d1;
|
|
padding: ($baseline*1.5);
|
|
background-color: $white;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: ($baseline/2);
|
|
}
|
|
|
|
label {
|
|
@include font-size(14);
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"] {
|
|
@extend %t-copy-sub2;
|
|
}
|
|
|
|
.actions {
|
|
padding: ($baseline*0.75) $baseline ($baseline/2) $baseline;
|
|
|
|
.action-item {
|
|
@extend %t-action4;
|
|
display: inline-block;
|
|
margin-right: ($baseline*0.75);
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button();
|
|
@include font-size(12); // needed due to bad button mixins for now
|
|
border-color: $blue-d1;
|
|
color: $white;
|
|
}
|
|
|
|
a {
|
|
color: $blue;
|
|
|
|
&:hover {
|
|
color: $blue-s2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// dialog set-up
|
|
.wrapper-dialog {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
|
|
.dialog {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
// dialog showing/hiding
|
|
&.dialog-is-shown {
|
|
|
|
.wrapper-dialog.is-shown {
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
|
|
.dialog {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
}
|