Skip to content

E
edx-platform
Commit 977d0d76 by marco
Options

cleaning up styles to use list-input, field, group, label, input, tip, etc… 

cleaning up styles to use list-input, field, group, label, input, tip, etc standards. also opted to try out initial pass at hierarchy splitting of css classes on items that repeat (li, for example)
parent d28c0b5f
Showing with 446 additions and 385 deletions
cms/static/sass/elements/_forms.scss
......@@ -124,7 +124,6 @@ code {
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
......
cms/static/sass/views/_unit.scss
......@@ -431,7 +431,7 @@ body.course.unit {
.wrapper-component-editor {
z-index: 9999;
position: relative;
background: $lightBluishGrey2;
background: $white;
}
.component-editor {
......@@ -441,476 +441,526 @@ body.course.unit {
padding: 0;
border-radius: 2px 2px 0 0;
// Edit Menu (Component Name, Mode-Editor, Mode-Settings)
h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
}
.component-edit-menu {
@include box-sizing(border-box);
padding: 15px 0 15px 20px;
top: 0;
right: 0;
border-bottom: 1px solid $gray-l2;
background-color: $blue;
color: $white;
box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset;
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
}
}
}
}
//Component Name
.component-name {
@extend .t-copy-sub1;
color: $white;
width: 50%;
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
em {
@extend .t-title-3;
color: $white;
}
}
.component-edit-header {
@include box-sizing(border-box);
padding: 15px 0 15px 20px;
top: 0;
right: 0;
border-bottom: 1px solid $gray-l2;
background-color: $blue;
color: $white;
box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset;
//Nav-Edit Modes
.nav-edit-modes {
list-style: none;
right: 0;
top: 0;
position: absolute;
padding: 10px;
//Component Name
.component-name {
@extend .t-copy-sub1;
color: $white;
width: 50%;
.mode {
display: inline-block;
em {
font-weight: 600;
color: $white;
}
}
.inactive-mode {
display: none;
}
//Nav-Edit Modes
.nav-edit-modes {
list-style: none;
right: 0;
top: 0;
position: absolute;
padding: 10px;
.active-mode {
@include blue-button;
}
.mode {
display: inline-block;
.is-set {
@include linear-gradient($blue, $blue);
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
cursor: default;
.inactive-mode {
display: none;
}
&:hover {
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
}
}
}
}
.active-mode {
@include blue-button;
}
// Editor Wrapper
.wrapper-component-editor {
//TO-DO
.is-set {
@include linear-gradient($blue, $blue);
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
cursor: default;
&:hover {
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
}
}
}
}
}
// Editor Wrapper
.wrapper-comp-editor {
//TO-DO
}
// Settings Wrapper
.wrapper-comp-settings {
//settings-list
.list-input.settings-list {
margin: 0;
padding: 0;
list-style: none;
// Settings Wrapper
.wrapper-component-settings ul{
overflow: auto;
max-height: 400px;
overflow: auto;
max-height: 400px;
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid $gray-l2;
background-color: rgba(0, 0, 0, .5);
//chrome scrollbar visibility correction
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 11px;
height: 11px;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid $gray-l2;
background-color: rgba(0, 0, 0, .5);
}
//component-setting-entry
.field.comp-setting-entry {
//margin: 0 0 $baseline 0;
background-color: $white;
padding: 20px 20px;
border-bottom: 1px solid $gray-l2;
opacity: .6;
&:last-child {
//margin-bottom: 0;
}
//no required component settings currently
&.required {
label {
//font-weight: 600;
}
label:after {
//margin-left: ($baseline/4);
//content: "*";
}
}
.settings-row {
@extend .field-group; // TO-DO ???
background-color: $white;
padding: 10px 20px;
border-bottom: 1px solid $gray-l2;
opacity: .8;
&:hover {
//TO-DO review existing patterns for hover on field
@include transition(opacity 0.25s ease-in-out);
opacity: 1;
}
&:hover {
@include transition(opacity 0.25s ease-in-out);
opacity: 1;
}
&.is-set {
opacity: 1;
background-color: $white;
//Styles for component settings which are set
&.is-set {
opacity: 1;
background-color: $white;
//setting-label
.setting-label {
//color: $blue-l1;
}
.setting-label {
color: $blue-l1;
}
//setting-input
.setting-input {
color: $blue-l1;
}
//setting-clear
.setting-clear {
//...
}
}
.setting-input {
color: $blue-l1;
}
.setting-clear {
//...
}
}
.wrapper-comp-setting{
display: inline-block;
width: 360px;
top: 0;
vertical-align: top;
}
.wrapper-setting-actions {
@extend .field;
display: inline-block;
width: 360px;
top: 0;
vertical-align: top;
}
label.setting-label {
//@extend .t-copy-sub1;
//@include transition(color, 0.15s, ease-in-out);
//margin: 0 0 ($baseline/4) 0;
//font-weight: 400;
//Setting Label - also basic 'label'
.setting-label {
@extend .t-copy-sub2;
display: inline-block;
position: relative;
left: 0;
height: 50%;
width: 120px;
text-overflow: ellipsis;
}
@extend .t-copy-sub2;
display: inline-block;
position: relative;
left: 0;
height: 50%;
width: 120px;
text-overflow: ellipsis;
//Setting Input - also basic 'field'
.setting-input {
@extend .t-copy-sub3;
@include placeholder($gray-l4);
border-radius: 2px;
padding: 6px 8px 8px;
width: 180px;
height: auto;
border: 1px solid $gray-l2;
text-overflow: ellipsis;
//&:focus {
//TO-DO
}
//&.is-focused {
// color: $blue;
//}
}
//custom styling of selectbox to look more like input boxes.
select {
border: 1px solid $gray-l4;
background: none repeat scroll #F2F2F2;
padding: 5px;
input, select {
//@include placeholder($gray-l4);
//@include font-size(16);
//@include size(100%,100%);
//padding: ($baseline/2);
&:focus {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
}
//&.long {
//}
&:active {
background-color: #FFFCF1;
}
}
//&.short {
//}
//Setting Clear Button
.setting-clear {
@include font-size(11);
color: $gray;
width: 25px;
height: 25px;
vertical-align: middle;
padding: 5px;
border-radius: 50%;
margin: 0 10px;
box-shadow: none;
text-shadow: none;
border: 1px solid $gray-l4;
&:hover {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: $blue-s3;
border: 1px solid $blue-s3;
color: $white;
}
//&.error {
// border-color: $red;
//}
&.inactive {
visibility: hidden;
}
}
//&:focus {
//Setting Tip
.setting-help {
@include font-size(12);
display: inline-block;
font-color: $gray-l6;
max-width: 50%;
vertical-align: top;
}
// + .tip {
// color: $gray;
// }
}
@extend .t-copy-sub3;
@include placeholder($gray-l4);
border-radius: 2px;
padding: 6px 8px 8px;
width: 180px;
height: auto;
border: 1px solid $gray-l2;
text-overflow: ellipsis;
}
//OLD Meta-data Styling
//TO-DO port over old styling
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
select {
border: 1px solid $gray-l4;
background: none repeat scroll #F2F2F2;
padding: 5px;
li {
margin-bottom: 10px;
&:focus {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
}
label {
display: inline-block;
margin-right: 10px;
&:active {
background-color: #FFFCF1;
}
}
h3 {
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
//input[type=others]
.action.setting-clear {
@include font-size(11);
color: $gray;
width: 25px;
height: 25px;
vertical-align: middle;
padding: 5px;
border-radius: 50%;
margin: 0 10px;
box-shadow: none;
text-shadow: none;
border: 1px solid $gray-l4;
&:hover {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: $blue-s3;
border: 1px solid $blue-s3;
color: $white;
}
&.inactive {
visibility: hidden;
}
}
h5 {
margin-bottom: 8px;
color: #fff;
font-weight: 700;
tip.setting-help {
@include font-size(12);
display: inline-block;
font-color: $gray-l6;
max-width: 50%;
vertical-align: top;
}
}
}
}
// Module Actions
// ====================
// Module Actions
// ====================
.module-actions {
@include box-shadow(inset 0 1px 1px $shadow);
padding: 0 0 10px 10px;
background-color: $gray-l4;
.module-actions {
@include box-shadow(inset 0 1px 1px $shadow);
padding: 0 0 10px 10px;
background-color: $gray-l4;
.save-button {
margin: 15px 8px 0 0;
}
}
}
.save-button {
margin: 15px 8px 0 0;
}
}
// Unit Page Sidebar
// ====================
// Editing Units from Courseware
// ====================
.unit-settings {
.window-contents {
padding: 10px 20px;
body.unit {
.component {
padding-top: 30px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
.unit-actions {
border-bottom: none;
padding-bottom: 0;
&.editing {
padding-top: 0;
}
}
}
.published-alert {
display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
// Unit Page Sidebar
// ====================
div {
margin-top: 15px;
}
}
.unit-settings {
.window-contents {
padding: 10px 20px;
}
input[type="radio"] {
margin-right: 7px;
}
.unit-actions {
border-bottom: none;
padding-bottom: 0;
}
.status {
font-size: 12px;
.published-alert {
display: none;
padding: 10px;
border: 1px solid #edbd3c;
border-radius: 3px;
background: #fbf6e1;
font-size: 14px;
line-height: 1.4;
strong {
font-weight: 700;
}
div {
margin-top: 15px;
}
}
.preview-button, .view-button {
@include white-button;
margin-bottom: 10px;
}
input[type="radio"] {
margin-right: 7px;
}
.publish-button {
@include orange-button;
}
.status {
font-size: 12px;
.delete-button {
@include blue-button;
strong {
font-weight: 700;
}
}
.delete-draft {
display: inline-block;
}
.preview-button, .view-button {
@include white-button;
margin-bottom: 10px;
}
.delete-button,
.preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
.publish-button {
@include orange-button;
}
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
.delete-button {
@include blue-button;
}
.window-contents {
display: none;
}
}
.delete-draft {
display: inline-block;
}
ol {
border: 1px solid #ced2db;
.delete-button,
.preview-button,
.publish-button,
.view-button {
font-size: 11px;
margin-top: 10px;
padding: 6px 15px 8px;
}
}
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
.unit-history {
&.collapsed {
h4 {
border-bottom: none;
border-radius: 3px;
}
&:hover {
background: #fffcf1;
.window-contents {
display: none;
}
}
.item-actions {
display: block;
}
}
ol {
border: 1px solid #ced2db;
&.checked {
background: #d1dae3;
}
li {
display: block;
padding: 6px 8px 8px 10px;
background: #edf1f5;
font-size: 12px;
&:hover {
background: #fffcf1;
.item-actions {
display: none;
display: block;
}
}
input[type="radio"] {
margin-right: 7px;
}
&.checked {
background: #d1dae3;
}
.item-actions {
display: none;
}
input[type="radio"] {
margin-right: 7px;
}
}
}
}
.unit-location {
.url {
@include box-shadow(none);
width: 100%;
margin-bottom: 10px;
}
.unit-location {
.url {
@include box-shadow(none);
width: 100%;
margin-bottom: 10px;
}
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.window-contents > ol {
@include tree-view;
.window-contents > ol {
@include tree-view;
.section-item {
@include box-sizing(border-box);
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
ol {
.section-item {
@include box-sizing(border-box);
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 20px;
}
ol {
.section-item {
padding-left: 20px;
}
.new-unit-item {
margin-left: 20px;
}
.new-unit-item {
margin-left: 20px;
}
}
ol ol {
.section-item {
padding-left: 34px;
}
ol ol {
.section-item {
padding-left: 34px;
}
.new-unit-item {
margin: 0 0 10px 41px;
}
.new-unit-item {
margin: 0 0 10px 41px;
}
}
}
}
.edit-state-draft {
.visibility,
.edit-draft-message,
.view-button {
display: none;
}
.edit-state-draft {
.visibility,
.published-alert {
display: block;
}
.edit-draft-message,
.view-button {
display: none;
}
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.published-alert {
display: block;
}
}
.published-alert {
display: block;
}
.edit-state-public {
.delete-draft,
.component-actions,
.new-component-item,
.editing-draft-alert,
.publish-draft-message,
.preview-button {
display: none;
}
.drag-handle {
display: none !important;
}
.published-alert {
display: block;
}
.edit-state-private {
.delete-draft,
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
display: none;
}
.drag-handle {
display: none !important;
}
}
// Editing Units from Courseware
// ====================
.edit-state-private {
.delete-draft,
.publish-draft,
.editing-draft-alert,
.create-draft,
.view-button {
display: none;
}
}
body.unit {
.component {
padding-top: 30px;
//OLD Meta-data Styling
//TO-DO port over old styling
.metadata_edit {
margin-bottom: 20px;
font-size: 13px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 100%;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
li {
margin-bottom: 10px;
}
&.editing {
padding-top: 0;
}
label {
display: inline-block;
margin-right: 10px;
}
}
}
\ No newline at end of file
cms/templates/component.html
<div class="wrapper wrapper-component-editor">
<div class="component-editor">
<div class="component-edit-menu">
<div class="component-edit-header">
<span class="component-name"><em>Editing:</em> Name of Component</span>
<!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes">
......@@ -17,41 +17,41 @@
</div> <!-- Editor Header -->
<div class="component-edit-modes">
<div class="module-editor wrapper-component-editor" id="editor-tab">
<div class="module-editor wrapper-comp-editor" id="editor-tab">
<!--${editor}-->
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</div> <!-- Editor Wrapper-->
<div class="wrapper-component-settings" id="settings-tab">
<div class="wrapper-comp-settings" id="settings-tab">
<ul class="list-input settings-list">
<!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value-->
<li class="settings-row is-set">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-id-1">Display Name</label>
<input class="setting-input" type="text" id="setting-id-1" value="Name of Component"/>
<li class="field comp-setting-entry is-set">
<div class="wrapper-comp-setting">
<label class="label setting-label" for="setting-id-1">Display Name</label>
<input class="input setting-input" type="text" id="setting-id-1" value="Name of Component"/>
<!--button clickable if is-set -->
<button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<button class="action setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="setting-help">helpstring</span>
<span class="tip setting-help">helpstring</span>
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="settings-row">
<li class="field comp-setting-entry">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-id-2">Setting 2</label>
<input class="setting-input" type="text" id="setting-id-2"/>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<label class="label setting-label" for="setting-id-2">Setting 2</label>
<input class="input setting-input" type="text" id="setting-id-2"/>
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span>
<span class="tip setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span>
</li>
<!--% showing dropdown example -->
<li class="settings-row">
<li class="field comp-setting-entry">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-displayName">Display Name</label>
<select class="setting-input" id="setting-displayName" name="type">
<label class="label setting-label" for="setting-displayName">Display Name</label>
<select class="input setting-input" id="setting-displayName" name="type">
<!--% for all in available options -->
<option value="displayName-closed" selected>Closed</option>
<!--in case value already defaulted -->
......@@ -59,11 +59,22 @@
<option value="displayName-open">Open</option>
<option value="displayName-available">Available</option>
</select>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="setting-help">helpstring</span>
<span class="tip setting-help">helpstring</span>
</li>
<li class="field comp-setting-entry is-set">
<div class="wrapper-setting-actions">
<label class="label setting-label" for="setting-id-4">Display Name</label>
<input class="input setting-input" type="text" id="setting-id-4" value="Name of Component"/>
<!--button clickable if is-set -->
<button class="action setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button>
</div>
<span class="tip setting-help">helpstring</span>
</li>
</ul>
......
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