2159d34128
This allows course authors to choose between two difference licenses for their course content: All Rights Reserved, or Creative Commons. In the backend, XBlocks that wish to allow custom licenses need only inherit from LicenseMixin, which adds a `license` field as a string. License information is displayed in the Studio editor view, and just below the rendered XBlock in the LMS. In addition, if the course block itself has a custom license set, this license will display just below the main body of the page on courseware pages. This entire feature is gated behind the LICENSING feature flag.
598 lines
10 KiB
SCSS
598 lines
10 KiB
SCSS
// studio - elements - forms
|
|
// ====================
|
|
|
|
// Table of Contents
|
|
// * +Forms - General
|
|
// * +Field - Is Editable
|
|
// * +Field - With Error
|
|
// * +Forms - Additional UI
|
|
// * +Form - Create New
|
|
// * +Form - Inline Name Edit
|
|
// * +Form - Create New Wrapper
|
|
// * +Form - Grandfathered
|
|
|
|
// +Forms - General
|
|
// ====================
|
|
// element-specific utilities
|
|
// --------------------
|
|
// UI: checkbox/radio inputs
|
|
%input-tickable {
|
|
|
|
~ label {
|
|
color: $color-copy-base;
|
|
}
|
|
|
|
// STATE: checked/selected
|
|
&:checked ~ label {
|
|
@extend %t-strong;
|
|
color: $ui-action-primary-color-focus;
|
|
}
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
textarea.text {
|
|
@include box-sizing(border-box);
|
|
@include linear-gradient($gray-l5, $white);
|
|
@extend %t-copy-sub2;
|
|
@extend %t-demi-strong;
|
|
padding: 6px 8px 8px;
|
|
border: 1px solid $gray-l2;
|
|
border-radius: 2px;
|
|
background-color: $gray-l5;
|
|
box-shadow: inset 0 1px 2px $shadow-l1;
|
|
font-family: 'Open Sans', sans-serif;
|
|
color: $color-copy-emphasized;
|
|
outline: 0;
|
|
|
|
&::-webkit-input-placeholder,
|
|
&:-moz-placeholder,
|
|
&:-ms-input-placeholder {
|
|
color: $gray-l2;
|
|
}
|
|
|
|
&:focus {
|
|
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
// +Fields - Not Editable
|
|
// ====================
|
|
.field.is-not-editable {
|
|
|
|
& label.is-focused {
|
|
color: $gray-d2;
|
|
}
|
|
|
|
label, input, textarea {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// +Fields - With Error
|
|
// ====================
|
|
.field.error {
|
|
|
|
input, textarea {
|
|
border-color: $red;
|
|
}
|
|
}
|
|
|
|
// +Forms - Additional UI
|
|
// ====================
|
|
form {
|
|
|
|
// CASE: cosmetic checkbox input
|
|
.checkbox-cosmetic {
|
|
|
|
.input-checkbox-checked, .input-checkbox-unchecked, .label {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.input-checkbox-checked, .input-checkbox-unchecked {
|
|
width: ($baseline*0.75);
|
|
}
|
|
|
|
.input-checkbox {
|
|
@extend %cont-text-sr;
|
|
|
|
// CASE: unchecked
|
|
~ label .input-checkbox-checked {
|
|
display: none;
|
|
}
|
|
|
|
~ label .input-checkbox-unchecked {
|
|
display: inline-block;
|
|
}
|
|
|
|
// CASE: checked
|
|
&:checked {
|
|
|
|
~ label .input-checkbox-checked {
|
|
display: inline-block;
|
|
}
|
|
|
|
~ label .input-checkbox-unchecked {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// CASE: checkbox input
|
|
.field-checkbox .input-checkbox {
|
|
@extend %input-tickable;
|
|
}
|
|
|
|
// CASE: radio input
|
|
.field-radio .input-radio {
|
|
@extend %input-tickable;
|
|
}
|
|
|
|
// CASE: file input
|
|
input[type="file"] {
|
|
@extend %t-copy-sub1;
|
|
}
|
|
|
|
.note {
|
|
@include box-sizing(border-box);
|
|
|
|
.title {
|
|
|
|
}
|
|
|
|
.copy {
|
|
|
|
}
|
|
|
|
// note with actions
|
|
&.has-actions {
|
|
@include clearfix();
|
|
|
|
.title {
|
|
|
|
}
|
|
|
|
.copy {
|
|
|
|
}
|
|
|
|
.list-actions {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.note-promotion {
|
|
|
|
}
|
|
}
|
|
|
|
// +Forms - License selector UI
|
|
// ====================
|
|
.license-img {
|
|
padding: 4px;
|
|
}
|
|
|
|
ul.license-types {
|
|
text-align: middle;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.action.license-button {
|
|
@include grey-button;
|
|
@extend %t-action2;
|
|
|
|
display: inline-block;
|
|
|
|
text-align: center;
|
|
|
|
width: 220px;
|
|
height: 40px;
|
|
|
|
cursor: pointer;
|
|
|
|
&.is-selected {
|
|
@include blue-button;
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
}
|
|
}
|
|
.wrapper-license-options {
|
|
margin-bottom: 10px;
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
}
|
|
#list-license-options {
|
|
padding-bottom: 10px;
|
|
|
|
li {
|
|
line-height: 1.5;
|
|
border-bottom: 1px solid #EEE;
|
|
padding: ($baseline / 2) 0 ($baseline * 0.4);
|
|
&.is-clickable {
|
|
cursor: pointer;
|
|
}
|
|
&.last {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.fa {
|
|
vertical-align: top;
|
|
}
|
|
.fa-square-o {
|
|
display: inline-block;
|
|
margin: ($baseline * 0.15) 15px 0px;
|
|
}
|
|
.fa-square-o.is-disabled {
|
|
color: $gray;
|
|
}
|
|
.fa-check-square-o {
|
|
color: $blue;
|
|
display: none;
|
|
margin: ($baseline * 0.15) 14px 0px 16px;
|
|
}
|
|
.fa-check-square-o.is-disabled {
|
|
color: $gray;
|
|
}
|
|
&.is-selected {
|
|
.fa-check-square-o {
|
|
display: inline-block;
|
|
}
|
|
.fa-square-o {
|
|
display: none;
|
|
}
|
|
}
|
|
.option-name {
|
|
@extend %t-action3;
|
|
@extend %t-strong;
|
|
display: inline-block;
|
|
width: 15%;
|
|
vertical-align: top;
|
|
}
|
|
.explanation {
|
|
@extend %t-action4;
|
|
display: inline-block;
|
|
width: 75%;
|
|
vertical-align: top;
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Form - Create New
|
|
// ====================
|
|
// form styling for creating a new content item (course, user, textbook)
|
|
// TODO: refactor this into a placeholder to extend.
|
|
.form-create {
|
|
@extend %ui-window;
|
|
|
|
.title {
|
|
@extend %t-title4;
|
|
@extend %t-strong;
|
|
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
|
|
}
|
|
|
|
fieldset {
|
|
padding: $baseline ($baseline*1.5);
|
|
}
|
|
|
|
|
|
.list-input {
|
|
@extend %cont-no-list;
|
|
|
|
.field {
|
|
margin: 0 0 ($baseline*0.75) 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.required {
|
|
|
|
label {
|
|
@extend %t-strong;
|
|
}
|
|
|
|
label:after {
|
|
margin-left: ($baseline/4);
|
|
content: "*";
|
|
}
|
|
}
|
|
|
|
label, input, textarea {
|
|
display: block;
|
|
}
|
|
|
|
label {
|
|
@extend %t-copy-sub1;
|
|
@include transition(color $tmg-f3 ease-in-out 0s);
|
|
margin: 0 0 ($baseline/4) 0;
|
|
|
|
&.is-focused {
|
|
color: $blue;
|
|
}
|
|
}
|
|
|
|
|
|
input, textarea {
|
|
@extend %t-copy-base;
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: ($baseline/2);
|
|
|
|
&.long {
|
|
width: 100%;
|
|
}
|
|
|
|
&.short {
|
|
width: 25%;
|
|
}
|
|
|
|
/*@include placeholder {
|
|
color: $gray-l3;
|
|
}*/
|
|
|
|
&:focus {
|
|
|
|
+ .tip {
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
textarea.long {
|
|
height: ($baseline*5);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display: inline-block;
|
|
margin-right: ($baseline/4);
|
|
width: auto;
|
|
height: auto;
|
|
|
|
& + label {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.tip {
|
|
@extend %t-copy-sub2;
|
|
@include transition(color 0.15s ease-in-out);
|
|
|
|
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
color: $gray-l3;
|
|
}
|
|
|
|
.tip-note {
|
|
display: block;
|
|
margin-top: ($baseline/4);
|
|
}
|
|
|
|
.tip-error {
|
|
display: none;
|
|
float: none;
|
|
}
|
|
|
|
&.error {
|
|
label {
|
|
color: $red;
|
|
}
|
|
|
|
.is-showing {
|
|
@extend %anim-fadeIn;
|
|
}
|
|
|
|
.is-hiding {
|
|
@extend %anim-fadeOut;
|
|
}
|
|
|
|
.tip-error {
|
|
display: block;
|
|
color: $red;
|
|
}
|
|
|
|
input {
|
|
border-color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-inline {
|
|
|
|
input, textarea, select {
|
|
width: 62%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tip-stacked {
|
|
display: inline-block;
|
|
float: right;
|
|
width: 35%;
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.error {
|
|
.tip-error {
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.field-group {
|
|
@include clearfix();
|
|
margin: 0 0 ($baseline/2) 0;
|
|
|
|
.field {
|
|
display: block;
|
|
width: 47%;
|
|
border-bottom: none;
|
|
margin: 0 ($baseline*0.75) 0 0;
|
|
padding: ($baseline/4) 0 0 0;
|
|
float: left;
|
|
position: relative;
|
|
|
|
&:nth-child(odd) {
|
|
float: left;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
float: right;
|
|
margin-right: 0;
|
|
}
|
|
|
|
input, textarea {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
box-shadow: inset 0 1px 2px $shadow;
|
|
margin-top: ($baseline*0.75);
|
|
border-top: 1px solid $gray-l1;
|
|
padding: ($baseline*0.75) ($baseline*1.5);
|
|
background: $gray-l6;
|
|
|
|
.action {
|
|
@include transition(all $tmg-f2 linear 0s);
|
|
@extend %t-strong;
|
|
display: inline-block;
|
|
padding: ($baseline/5) $baseline;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.action-primary {
|
|
@include blue-button;
|
|
@extend %t-action2;
|
|
}
|
|
|
|
.action-secondary {
|
|
@include grey-button;
|
|
@extend %t-action2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Form - Inline Name Edit
|
|
// ====================
|
|
// form - inline xblock name edit on unit, container, outline
|
|
// TODO: abstract this out into a Sass placeholder
|
|
.incontext-editor.is-editable {
|
|
|
|
.incontext-editor-value,
|
|
.incontext-editor-action-wrapper {
|
|
@extend %cont-truncated;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.incontext-editor-open-action {
|
|
@extend %ui-btn-non-blue;
|
|
@extend %t-copy-base;
|
|
padding-top: ($baseline/10);
|
|
|
|
.icon.icon {
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
|
|
.incontext-editor-form {
|
|
display: none;
|
|
}
|
|
|
|
&.is-editing {
|
|
|
|
.incontext-editor-value,
|
|
.incontext-editor-action-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
.incontext-editor-form {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// +Form - Create New Wrapper
|
|
// ====================
|
|
.wrapper-create-element {
|
|
height: auto;
|
|
opacity: 1.0;
|
|
pointer-events: auto;
|
|
overflow: hidden;
|
|
display: none;
|
|
|
|
&.animate {
|
|
@include transition(opacity $tmg-f1 ease-in-out 0s, height $tmg-f1 ease-in-out 0s);
|
|
}
|
|
|
|
&.is-shown {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// +Form - Grandfathered
|
|
// ====================
|
|
input.search {
|
|
padding: 6px 15px 8px 30px;
|
|
@include box-sizing(border-box);
|
|
border: 1px solid $darkGrey;
|
|
border-radius: 20px;
|
|
background: url(../images/search-icon.png) no-repeat 8px 7px #edf1f5;
|
|
font-family: 'Open Sans', sans-serif;
|
|
color: $baseFontColor;
|
|
outline: 0;
|
|
|
|
&::-webkit-input-placeholder {
|
|
color: #979faf;
|
|
}
|
|
}
|
|
|
|
label {
|
|
@extend %t-copy-sub2;
|
|
}
|
|
|
|
code {
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
background: #eee;
|
|
font-family: Monaco, monospace;
|
|
}
|
|
|
|
.CodeMirror {
|
|
@extend %t-copy-sub1;
|
|
background: $white;
|
|
font-family: $f-monospace;
|
|
}
|
|
|
|
.text-editor {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: 10px;
|
|
@include box-sizing(border-box);
|
|
border: 1px solid $mediumGrey;
|
|
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
|
|
background-color: #edf1f5;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
|
|
font-family: Monaco, monospace;
|
|
}
|