Skip to content

E
edx-platform
Commit d28c0b5f by marco
Options

cleaned up styling, synced up partially to existing standards for forms, fonts,… 

cleaned up styling, synced up partially to existing standards for forms, fonts, colors, etc; currently open select box issue on chrome
parent 38abc016
Showing with 95 additions and 43 deletions
cms/static/sass/views/_unit.scss
...@@ -445,20 +445,23 @@ body.course.unit { ...@@ -445,20 +445,23 @@ body.course.unit {
.component-edit-menu { .component-edit-menu {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 15px; padding: 15px 0 15px 20px;
top: 0; top: 0;
right: 0; right: 0;
border-bottom: 1px solid $gray-l2; border-bottom: 1px solid $gray-l2;
background-color: $lightBluishGrey2; background-color: $blue;
color: $white;
box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset; box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset;
//Component Name //Component Name
.component-name { .component-name {
@extend .t-copy-sub1;
color: $white;
width: 50%; width: 50%;
@include font-size(14);
em { em {
font-weight: 700; @extend .t-title-3;
color: $white;
} }
} }
...@@ -478,14 +481,18 @@ body.course.unit { ...@@ -478,14 +481,18 @@ body.course.unit {
} }
.active-mode { .active-mode {
@include white-button; @include blue-button;
}
&.is-set { .is-set {
background-color: $white; @include linear-gradient($blue, $blue);
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
cursor: default; cursor: default;
linear-gradient: none;
@include box-shadow(0 0 1px 1px rgba(240, 240, 240, .1) inset);
&:hover {
box-shadow: inset 0 0 2px $shadow;
background-color: $blue;
} }
} }
} }
...@@ -493,16 +500,18 @@ body.course.unit { ...@@ -493,16 +500,18 @@ body.course.unit {
} }
// Editor Wrapper // Editor Wrapper
.editor-wrapper{ .wrapper-component-editor {
//TO-DO //TO-DO
} }
// Settings Wrapper // Settings Wrapper
.settings-wrapper{ .wrapper-component-settings ul{
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
//TO-DO browser testing for scrollbar, especially styles below.
//chrome scrollbar visibility correction
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
width: 11px; width: 11px;
...@@ -511,57 +520,92 @@ body.course.unit { ...@@ -511,57 +520,92 @@ body.course.unit {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 8px; border-radius: 8px;
border: 2px solid $lightBluishGrey2; border: 2px solid $gray-l2;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
} }
.settings-row { .settings-row {
// general row sizing stuff @extend .field-group; // TO-DO ???
background-color: $white; background-color: $white;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid $gray-l2; border-bottom: 1px solid $gray-l2;
opacity: .8; opacity: .8;
&:hover { &:hover {
@include transition(opacity 0.25s ease-in-out);
opacity: 1; opacity: 1;
} }
//Styles for component settings which are set
&.is-set { &.is-set {
opacity: 1; opacity: 1;
background-color: $white; background-color: $white;
font-weight: 200;
.setting-label {
color: $blue-l1;
}
.setting-input {
color: $blue-l1;
} }
.setting-clear {
//...
}
}
.wrapper-setting-actions {
@extend .field;
display: inline-block;
width: 360px;
top: 0;
vertical-align: top;
}
//Setting Label - also basic 'label'
.setting-label { .setting-label {
font-weight: 500; @extend .t-copy-sub2;
display: inline-block;
position: relative; position: relative;
left: 0; left: 0;
height: 50%; height: 50%;
width: 100px; width: 120px;
text-overflow: ellipsis;
} }
//Setting Input - also basic 'field'
.setting-input { .setting-input {
@extend .t-copy-sub3;
@include placeholder($gray-l4); @include placeholder($gray-l4);
border-radius: 2px; border-radius: 2px;
padding: 6px 8px 8px; padding: 6px 8px 8px;
width: 200px; width: 180px;
height: auto; height: auto;
border: 1px solid $gray-l2; border: 1px solid $gray-l2;
text-overflow: ellipsis;
//&:focus { //&:focus {
//TO-DO //TO-DO
} }
//custom styling of selectbox to look more like input boxes.
select { select {
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
background: none repeat scroll #F2F2F2; background: none repeat scroll #F2F2F2;
padding: 5px; padding: 5px;
&:focus {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: #FFFCF1;
}
&:active { &:active {
background-color: #FFFCF1; background-color: #FFFCF1;
} }
} }
//Setting Clear Button
.setting-clear { .setting-clear {
@include font-size(11); @include font-size(11);
color: $gray; color: $gray;
...@@ -570,16 +614,17 @@ body.course.unit { ...@@ -570,16 +614,17 @@ body.course.unit {
vertical-align: middle; vertical-align: middle;
padding: 5px; padding: 5px;
border-radius: 50%; border-radius: 50%;
margin-left: 10px; margin: 0 10px;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
border: 1px solid $gray-l4; border: 1px solid $gray-l4;
&:hover { &:hover {
@include box-shadow(0 1px 1px $shadow);
@include transition(opacity 0.25s ease-in-out);
background-color: $blue-s3; background-color: $blue-s3;
border: 1px solid $blue-s3; border: 1px solid $blue-s3;
color: $white; color: $white;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15));
} }
&.inactive { &.inactive {
...@@ -587,14 +632,13 @@ body.course.unit { ...@@ -587,14 +632,13 @@ body.course.unit {
} }
} }
//SettingsHelp //Setting Tip
.setting-help { .setting-help {
@include clearfix;
display: inline-block;
@include font-size(12); @include font-size(12);
display: inline-block;
font-color: $gray-l6; font-color: $gray-l6;
padding-left: 20px; max-width: 50%;
width: 65%; vertical-align: top;
} }
} }
...@@ -632,9 +676,9 @@ body.course.unit { ...@@ -632,9 +676,9 @@ body.course.unit {
// ==================== // ====================
.module-actions { .module-actions {
@include box-shadow(inset 0 1px 1px $shadow);
padding: 0 0 10px 10px; padding: 0 0 10px 10px;
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset; background-color: $gray-l4;
background-color: $gray-l6;
.save-button { .save-button {
margin: 15px 8px 0 0; margin: 15px 8px 0 0;
...@@ -755,9 +799,9 @@ body.course.unit { ...@@ -755,9 +799,9 @@ body.course.unit {
.unit-location { .unit-location {
.url { .url {
@include box-shadow(none);
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
@include box-shadow(none);
} }
.draft-tag, .draft-tag,
...@@ -771,6 +815,7 @@ body.course.unit { ...@@ -771,6 +815,7 @@ body.course.unit {
@include tree-view; @include tree-view;
.section-item { .section-item {
@include box-sizing(border-box);
display: inline-block; display: inline-block;
width: 100%; width: 100%;
font-size: 11px; font-size: 11px;
...@@ -778,7 +823,6 @@ body.course.unit { ...@@ -778,7 +823,6 @@ body.course.unit {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@include box-sizing(border-box);
} }
ol { ol {
......
cms/templates/component.html
...@@ -17,49 +17,57 @@ ...@@ -17,49 +17,57 @@
</div> <!-- Editor Header --> </div> <!-- Editor Header -->
<div class="component-edit-modes"> <div class="component-edit-modes">
<div class="module-editor editor-wrapper" id="editor-tab"> <div class="module-editor wrapper-component-editor" id="editor-tab">
<!--${editor} --> <!--${editor}-->
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? --> <!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
</div> <!-- Editor Wrapper--> </div> <!-- Editor Wrapper-->
<ul class="settings-wrapper" id="settings-tab"> <div class="wrapper-component-settings" id="settings-tab">
<ul class="list-input settings-list">
<!--% for type in sorted(something.keys()):--> <!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value--> <!--is-set class applied when user sets value-->
<li class="settings-row is-set"> <li class="settings-row is-set">
<label class="setting-label" for="setting-id-1">Setting 1</label> <div class="wrapper-setting-actions">
<input class="setting-input" type="text" id="setting-id-1"/> <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"/>
<!--button clickable if is-set --> <!--button clickable if is-set -->
<button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear"> <button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
</div>
<span class="setting-help">helpstring</span> <span class="setting-help">helpstring</span>
</li> </li>
<!--% showing second example mostly to see is-set style difference --> <!--% showing second example mostly to see is-set style difference -->
<li class="settings-row"> <li class="settings-row">
<div class="wrapper-setting-actions">
<label class="setting-label" for="setting-id-2">Setting 2</label> <label class="setting-label" for="setting-id-2">Setting 2</label>
<input class="setting-input" type="text" id="setting-id-2"/> <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"> <button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
<div class="setting-help">This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.</div> </div>
<span class="setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span>
</li>
<!--% showing dropdown example --> <!--% showing dropdown example -->
<li class="settings-row"> <li class="settings-row">
<label class="setting-label" for="setting-id-3">Setting Display </label> <div class="wrapper-setting-actions">
<select class="setting-input" id="setting-id-3" name="type"> <label class="setting-label" for="setting-displayName">Display Name</label>
<select class="setting-input" id="setting-displayName" name="type">
<!--% for all in available options --> <!--% for all in available options -->
<option value="displayName1" selected>Closed</option> <option value="displayName-closed" selected>Closed</option>
<!--in case value already defaulted --> <!--in case value already defaulted -->
<option value="displayName2">NotClosed</option> <option value="displayName-notclosed">NotClosed</option>
<option value="displayName3">Open</option> <option value="displayName-open">Open</option>
<option value="displayName4">Available</option> <option value="displayName-available">Available</option>
</select> </select>
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear"> <button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i> <i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
</button> </button>
</div>
<span class="setting-help">helpstring</span> <span class="setting-help">helpstring</span>
</li> </li>
</ul> <!-- Settings Wrapper--> </ul>
</div> <!-- Settings Wrapper-->
</div> </div>
<div class="row module-actions"> <div class="row module-actions">
<a href="#" class="save-button">Save</a> <a href="#" class="save-button">Save</a>
......
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