in progress form styling of course info

This commit is contained in:
Brian Talbot
2012-11-08 17:48:38 -05:00
parent 3b42ea7e9e
commit 8f2ab52215
2 changed files with 102 additions and 13 deletions

View File

@@ -23,6 +23,7 @@
label {
display: inline-block;
vertical-align: top;
width: 200px;
font-size: 15px;
font-weight: 400;
@@ -37,6 +38,12 @@
}
}
.label-micro {
display: block;
margin-top: 5px;
font-size: 13px;
}
input, textarea {
font-size: 15px;
@@ -55,6 +62,61 @@
&.date {
width: 140px;
}
&:focus {
border-color: $blue;
outline: 0;
}
}
.field {
background: #b6eab1;
display: inline-block;
vertical-align: top;
min-width: 400px;
input {
display: block;
}
.input-list {
.element {
position: relative;
width: 100%;
@include clearfix();
div {
float: left;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.delete-icon {
position: absolute;
right: 10px;
top: 10px;
}
}
&.element-stacked {
}
&.element-multi {
}
}
.new-item {
margin-top: 20px;
padding-bottom: 10px;
@include grey-button;
@include box-sizing(border-box);
}
}
.settings-page-section {
@@ -82,6 +144,13 @@
&:last-child {
margin-bottom: 0;
}
.tip {
color: $mediumGrey;
display: inline-block;
margin-left: 10px;
font-size: 13px;
}
}
&:last-child {
@@ -89,12 +158,34 @@
}
> section {
padding-bottom: 40px;
padding-bottom: 60px;
margin-bottom: 40px;
border-radius: 3px;
border-bottom: 1px solid $mediumGrey;
border-bottom: 1px solid $lightGrey;
@include clearfix;
header {
@include clearfix;
border-bottom: 1px solid $mediumGrey;
margin-bottom: 20px;
padding-bottom: 10px;
h3 {
color: $darkGrey;
float: left;
margin: 0 40px 0 0;
text-transform: uppercase;
}
.detail {
float: right;
marign-top: 3px;
color: $mediumGrey;
font-size: 13px;
}
}
&:last-child {
padding-bottom: 0;
border-bottom: none;

View File

@@ -150,23 +150,22 @@
<div class="field">
<ol class="input-list course-milestone-list">
<li class="course-milestone-list-element">
<li class="element element-multi course-milestone-list-element">
<div class="course-milestone-date">
<input type="text" class="course-milestone-date-input date">
<span class="label-micro">Milestone Date</span>
</div>
<div class="course-milestone-name">
<input type="text" class="course-milestone-name-input short">
<input type="text" class="course-milestone-name-input">
<span class="label-micro">Milestone Name</span>
</div>
<a href="#" class="delete-icon remove-milestone-data"></a>
</li>
</ol>
<a href="#" class="new-item new-course-milestone-item add-milestone-data">
<span class="plus-icon-small"></span>New Class Milestone
<span class="plus-icon"></span>New Class Milestone
</a>
</div>
</div>
@@ -213,7 +212,7 @@
<input type="text" class="long course-prerequisites-links">
<a href="#" class="new-item new-course-prerequisites-links-item add-links-data">
<span class="plus-icon-small"></span>New Link
<span class="plus-icon"></span>New Link
</a>
</div>
</div>
@@ -233,7 +232,7 @@
<div class="field">
<ol class="input-list course-textbook-list">
<li class="course-textbook-list-element">
<li class="element element-stacked course-textbook-list-element">
<div class="course-textbook-name">
<input type="text" class="long course-textbook-name-input">
<span class="label-micro">Textbook Name</span>
@@ -244,12 +243,12 @@
<span class="label-micro">Textbook URL</span>
</div>
<a href="#" class="delete-icon remove-textbook-data"></a>
<!-- <a href="#" class="delete-icon remove-textbook-data"></a> -->
</li>
</ol>
<a href="#" class="new-item new-course-textbook-item add-textbook-data">
<span class="plus-icon-small"></span>New Textbook
<span class="plus-icon"></span>New Textbook
</a>
</div>
</div>
@@ -266,7 +265,7 @@
<div class="field">
<ol class="input-list course-faq-list">
<li class="course-faq-list-element">
<li class="element course-faq-list-element">
<div class="course-faq-question">
<input type="text" class="long course-faq-question-input">
<span class="label-micro">Question</span>
@@ -277,12 +276,11 @@
<span class="label-micro">Answer</span>
</div>
<a href="#" class="delete-icon remove-faq-data"></a>
</li>
</ol>
<a href="#" class="new-item new-course-faq-item add-faq-data">
<span class="plus-icon-small"></span>New Question &amp; Answer
<span class="plus-icon"></span>New Question &amp; Answer
</a>
</div>
</div>