Commit ad0909df by marco

style input boxes

parent d1595892
......@@ -453,7 +453,8 @@ body.course.unit {
top: 0;
right: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $gray-l4;
box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
background-color: $white;
//Component Name
h4 {
......@@ -492,43 +493,84 @@ body.course.unit {
// Settings Wrapper
.settings-wrapper{
//TO-DO
//doverflow-y: scroll;
.settings-row {
// general row sizing stuff
background-color: $white;
background-color: $lightBluishGrey2;
padding: 10px;
border-bottom: 1px solid $gray-l4;
border-bottom: 1px solid $gray-l2;
opacity: .8;
&:hover {
opacity: 1;
}
.setting-label {
font-weight: normal;
display: inline;
display: inline-block;
padding-left: 15px;
position: relative;
left: 0;
width: 200px;
width: 100px;
}
.setting-input {
@include placeholder($gray-l4);
@include font-size(16);
@include size(100%,100%);
border-radius: 2px;
width: 200px;
height: auto;
//TO-DO
border: 1px solid $gray-l2;
//&:focus {
//TO-DO
}
select {
border: 1px solid $gray-l4;
background: none repeat scroll #F2F2F2;
padding: 5px;
&:active {
background-color: #FFFCF1;
}
option {
line-height: 16px;
}
}
.setting-clear {
@include font-size(11);
color: $gray;
width: 25px;
height: 25px;
vertical-align: middle;
padding: 5px;
border-radius: 50%;
margin-left: 15px;
margin-left: 10px;
box-shadow: none;
text-shadow: none;
border: 1px solid $gray-l4;
&:hover {
background-color: $blue-s3;
color: $white;
}
&.inactive {
visibility: hidden;
}
}
//SettingsHelp
.setting-help {
@include font-size(14);
display: inline-block;
@include font-size(12);
font-color: $gray-l6;
padding-left: 20px;
max-width: 50%;
}
}
......
......@@ -4,10 +4,10 @@
<h3 class="component-name">Viewing: Name of Component</h3>
<!--should this be a menubar/menu/tabbar instead of list? -->
<ul class="nav-edit-modes">
<li id="editor-mode" class="tab is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<li id="editor-mode" class="mode is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
<a href="#" class="button cancel-button">Editor</a>
</li>
<li id="settings-mode" class="tab" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
<a href="#" class="button cancel-button">Settings </a>
</li>
</ul>
......@@ -23,7 +23,7 @@
<!--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="type1" id="firstname"/>
<input class="setting-input" type="text" id="firstname"/>
<!--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>
......@@ -33,12 +33,15 @@
<!--% 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="type2" id="firstname"/>
<span class="setting-help">helpstring</span>
<input class="setting-input" type="text" id="firstname"/>
<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 helpstringhelpstringhelpstringhelpstringhel pstringhelpstringh elpstringhelpstrin sghelp stringhelp stringhelpstringhe lpstring helpstringhelpstringhelpstring</span>
<!--% showing dropdown example -->
<li class="settings-row">
<label class="setting-label" for="setting-name-as-id">Setting Display Name Goes Here</label>
<label class="setting-label" for="setting-name-as-id">Setting Display </label>
<select class="setting-input" name="type">
<!--% for all in available options -->
<option value="displayName1" selected>Closed</option>
......@@ -47,6 +50,9 @@
<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>
......
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