Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

label on top of input field move

Browse Source
This commit is contained in:
marco
2013-05-06 07:37:14 -07:00
parent 6b4ab20d02
commit 38abc0167d
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cms/static/sass/views/_settings.scss
View File

@@ -21,7 +21,7 @@ body.course.settings {
font-size: 14px;
}
.message-status {
.message-status {
display: none;
@include border-top-radius(2px);
@include box-sizing(border-box);

22
cms/static/sass/views/_unit.scss
View File

@@ -481,10 +481,10 @@ body.course.unit {
@include white-button;
&.is-set {
background-color: $lightBluishGrey2;
background-color: $white;
cursor: default;
linear-gradient: none;
@include box-shadow(0 0 1px 1px rgba(0, 0, 0, .6) inset);
@include box-shadow(0 0 1px 1px rgba(240, 240, 240, .1) inset);
}
}
@@ -518,24 +518,22 @@ body.course.unit {
.settings-row {
// general row sizing stuff
background-color: $white;
padding: 10px;
padding: 10px 20px;
border-bottom: 1px solid $gray-l2;
opacity: .6;
opacity: .8;
&:hover {
opacity: 1;
}
&.is-set {
opacity: .9;
opacity: 1;
background-color: $white;
font-weight: 200;
}
.setting-label {
font-weight: normal;
display: inline-block;
padding-left: 15px;
font-weight: 500;
position: relative;
left: 0;
height: 50%;
@@ -545,6 +543,7 @@ body.course.unit {
.setting-input {
@include placeholder($gray-l4);
border-radius: 2px;
padding: 6px 8px 8px;
width: 200px;
height: auto;
border: 1px solid $gray-l2;
@@ -578,7 +577,9 @@ body.course.unit {
&:hover {
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 {
@@ -588,11 +589,12 @@ body.course.unit {
//SettingsHelp
.setting-help {
@include clearfix;
display: inline-block;
@include font-size(12);
font-color: $gray-l6;
padding-left: 20px;
max-width: 40%;
width: 65%;
}
}
@@ -632,7 +634,7 @@ body.course.unit {
.module-actions {
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 {
margin: 15px 8px 0 0;

14
cms/templates/component.html
View File

@@ -25,8 +25,8 @@
<!--% 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="inputVariableHere">Setting 1</label>
<input class="setting-input" type="text" id="firstname"/>
<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>
@@ -35,17 +35,17 @@
</li>
<!--% showing second example mostly to see is-set style difference -->
<li class="settings-row">
<label class="setting-label" for="setting-name-as-id">Setting 2</label>
<input class="setting-input" type="text" id="firstname"/>
<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>
<span class="setting-help">This is a more reasonable helpstring sentence that would alos wrap around. A second sentence in some cases may be necessary.</span>
<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-name-as-id">Setting Display </label>
<select class="setting-input" name="type">
<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 -->