Commit ee42902e by Frances Botsford Committed by Andy Armstrong

removed edit-dialog and uploads css, changed component edit icon to pencil, small css fixes

parent 636fa190
// 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;
}
}
}
}
......@@ -60,6 +60,7 @@ textarea.text {
form {
input[type=file] {
@include font-size(14);
line-height: 1;
}
......
......@@ -104,7 +104,7 @@
}
// small modals - editors and dialogs
// small modals - quick editors and dialogs
.modal-sm {
width: 30%;
min-width: ($baseline*15);
......@@ -184,6 +184,7 @@
// component editor
.modal-window {
.wrapper-comp-settings {
.list-input {
......
// studio - elements - uploads
// ========================
body.course.feature-upload {
// dialog
.wrapper-dialog {
@extend %ui-depth5;
@include transition(all 0.05s 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);
box-shadow: 0px 0px 7px $shadow-d1;
border-radius: ($baseline/5);
background-color: $gray-l4;
display: inline-block;
vertical-align: middle;
width: $baseline*23;
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;
}
input[type="file"] {
@extend %t-copy-sub2;
}
.status-upload {
height: 30px;
margin-top: $baseline;
.wrapper-progress {
box-shadow: inset 0 0 3px $shadow-d1;
display: block;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
padding: 1px 8px 2px 8px;
height: 25px;
progress {
display: inline-block;
vertical-align: middle;
width: 100%;
border: none;
border-radius: ($baseline*0.75);
background-color: $gray-l5;
&::-webkit-progress-bar {
background-color: transparent;
border-radius: ($baseline*0.75);
}
&::-webkit-progress-value {
background-color: $pink;
border-radius: ($baseline*0.75);
}
&::-moz-progress-bar {
background-color: $pink;
border-radius: ($baseline*0.75);
}
}
}
.message-status {
@include border-top-radius(2px);
@include box-sizing(border-box);
@include font-size(14);
display: none;
border-bottom: 2px solid $yellow;
margin: 0 0 20px 0;
padding: 10px 20px;
font-weight: 500;
background: $paleYellow;
.text {
display: inline-block;
}
&.error {
border-color: $red-d2;
background: $red-l1;
color: $white;
}
&.confirm {
border-color: $green-d2;
background: $green-l1;
color: $white;
}
&.is-shown {
display: block;
}
}
}
.message-status.error {
border-color: $red-d2;
background: $red-l1;
color: $white;
}
.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;
}
}
}
}
}
}
// ====================
// js enabled
.js {
// dialog set-up
.wrapper-dialog {
visibility: hidden;
pointer-events: none;
.dialog {
opacity: 0;
}
}
// dialog showing/hiding
&.dialog-is-shown {
.wrapper-dialog {
-webkit-filter: blur(2px) grayscale(25%);
filter: blur(2px) grayscale(25%);
}
.wrapper-dialog.is-shown {
visibility: visible;
pointer-events: auto;
.dialog {
opacity: 1.0;
}
}
}
}
}
......@@ -37,6 +37,4 @@
@import 'elements/system-help'; // help UI
@import 'elements/modal'; // interstitial UI, dialogs, modal windows
@import 'elements/vendor'; // overrides to vendor-provided styling
@import 'elements/uploads';
@import 'elements/edit_dialog';
@import 'elements/modal-window';
......@@ -111,13 +111,13 @@ body.view-container .content-primary {
// CASE: nesting level xblock rendering
&.level-nesting {
@include transition(all $tmg-f2 linear 0s);
border: none;
padding-bottom: $baseline;
box-shadow: none;
&:hover {
@include transition(all $tmg-f2 linear 0s);
background-color: $gray-l7;
background-color: $gray-l6;
box-shadow: 0 0 1px $shadow-d2 inset;
}
......@@ -142,10 +142,10 @@ body.view-container .content-primary {
// CASE: element level xblock rendering
&.level-element {
@include transition(all $tmg-f2 linear 0s);
box-shadow: none;
&:hover {
@include transition(all $tmg-f2 linear 0s);
border-color: $blue;
}
......
......@@ -517,9 +517,10 @@
.field {
float: left;
margin-right: ($baseline/2);
margin: 0 ($baseline/2) ($baseline/2);
label, input {
label,
input {
display: block;
text-align: left;
}
......@@ -527,6 +528,11 @@
label {
@extend %t-copy-sub1;
margin-bottom: ($baseline/4);
font-weight: 600;
}
input[type="text"] {
@extend %t-copy-sub1;
}
}
}
......
......@@ -1342,7 +1342,6 @@ body.unit .xblock-type-container {
box-shadow: none;
&:hover {
@include transition(all $tmg-f2 linear 0s);
border-color: $blue;
.container-drag {
......@@ -1352,10 +1351,8 @@ body.unit .xblock-type-container {
}
.xblock-header {
margin-bottom: 0;
border-bottom: 0;
border-radius: ($baseline/5);
padding: ($baseline/2);
.xblock-details {
font-size: .9em;
......
......@@ -34,7 +34,7 @@
<ul class="component-actions">
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon-edit"></i>
<i class="icon-pencil"></i>
<span class="action-button-text">${_("Edit")}</span>
</a>
</li>
......
......@@ -15,7 +15,7 @@
% if not xblock_context['read_only']:
<li class="action-item action-edit">
<a href="#" class="edit-button action-button">
<i class="icon-edit"></i>
<i class="icon-pencil"></i>
<span class="action-button-text">${_("Edit")}</span>
</a>
</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment