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