Commit d1595892 by marco

starting settings

parent 018a3d8a
......@@ -434,6 +434,10 @@ body.course.unit {
background: $lightBluishGrey2;
}
.component-edit-menu {
background-color: pink;
}
.component-editor {
@include edit-box;
@include box-shadow(none);
......@@ -445,8 +449,6 @@ body.course.unit {
.component-edit-menu {
@include box-sizing(border-box);
position: absolute;
width: 100%;
//padding: 15px;
top: 0;
right: 0;
......@@ -494,40 +496,39 @@ body.course.unit {
.settings-row {
// general row sizing stuff
width: 100%;
background-color: $white;
padding: 10px;
border-bottom: 1px solid $gray;
//SettingsLabel
li > label {
//Text all aligned left
display: inline-block;
//this sets height of .settings-row to allow for long help strings.
border-bottom: 1px solid $gray-l4;
.setting-label {
font-weight: normal;
display: inline;
position: relative;
left: 0;
width: 200px;
}
//SettingsInput
li > input, li > select {
.setting-input {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
width: 100px;
width: 200px;
height: auto;
//TO-DO
&:focus {
//&:focus {
//TO-DO
}
}
//SettingsClear
li > button {
border-radius: 20px; //maybe a % calc from input box height
.setting-clear {
border-radius: 50%;
margin-left: 15px;
}
//SettingsHelp
li > span {
//Text all aligned left
.setting-help {
@include font-size(14);
font-color: $gray-l6;
}
}
......@@ -561,9 +562,17 @@ body.course.unit {
font-weight: 700;
}
.save-button {
margin-top: 10px;
// Module Actions
// ====================
.module-actions {
padding: 0 0 10px 10px;
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
background-color: $gray-l4;
.save-button {
margin: 15px 8px 0 0;
}
}
}
}
......
......@@ -22,24 +22,24 @@
<!--% for type in sorted(something.keys()):-->
<!--is-set class applied when user sets value-->
<li class="settings-row is-set">
<label for="inputVariableHere">Setting Display Name Goes Here</label>
<input type="type1" id="firstname"/>
<label class="setting-label" for="inputVariableHere">Setting 1</label>
<input class="setting-input" type="type1" id="firstname"/>
<!--button clickable if is-set -->
<button type="button" name="setting-clear" value="Clear" class="setting-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>
</button>
<span class="settings-help">helpstring</span>
<span class="setting-help">helpstring</span>
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="settings-row">
<label for="setting-name-as-id">Setting Display Name Goes Here</label>
<input type="type2" id="firstname"/>
<span class="settings-help">helpstring</span>
<label class="setting-label" for="setting-name-as-id">Setting 2</label>
<input class="setting-input" type="type2" id="firstname"/>
<span class="setting-help">helpstring</span>
<!--% showing dropdown example -->
<li class="settings-row">
<label for="setting-name-as-id">Setting Display Name Goes Here</label>
<select name="type">
<label class="setting-label" for="setting-name-as-id">Setting Display Name Goes Here</label>
<select class="setting-input" name="type">
<!--% for all in available options -->
<option value="displayName1" selected>Closed</option>
<!--in case value already defaulted -->
......@@ -47,7 +47,7 @@
<option value="displayName3">Open</option>
<option value="displayName4">Available</option>
</select>
<span class="settings-help">helpstring</span>
<span class="setting-help">helpstring</span>
</li>
</ul> <!-- Settings Wrapper-->
......
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