diff --git a/cms/static/sass/course-unit-mfe-iframe-bundle.scss b/cms/static/sass/course-unit-mfe-iframe-bundle.scss index 7dca6cc636c7..31c7f2e756d6 100644 --- a/cms/static/sass/course-unit-mfe-iframe-bundle.scss +++ b/cms/static/sass/course-unit-mfe-iframe-bundle.scss @@ -433,9 +433,6 @@ html { } } - // For openassessment xblock editor. Copied from edx-ora2 repo. - @import 'iframe-editors/oa'; - // openassessment xblock mods for mfe iframe .openassessment_editor_buttons.xblock-actions { padding: ($baseline*0.75) 2% ($baseline/2) 2%; diff --git a/cms/static/sass/iframe-editors/_oa.scss b/cms/static/sass/iframe-editors/_oa.scss deleted file mode 100644 index e4f604c2f35e..000000000000 --- a/cms/static/sass/iframe-editors/_oa.scss +++ /dev/null @@ -1,94 +0,0 @@ -// oa/xblock: openassessment - main style compile -// ==================== - -// NOTES: -// * this Sass compiles into the static CSS needed for the openassessment oa/xblock -// * Sass partials that can be re-used are organized in the "oa/xb/" directory and listed in "general oa/xblock" segments -// * theme-based Sass partials are noted by "theme - [theme name]" in the import order to override defaults -// * openassessment-specific styles are collected within the "oa/" directory and listed in "app -" segment - -// * openassessment-based layouts are sized like media-query breakpoints, but will be applied by specific classes/variables -// * the system/app digesting this oa/xblock will control general page layout and overall screensize-based breakpoints - -// -------------------- - -// KNOWN ISSUES/CONCERNS: -// * manual syncing of a view's breakpoints/layout with openassessment's sizes is needed on a system/app basis -// * the system/app ingesting this oa/xblock may have conflicts/redundancies/versioning issues with the utilities used - -// -------------------- -// general - oa/xblocks: -// shared utilities, assets and set up -// -------------------- -// oa/xblocks: libraries and resets -@import 'oa/xb/libs/bourbon/bourbon'; // general sass utility (http://bourbon.io) -@import 'oa/xb/libs/neat/neat'; // responsive grid utility (http://neat.bourbon.io) - -// oa/xblocks: utilities -@import 'oa/xb/utilities/reset'; // oa/xblocks-based reset -@import 'oa/xb/utilities/variables'; // default settings and values -@import 'oa/xb/utilities/mixins'; // mixins and functions -@import 'oa/xb/utilities/extends'; // re-usable extends, placeholders, archetypes -@import 'oa/xb/utilities/animations'; // re-usable CSS-based animations - -// general oa/xblocks: assets -@import 'oa/xb/assets/fonts'; // imported/used fonts -@import 'oa/xb/assets/graphics'; // sprites, basic img/figure/svg styling - - -// -------------------- -// theme - edx: -// utilities and assets (needed in this order to override oa/xb variables) -// -------------------- -@import 'oa/themes/edx/utilities'; // theme-based utilities (variables, mixins, extends) - - -// -------------------- -// general - oa/xblock: -// shared base type, controls, and UI elements -// -------------------- -// oa/xblock: elements -@import 'oa/xb/elements/base'; // basic styles -@import 'oa/xb/elements/typography'; // font sizes/scale and applied/canned definitions -@import 'oa/xb/elements/controls'; // buttons, link styles, sliders, etc. -@import 'oa/xb/elements/forms'; // form elements -@import 'oa/xb/elements/system-feedback'; // system messages, feedback, transitions -@import 'oa/xb/elements/layout'; // applied layouts and deliberate class-based breakpoints - -// oa/xblock: contextual -@import 'oa/xb/contexts/ie'; // Internet Explorer-specific styling - - -// -------------------- -// theme - edx: -// elements, views, and contexts (needed in this order to override oa/xb) -// -------------------- -@import 'oa/themes/edx/base'; -@import 'oa/themes/edx/elements'; - - -// -------------------- -// app - openassessment: -// specific UI for this application -// -------------------- -@import 'oa/vendor/hint'; // vendor - hint/tooltip UI -@import 'oa/utilities/mixins'; // open assessment mixins -@import 'oa/utilities/variables'; // specific variables and overrides -@import 'oa/utilities/extends'; // open assessment extends -@import 'oa/elements/header'; // view/app headers -@import 'oa/elements/footer'; // view/app footers -@import 'oa/elements/navigation'; // navigation sets -@import 'oa/elements/layout'; // applied layouts and deliberate class-based breakpoints -@import 'oa/elements/staff'; // open assessment staff-centric UI -@import 'oa/views/oa-base'; // open assessment base view -@import 'oa/views/oa-course-items-listing'; // open response assessment tab for instructor dashboard -@import 'oa/views/oa-jquery-ui-rubric-reuse'; // rubric reuse jquery-ui theming mixin -@import 'oa/elements/confirm'; // custom confirm modal jquery-ui theming mixin - -// openassessment: contextual -@import 'oa/contexts/ie'; // open assessment-specific Internet Explorer-specific styling -@import 'oa/contexts/responsive'; // open assessment-specific UI sizes (faking responsive brakpoints) - -// openassessment: misc. -@import 'oa/utilities/developer'; // developer-friendly file: add rough/WIP styling that needs UI triage -@import 'oa/utilities/shame'; // used for any bad-form/orphaned css/clean up code needed diff --git a/cms/static/sass/iframe-editors/oa/contexts/_ie.scss b/cms/static/sass/iframe-editors/oa/contexts/_ie.scss deleted file mode 100644 index b94128242b16..000000000000 --- a/cms/static/sass/iframe-editors/oa/contexts/_ie.scss +++ /dev/null @@ -1,29 +0,0 @@ -// openassessment: contexts - internet explorer -// ==================== - -// NOTES: -// * any openassessment-specific support-based styling needed for internet explorer should be placed here - - -// -------------------- -// CASE: less than or equal to IE9 -// -------------------- -.lte9 { - -} - - -// -------------------- -// CASE: less than or equal to IE8 -// -------------------- -.lte8 { - -} - - -// -------------------- -// CASE: less than or equal to IE7 -// -------------------- -.lte7 { - -} diff --git a/cms/static/sass/iframe-editors/oa/contexts/_responsive.scss b/cms/static/sass/iframe-editors/oa/contexts/_responsive.scss deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/cms/static/sass/iframe-editors/oa/elements/_confirm.scss b/cms/static/sass/iframe-editors/oa/elements/_confirm.scss deleted file mode 100644 index d378a3886c82..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_confirm.scss +++ /dev/null @@ -1,219 +0,0 @@ -/*! jQuery UI - v1.12.1 - 2021-07-13 -* http://jqueryui.com -* Includes: theme.css -* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=&bgImgOpacityHeader=30&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23ebebeb&fcHighlight=%23000000&borderColorHighlight=%23000000&bgTextureHighlight=flat&bgColorHighlight=%23d7d7d7&iconColorActive=%23777777&fcActive=%23454545&borderColorActive=%23c5c5c5&bgTextureActive=flat&bgColorActive=%23ffffff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23f3f3f3&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23ffffff&iconColorContent=%23444444&fcContent=%23454545&borderColorContent=%23c5c5c5&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23454545&borderColorHeader=%23D7D3D1&bgTextureHeader=flat&bgColorHeader=%23ffffff&cornerRadius=1px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif -* Copyright jQuery Foundation and other contributors; Licensed MIT */ - -@mixin confirm-jquery-ui { - .ui-widget { - font-family: Arial,Helvetica,sans-serif; - font-size: 1em; - } - .ui-widget .ui-widget { - font-size: 1em; - } - .ui-widget input, - .ui-widget select, - .ui-widget textarea, - .ui-widget button { - font-family: Arial,Helvetica,sans-serif; - font-size: 1em; - } - .ui-widget.ui-widget-content { - border: 1px solid #c5c5c5; - } - .ui-widget-content { - border: 1px solid #c5c5c5; - background: #ffffff; - color: #454545; - } - .ui-widget-content a { - color: #454545; - } - .ui-widget-header { - border: 1px solid #D7D3D1; - background: #ffffff; - color: #454545; - font-weight: bold; - } - .ui-widget-header a { - color: #454545; - } - - /* Interaction states - ----------------------------------*/ - .ui-state-default, - .ui-widget-content .ui-state-default, - .ui-widget-header .ui-state-default, - .ui-button, - - /* We use html here because we need a greater specificity to make sure disabled - works properly when clicked or hovered */ - html .ui-button.ui-state-disabled:hover, - html .ui-button.ui-state-disabled:active { - border: 1px solid #c5c5c5; - background: #ffffff; - font-weight: normal; - color: #454545; - } - .ui-state-default a, - .ui-state-default a:link, - .ui-state-default a:visited, - a .ui-button, - a:link .ui-button, - a:visited .ui-button, - .ui-button { - color: #454545; - text-decoration: none; - } - .ui-state-hover, - .ui-widget-content .ui-state-hover, - .ui-widget-header .ui-state-hover, - .ui-state-focus, - .ui-widget-content .ui-state-focus, - .ui-widget-header .ui-state-focus, - .ui-button:hover, - .ui-button:focus { - border: 1px solid #cccccc; - background: #f3f3f3; - font-weight: normal; - color: #2b2b2b; - } - .ui-state-hover a, - .ui-state-hover a:hover, - .ui-state-hover a:link, - .ui-state-hover a:visited, - .ui-state-focus a, - .ui-state-focus a:hover, - .ui-state-focus a:link, - .ui-state-focus a:visited, - a .ui-button:hover, - a .ui-button:focus { - color: #2b2b2b; - text-decoration: none; - } - - .ui-visual-focus { - box-shadow: 0 0 3px 1px rgb(94, 158, 214); - } - .ui-state-active, - .ui-widget-content .ui-state-active, - .ui-widget-header .ui-state-active, - a .ui-button:active, - .ui-button:active, - .ui-button.ui-state-active:hover { - border: 1px solid #c5c5c5; - background: #ffffff; - font-weight: normal; - color: #454545; - } - .ui-icon-background, - .ui-state-active .ui-icon-background { - border: #c5c5c5; - background-color: #454545; - } - .ui-state-active a, - .ui-state-active a:link, - .ui-state-active a:visited { - color: #454545; - text-decoration: none; - } - - /* Interaction Cues - ----------------------------------*/ - .ui-state-highlight, - .ui-widget-content .ui-state-highlight, - .ui-widget-header .ui-state-highlight { - border: 1px solid #000000; - background: #d7d7d7; - color: #000000; - } - .ui-state-checked { - border: 1px solid #000000; - background: #d7d7d7; - } - .ui-state-highlight a, - .ui-widget-content .ui-state-highlight a, - .ui-widget-header .ui-state-highlight a { - color: #000000; - } - .ui-state-error, - .ui-widget-content .ui-state-error, - .ui-widget-header .ui-state-error { - border: 1px solid #f1a899; - background: #fddfdf; - color: #5f3f3f; - } - .ui-state-error a, - .ui-widget-content .ui-state-error a, - .ui-widget-header .ui-state-error a { - color: #5f3f3f; - } - .ui-state-error-text, - .ui-widget-content .ui-state-error-text, - .ui-widget-header .ui-state-error-text { - color: #5f3f3f; - } - .ui-priority-primary, - .ui-widget-content .ui-priority-primary, - .ui-widget-header .ui-priority-primary { - font-weight: bold; - } - .ui-priority-secondary, - .ui-widget-content .ui-priority-secondary, - .ui-widget-header .ui-priority-secondary { - opacity: .7; - filter:Alpha(Opacity=70); /* support: IE8 */ - font-weight: normal; - } - .ui-state-disabled, - .ui-widget-content .ui-state-disabled, - .ui-widget-header .ui-state-disabled { - opacity: .35; - filter:Alpha(Opacity=35); /* support: IE8 */ - background-image: none; - } - .ui-state-disabled .ui-icon { - filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ - } - - /* Misc visuals - ----------------------------------*/ - - /* Corner radius */ - .ui-corner-all, - .ui-corner-top, - .ui-corner-left, - .ui-corner-tl { - border-top-left-radius: 1px; - } - .ui-corner-all, - .ui-corner-top, - .ui-corner-right, - .ui-corner-tr { - border-top-right-radius: 1px; - } - .ui-corner-all, - .ui-corner-bottom, - .ui-corner-left, - .ui-corner-bl { - border-bottom-left-radius: 1px; - } - .ui-corner-all, - .ui-corner-bottom, - .ui-corner-right, - .ui-corner-br { - border-bottom-right-radius: 1px; - } - - /* Overlays */ - .ui-widget-overlay { - background: #aaaaaa; - opacity: .3; - filter: Alpha(Opacity=30); /* support: IE8 */ - } - .ui-widget-shadow { - -webkit-box-shadow: 0px 0px 5px #666666; - box-shadow: 0px 0px 5px #666666; - } -} \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/elements/_footer.scss b/cms/static/sass/iframe-editors/oa/elements/_footer.scss deleted file mode 100644 index be35fb048085..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_footer.scss +++ /dev/null @@ -1,5 +0,0 @@ -// openassessment: elements - footer -// ==================== - -// NOTES: -// * The grade/status portion of the openassessment UI diff --git a/cms/static/sass/iframe-editors/oa/elements/_header.scss b/cms/static/sass/iframe-editors/oa/elements/_header.scss deleted file mode 100644 index a48570424906..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_header.scss +++ /dev/null @@ -1,5 +0,0 @@ -// openassessment: elements - header -// ==================== - -// NOTES: -// * The prompt/status portion of the openassessment UI diff --git a/cms/static/sass/iframe-editors/oa/elements/_layout.scss b/cms/static/sass/iframe-editors/oa/elements/_layout.scss deleted file mode 100644 index 80acabe89022..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_layout.scss +++ /dev/null @@ -1,6 +0,0 @@ -// openassessment: elements - layouts -// ==================== - -// NOTES: -// * Grid and common page layout rules -// * any manual layout breakpoints for ORA (a la shirt sizes - s,m,l,xl) - needed since media queries of UI xblocks are contained in don't give enough context diff --git a/cms/static/sass/iframe-editors/oa/elements/_navigation.scss b/cms/static/sass/iframe-editors/oa/elements/_navigation.scss deleted file mode 100644 index d0f04c1b0deb..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_navigation.scss +++ /dev/null @@ -1,39 +0,0 @@ -// openassessment: elements - navigation -// ==================== - -// NOTES: -// * openassessment-specific navigation UI - -// -------------------- -// ui tooltips/hints - based on https://github.com/chinchang/hint.css -// -------------------- -.has--hints { - overflow: visible; -} - -.ui-hint { - @extend %fake-link; - - .icon { - @include margin-left(($baseline-h/8)); - } - - // STATE: hover - &:hover, &:focus { - color: $action-primary-color-focus; - } - -// actual tooltip rendered - &:after { - @include left(0); - display: block; - white-space: normal; - width: ($baseline-h*5); - background: $black-t3; - } - - &.hint--top:after { - @include left(0); - @include margin-left(-($baseline-v)); - } -} diff --git a/cms/static/sass/iframe-editors/oa/elements/_staff.scss b/cms/static/sass/iframe-editors/oa/elements/_staff.scss deleted file mode 100644 index 51338967d640..000000000000 --- a/cms/static/sass/iframe-editors/oa/elements/_staff.scss +++ /dev/null @@ -1,362 +0,0 @@ -// openassessment: elements - staff -// ==================== - -// NOTES: -// * staff-centric UI used for reporting/debugging - -.openassessment { - - // -------------------- - // general: staff UI - // -------------------- - .wrapper--ui-staff { - @include single-box-shadow(0, 1px, -2px, 1px, $shadow-d1, inset); - margin-top: ($baseline-v*2); - @include border-radius(($baseline-v/10)); - border: 1px solid shade($color-decorative-staff, 25%); - border-top: ($baseline-v/4) solid $color-decorative-staff; - padding: $baseline-v ($baseline-h/2); - background: $staff-bg; - display: none; - } - - .ui-staff { - - .ui-slidable__content { - padding: ($baseline-v/2) ($baseline-h/4); - } - } - - .ui-staff__title { - @extend %t-heading; - color: $heading-staff-color; - } - - .ui-staff__subtitle { - @extend %t-heading; - @include fontSize($f-size-medium); - // We want to keep the collapsible headers within the staff assessment block blue - // (because they are being displayed in the LMS color scheme). Unfortunately because of - // that we need to add an override just for ui-staff_subtitle collapsible items. - color: $heading-staff-color !important; - margin-bottom: ($baseline-v/2); - - span { - font-weight: inherit; - } - } - - .staff-info__title__copy { - @extend %t-strong; - } - - .ui-staff__content { - margin-top: $baseline-v; - color: $heading-staff-color; - } - - .ui-staff__content__section { - padding-bottom: ($baseline-v/2); - @extend %wipe-last-child; - - .wrapper--input, - .wrapper--content { - padding: $baseline-v ($baseline-h/2); - background-color: $bg-content; - color: $copy-color; - } - } - - // -------------------- - // staff debug info - // -------------------- - // UI - summary (statement) - .staff-info__summary { - - .label, .value { - @extend %hd-2; - display: inline-block; - vertical-align: center; - color: $heading-staff-color; - } - - .label { - @include margin-right(($baseline-h/4)); - } - - .value { - @extend %t-strong; - } - } - - .openassessment_student_info_form { - margin-bottom: ($baseline-v/2); - - .action--submit-username { - @extend %btn--primary; - - @include margin-left(0); - } - } - - .staff-info__status__table, .staff-info__classifierset__table { - @extend %copy-3; - @include border-radius(($baseline-v/10)); - word-break: initial; - - .title { - @extend %hd-2; - @include text-align(left); - color: $heading-staff-color; - margin-bottom: ($baseline-v/2); - } - - .label { - color: $heading-staff-color; - } - - .value { - @extend %t-strong; - color: $heading-staff-color; - } - - th, td { - border: 1px solid rgba($heading-staff-color, 0.25); - padding: ($baseline-v/2) ($baseline-h/4); - } - - th, td[scope] { - @include text-align(left); - - } - - th { - @extend %copy-4; - @extend %t-titlecase; - } - - thead { - - } - - tbody { - - } - } - - // staff assessments - .wrapper--staff-assessment { - margin-top: ($baseline-v/2); - padding-top: ($baseline-v/2); - border-top: 1px solid $color-decorative-tertiary; - } - - .staff-assessment__display { - @extend %ui-subsection; - } - - .staff-assessment__display__header { - @include clearfix(); - - span { - @extend %t-strong; // FIX: needed due to DOM structure - } - - .staff-assessment__display__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - } - - .staff-assessment__display__response { - @extend %ui-subsection-content; - @extend %copy-3; - @extend %ui-content-longanswer; - @extend %ui-well; - color: $copy-color; - } - - // assessment form - .staff-assessment__assessment { - - // fields - .assessment__fields { - margin-bottom: $baseline-v; - } - - // rubric question - .assessment__rubric__question { - @extend %ui-rubric-question; - margin-bottom: 0px; - } - - // rubric options - .question__answers { - @extend %ui-rubric-answers; - } - - // general feedback question - .assessment__rubric__question--feedback { - - .wrapper--input { - margin-top: $baseline-v; - } - - .question__title__copy { - @include margin-left(0); - white-space: pre-wrap; - } - - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*5); - } - } - } - - // Styling for staff grade tab ("Grade Available Responses"). - .ui-staff { - - .staff__grade__control { - border-top: ($baseline-v/4) solid $color-decorative-tertiary; - background: $bg-content; - background-color: $bg-content; - - .staff__grade__header { - margin-bottom: 0; - } - - .staff__grade__title { - @include text-align(left); - @include float(none); - - padding: 0 $baseline-v; - display: block; - width: 100%; - - .staff__grade__show-form { - @extend %btn-reset; - @extend %t-superheading; - @include fontSize($f-size-medium); - - background-color: $bg-content; - text-transform: none; - letter-spacing: normal; - padding: 0; - } - } - - .staff__grade__status { - display: inline-block; - padding: 0 $baseline-v; - - @include media($bp-dm) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v*2); - } - - @include media($bp-dl) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v*2); - } - - @include media($bp-dx) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v*2); - } - - .staff__grade__value { - border-radius: ($baseline-v/10); - padding: ($baseline-v/4) ($baseline-h/4); - background: $color-decorative-tertiary; - line-height: 0; - - @include media($bp-ds) { - display: block; - } - - @include media($bp-dm) { - display: block; - } - - @include media($bp-dl) { - display: block; - } - - @include media($bp-dx) { - display: block; - } - } - - .copy { - @extend %t-score; - color: $heading-color; - } - } - - .submit_assessment--action { - display: inline; - } - - .staff__grade__content { - padding: 0; - } - } - } - - // UI - cancel submission (action) - .staff-info__workflow-cancellation { - - .staff-info__cancel-submission__content { - - .comments__label { - color: $copy-color; - } - - .cancel_submission_comments { - width: 100%; - min-height: ($baseline-v*5); - text-align: left; - } - } - } - - // Learner info section - .staff-info__student__report { - - .staff-info__final__grade__table { - margin-top: ($baseline-v/2); - } - - .staff_area_override_unaavilable_msg { - margin-top: ($baseline-v/2); - } - } -} - -// Staff edit settings form -#oa_basic_settings_editor, -#oa_peer_assessment_editor { - .warning-banner { - background: #fffaed; - border: 1px solid #ffd875; - padding: .75rem 1.25rem; - - &.is--hidden { - display: none; - } - - span.icon.fa-exclamation-circle { - font-size: 1.5rem; - color: #ffd875; - } - } -} - diff --git a/cms/static/sass/iframe-editors/oa/themes/edx/_base.scss b/cms/static/sass/iframe-editors/oa/themes/edx/_base.scss deleted file mode 100644 index d1c104af8694..000000000000 --- a/cms/static/sass/iframe-editors/oa/themes/edx/_base.scss +++ /dev/null @@ -1,17 +0,0 @@ -// edX theme: base -// ==================== - -// NOTES: -// * This is where any edX-theme related base styling is defined - -.wrapper--xblock { - - .problem { - - } - - .problem__header { - @extend %hd-problem; - } -} - diff --git a/cms/static/sass/iframe-editors/oa/themes/edx/_elements.scss b/cms/static/sass/iframe-editors/oa/themes/edx/_elements.scss deleted file mode 100644 index 5677ed940b66..000000000000 --- a/cms/static/sass/iframe-editors/oa/themes/edx/_elements.scss +++ /dev/null @@ -1,5 +0,0 @@ -// edX theme: elements -// ==================== - -// NOTES: -// * This is where any edX-theme related element styling or overrides are included diff --git a/cms/static/sass/iframe-editors/oa/themes/edx/_utilities.scss b/cms/static/sass/iframe-editors/oa/themes/edx/_utilities.scss deleted file mode 100644 index 9181438f8852..000000000000 --- a/cms/static/sass/iframe-editors/oa/themes/edx/_utilities.scss +++ /dev/null @@ -1,80 +0,0 @@ -// edX theme: utilities -// ==================== - -// NOTES: -// * This is where any edX-theme related utilities (variables, mixins, extends) are defined or override previously defined elements - - -// -------------------- -// variables: new -// -------------------- -$edx-blue: rgb(58, 162, 224); -$edx-blue-l1: tint($edx-blue,20%); - - -$edx-pink: rgb(182,37,104); -$edx-pink-d1: shade($edx-pink,20%); - - -$edx-gray: rgb(164, 165, 168); -$edx-gray-l1: tint($edx-gray,20%); -$edx-gray-l2: tint($edx-gray,40%); -$edx-gray-l3: tint($edx-gray,60%); -$edx-gray-l4: tint($edx-gray,80%); -$edx-gray-l5: tint($edx-gray,90%); -$edx-gray-d1: shade($edx-gray,20%); -$edx-gray-d2: shade($edx-gray,40%); -$edx-gray-d3: shade($edx-gray,60%); -$edx-gray-d4: shade($edx-gray,80%); -$edx-gray-d5: shade($edx-gray,90%); -$edx-gray-s1: saturate($edx-gray,15%); -$edx-gray-s2: saturate($edx-gray,30%); -$edx-gray-s3: saturate($edx-gray,45%); -$edx-gray-u1: desaturate($edx-gray,15%); -$edx-gray-u2: desaturate($edx-gray,30%); -$edx-gray-u3: desaturate($edx-gray,45%); -$edx-gray-t0: rgba($edx-gray,0.125); -$edx-gray-t1: rgba($edx-gray,0.25); -$edx-gray-t2: rgba($edx-gray,0.50); -$edx-gray-t3: rgba($edx-gray,0.75); - - -// -------------------- -// variables: overrides -// -------------------- -// fonts -$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; -$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; - -// layout - grid -$max-width: 100%; -$grid-columns: 12; -$gutter: $baseline-v; - -// application - fonts -$f-title: $f-sans-serif; -$f-copy: $f-sans-serif; -$f-action: $f-sans-serif; - -// application - colors: view-based elements -$bg-view: transparent; - -$color-header-main: $black; - -$color-content: $gray-d1; - -$bg-content-main: $gray-l5; -$color-content-main: $gray-d1; - -// application - colors: staff UI -$color-decorative-staff: $edx-pink; - -// -------------------- -// extends: -// -------------------- -%hd-problem { - @extend %hd-3; - @extend %t-titlecase; - margin-bottom: $baseline-v; - color: $heading-color; -} diff --git a/cms/static/sass/iframe-editors/oa/utilities/_developer.scss b/cms/static/sass/iframe-editors/oa/utilities/_developer.scss deleted file mode 100644 index a14e2c0a2800..000000000000 --- a/cms/static/sass/iframe-editors/oa/utilities/_developer.scss +++ /dev/null @@ -1,1449 +0,0 @@ -// openassessment: utilities - developer -// ==================== - -// NOTES: -// * use this area for any developer-needed or created styling that needs to be refactored into patterns or visually polished. Please list any template/view that your styles reference when definining them (example below): - -// -------------------- -// Views: Error -// -------------------- -// .crazy-new-feature { -// background: transparent; -// } - -// -------------------- -// Views: Counterbalancing XBlock workbench styling -// -------------------- - -// -------------------- -// Views: Static HTML Page Display -// -------------------- -.view--placeholder { - background: $bg-view; - margin: ($baseline-v*2) $baseline-h; -} - -// -------------------- -// Developer styles for Staff Section -// -------------------- - - -.ora-confirmation-alert{ - @include confirm-jquery-ui; -} - -.no-close .ui-dialog-titlebar-close { - display: none; -} - -.wrapper--openassessment .wrapper--staff-area { - width: 100%; - overflow: auto; - margin-top: $baseline-v; - padding-top: 20px; - - .wrapper--staff-toolbar { - position: relative; - text-align: right; - margin: 0 0 8px; - padding: 10px; - - .ui-staff__button { - @extend %btn-reset; - display: inline-block; - margin-top: $baseline-v/2; - padding: ($baseline-v/4) ($baseline-v/2); - font-size: 12px; - border-radius: ($baseline-v/4); - text-transform: uppercase; - color: $copy-color; - background-color: $shadow-l2; - - &.is--active { - color: white; - background-color: $edx-pink; - - &:hover { - background-color: $edx-pink-d1; - } - } - - &:hover { - color: white; - background-color: $action-primary-color; - } - } - - .button-enhanced-staff-grader-demo { - $primary-500: #0A3055; - color: white; - background-color: $primary-500; // paragon primary-500 - - &:hover { - background-color: darken($primary-500, 7.5%); - } - } - } - - .wrapper--ui-staff { - margin-top: 0; - - .ui-staff_close_button { - margin: 0; - padding: 0; - border: 0; - float: right; - background-color: $staff-bg; - - // Remove button styling - font-size: 12px; - -webkit-appearance: none; - appearance: none; - background-image: none; - text-shadow: none; - box-shadow: none; - border: none; - border-image: none; - - &:hover { - color: $white; - } - } - } -} - -.staff-info__student { - .label { - color: $heading-staff-color; - margin-bottom: ($baseline-v/2); - - input { - display: block; - padding-top: 0; - padding-bottom: 0; - } - } - - .title { - @extend %hd-2; - color: $heading-staff-color; - margin-bottom: ($baseline-v/2); - } - - .title--sub { - @extend %hd-4; - color: $heading-staff-color; - margin-top: ($baseline-v/2); - margin-bottom: ($baseline-v/2); - } - - .student__answer__display__content { - border: 1px solid rgba($heading-staff-color, 0.25); - padding: ($baseline-v/2) ($baseline-h/4); - margin-bottom: ($baseline-v/2); - } - - .staff-info__student__report { - list-style-type: none; - - .title { - @extend %t-strong; - margin-top: ($baseline-v/2); - border-top: 1px solid $heading-staff-color; - padding: ($baseline-v/2) ($baseline-h/2) ($baseline-v/2) 0; - - span { - font-weight: inherit; - } - } - } - - .value { - width: $max-width/2; - } -} - -// -------------------- -// Developer Styles for Student Training -// -------------------- -.step--student-training { - - // submission - .student-training__display { - @extend %ui-subsection; - } - - .student-training__display__header { - @include clearfix(); - } - - .student-training__display__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - - .student-training__display__response { - @extend %ui-subsection-content; - @extend %copy-3; - @extend %ui-content-longanswer; - @extend %ui-well; - color: $copy-color; - } - - // assessment form - .student-training__assessment { - - // fields - .assessment__fields { - margin-bottom: $baseline-v; - } - - // rubric question - .assessment__rubric__question { - @extend %ui-rubric-question; - } - - // rubric options - .question__answers { - @extend %ui-rubric-answers; - overflow: visible; // needed for ui-hints - } - - // general feedback question - .assessment__rubric__question--feedback { - - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*5); - } - } - } - - // TYPE: correct - .message--correct { - @extend .message--complete; - margin-top: $baseline-v; - - &.is--hidden { - height: 0; - width: 0; - padding: 0; - margin: 0; - display: none; - - .step__header { - border-bottom: none; - } - } - } - - // TYPE: incorrect - .message--incorrect { - @extend .message--incomplete; - margin-top: $baseline-v; - - &.is--hidden { - height: 0; - width: 0; - padding: 0; - margin: 0; - display: none; - - .step__header { - border-bottom: none; - } - } - } -} - -// -------------------- -// Developer Styles for Studio Editing of OA problems -// -------------------- - -#openassessment-editor { - margin-bottom: 0; - height: 100%; - - .openassessment_editor_content_and_tabs { - width: 100%; - height: calc(100% - 55px); - } - - #oa_editor_window_title{ - @include float(left); - } - - input[type="number"]{ - background-image: -moz-linear-gradient(#F2F2F2,#FFF); - background-image: -webkit-linear-gradient(#F2F2F2,#FFF); - background-image: linear-gradient(#F2F2F2,#FFF); - width: 45%; - } - - #openassessment_editor_header { - background-color: #e5e5e5; - width: 100%; - top: 0; - height: 42px; - - .editor_tabs { - - display: flex; - justify-content: flex-end; - - .oa_editor_tab { - padding: 0 10px; - margin: 0px 1%; - height: 35px; - @include border-radius(5px); - box-shadow: none; - border: 0; - @include text-align(center); - - /* For an invalid tab, drop a validation error icon in the button */ - span.validation-warning { - display: none; - padding-right: 4px; - - svg { - width: 1em; - vertical-align: middle; - stroke: $edx-gray-d3; - fill: $warning-fill; - paint-order: stroke; - - path:nth-child(2) { - stroke: $warning-fill; - fill: $edx-gray-d3; - } - } - } - - a { - @include padding(8px, 0, 0, 0); - width: 100%; - text-transform: uppercase; - outline-color: transparent; - } - } - - /* Inactive tab styling */ - .ui-state-default.oa_editor_tab{ - background: #e5e5e5 none; - a { - color: $edx-gray-d3; - } - } - - /* Active tab styling */ - .ui-state-active.ui-state-default.oa_editor_tab:hover, - .ui-state-active.oa_editor_tab { - background: $edx-gray-d2 none; - a { - color: $white; - } - } - - .ui-state-default.oa_editor_tab:hover{ - background-color: $edx-gray-t3; - } - } - } - - #openassessment_validation_alert{ - width: 100%; - @include border-top-left-radius(2px); - @include border-top-right-radius(2px); - background-color: $gray-800; - border-bottom: 3px solid $warning-fill; - padding: 10px; - position: absolute; - z-index: 10; - max-height: 200px; - - .openassessment_alert_icon{ - position: absolute; - @include left(3%); - - svg { - width: 3em; - } - } - - .openassessment_alert_header { - width: 85%; - @include margin(0, 5%, 0, 10%); - - .openassessment_alert_title { - width: auto; - color: white; - } - - .openassessment_alert_message { - font-size: 80%; - color: $light-700; - } - } - - // with cancel - .openassessment_alert_close { - display: inline-block; - position: absolute; - top: 14px; - @include right(0px); - color: #e9e9e9; - font-size: 1.5em; - @include text-align(center); - margin: 5px 10px; - - [class^="icon"] { - width: auto; - margin: 0; - padding: 2px; - } - - &:hover { - color: $blue; - } - } - } - - .oa_editor_content_wrapper { - height: calc(100% - 42px); - width: 100%; - @include border-radius(3px); - border: 1px solid $edx-gray-d1; - background-color: white; - overflow-y: scroll; - position: absolute; - bottom: 0; - z-index: 11; - - transition: height 1s ease-in-out 0; - -webkit-transition: height 1s ease-in-out 0; - -moz-transition: height 1s ease-in-out 0; - } - - #openassessment_rubric_editor { - width: 100%; - height: 100%; - } - - #oa_basic_settings_editor { - #openassessment_title_editor_wrapper{ - label{ - width: 25%; - @include text-align(left); - } - input{ - width: 45%; - min-width: 100px; - } - } - } - - #openassessment_step_select_description{ - @include padding(10px, 10px, 0, 10px); - font-size: 80%; - border-top: 1px solid $edx-gray-d1; - margin: 7.5px; - } - - .openassessment_assessment_module_settings_editor.openassessment_shrink_for_drag{ - height: 40px; - } - - #ai_training_examples{ - @include margin(5px, 20px, 10px, 10px); - height: 300px; - width: calc(100% - 20px); - resize: none; - font: inherit; - line-height: 110%; - font-size: 80%; - padding: 5px 10px; - } - - .openassessment_assessment_module_settings_editor{ - @include padding(0, 15px, 10px, 0); - margin: 10px; - border: 1px solid $edx-gray-l3; - @include border-radius(3px); - position: relative; - background-color: white; - - .drag-handle{ - position: absolute; - background: center $edx-gray-t1; - display: block; - top: 0px; - @include right(0px); - z-index: 10; - width: 15px; - height: 100%; - @include border-left(1px solid $edx-gray-l3); - cursor: move; - @include transition(none); - } - - .openassessment_description_closed{ - @include padding(5px, 15px, 5px, 15px); - font-size: 75%; - margin: 0; - } - .openassessment_description{ - @include padding(5px, 15px, 0, 15px); - font-size: 75%; - margin: 0; - } - .openassessment_view_details { - @include padding(5px, 15px, 0, 15px); - font-size: 75%; - margin: 0; - - a { - color: #009fe6; - border-bottom: 1px dotted; - } - } - } - - .openassessment_assessment_module_settings_editor.ui-sortable-helper{ - opacity: 50%; - border-color: #009fe6; - } - - .openassessment_assessment_module_settings_editor:hover { - border-color: $blue; - .drag-handle { - background-color: #009fe6; - border-color: #009fe6; - @include transition(none); - } - } - - .openassessment_description{ - font-size: 75%; - margin: 0; - } - - .openassessment_inclusion_wrapper{ - margin: 0; - @include padding(15px, 5px, 5px, 8px); - @include border-top-left-radius(2px); - @include border-top-right-radius(2px); - - label{ - font-size: 19px; - cursor: pointer; - @include margin-left(($baseline-h/2)); - } - } - - label{ - @include padding-right(10px); - } - - .xblock_actions { - background-color: $edx-gray-l2; - position: absolute; - width: 100%; - bottom: 0; - } - - .openassessment_tab_instructions { - background-color: $edx-gray-t1; - border-bottom: 1px solid $edx-gray-d1; - padding: 10px; - } - - .openassessment_container_header { - margin: ($baseline-v/2) ($baseline-h/4); - padding-bottom: $baseline-v/4; - border-bottom: 1px solid; - overflow: auto; - color: $edx-gray-d2; - } - - .action.expand-collapse { - @include float(left); - .ui-toggle-expansion { - color: $edx-gray-d2; - cursor: pointer; - } - .ui-toggle-expansion:hover { - color: $edx-gray-d1; - cursor: pointer; - } - } - - .openassessment_container_header_title_box { - @include float(left); - width: 80%; - display: inline-block; - } - - .openassessment_container_header_title { - text-transform: uppercase; - cursor: default; - padding-top: 2px; - } - - .openassessment_container_guide { - @extend %t-small; - } - - .openassessment_container_remove_button{ - cursor: pointer; - h2:after{ - font-family: FontAwesome; - content: "\f00d"; - display: inline-block; - color: inherit; - margin: 0 5px; - } - h2{ - text-transform: uppercase; - font-size: 80%; - @include float(right); - display: inline-block; - padding: 3px 8px 3px 13px; - } - @include float(right); - } - .openassessment_container_remove_button:hover{ - background-color: $edx-gray-d2; - border-radius: 4px; - color: white; - } - - .openassessment_container_add_button { - h6:before{ - font-family: "FontAwesome"; - display: inline-block; - @include margin-left(5px); - @include margin-right(10px); - width: auto; - height: auto; - content: "\f067"; - } - - background-color: white; - border: 1px solid; - border-radius: 4px; - text-align: center; - color: #009fe6; - padding: 10px; - margin: 15px 10px; - } - - .openassessment_container_add_button.openassessment_highlighted_field { - color: red; - border-width: 2px; - } - - .openassessment_container_add_button:hover { - color: white; - background-color: #009fe6; - cursor: pointer; - } - - .openassessment_container_remove_button.is--disabled, - .openassessment_container_remove_button.is--disabled:hover, - .openassessment_container_add_button.is--disabled, - .openassessment_container_add_button.is--disabled:hover { - color: $edx-gray-l2; - background-color: transparent; - cursor: auto; - } - - #oa_prompts_editor_wrapper { - - .wrapper-comp-settings { - display: block; - } - - .openassessment_prompt_description { - width: 100%; - min-height: 100px; - resize: none; - border: 1px solid #b2b2b2; - border-radius: 4px; - padding: 10px; - font-family: $f-sans-serif; - font-size: 14px; - overflow: auto; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - - .openassessment_prompt_description.openassessment_highlighted_field { - border: 2px solid red; - } - } - - #oa_rubric_editor_wrapper{ - - .wrapper-comp-settings{ - display: block; - } - - // Rubric cloning section - #openassessment_rubric_clone { - @include rubric-reuse-jquery-ui; - .ui-accordion-header { - padding: 5px; - font-weight: 500; - font-size: 18px; - line-height: 28px; - - #rubric-reuse-collapse-icon::after { - @include float(right); - font-family: FontAwesome; - display: inline-block; - color: inherit; - padding: 0 5px; - content: "\f067"; - } - } - - .ui-accordion-header-active #rubric-reuse-collapse-icon::after { - content: "\f068"; - } - - .ui-accordion-header-icon { - display: none - } - - .openassessment_rubric_clone_block{ - padding: 8px 0px; - .no-select{ - user-select: none - } - } - - .ui-accordion-content { - overflow: visible; - - #openassessment_rubric_clone_form_container { - display: flex; - - #openassessment_rubric_clone_input_container { - flex: 9; - - #openassessment_rubric_clone_input { - padding: 6px; - width: 90%; - height: 40px; - vertical-align: middle; - } - - .openassessment_clone_combobox { - position: relative; - display: inline-block; - } - - .openassessment_clone_combobox_toggle { - vertical-align: middle; - font-family: FontAwesome; - margin-left: -1px; - padding: 6px; - height: 40px; - - span { - padding: 0; - } - } - } - #openassessment_rubric_clone_button_container { - flex: 3; - - #openassessment_rubric_clone_button { - margin-top: 0; - float: left; - } - } - } - - #openassessment_rubric_clone_alert { - background: #BBE6D7; - border: 1px solid #175B3C; - box-sizing: border-box; - width: 100%; - padding: 10px; - margin: 5px 0; - } - } - } - - .openassessment_criterion { - - .openassessment_criterion_add_option { - h2:before { - font-family: FontAwesome; - content: "\f067"; - display: inline-block; - margin: 0 5px; - } - @include text-align(center); - border: 1px solid; - color: #009fe6; - background-color: white; - padding: 7.5px; - @include margin(10px, 10px, 10px, 20px); - @include border-radius(3px); - cursor: pointer; - } - - .openassessment_criterion_add_option:hover{ - background-color: #009fe6; - color: white; - } - - .openassessment_criterion_basic_editor{ - .comp-setting-entry{ - @include padding-right(0); - @include margin-right(10px); - overflow: auto; - - .wrapper-comp-settings{ - label{ - padding: 0; - margin: 0; - width: 100%; - - input{ - font-size: 11px; - @include float(right); - width: 70%; - } - } - .openassessment_criterion_prompt{ - padding: 10px; - @extend .openassessment_large_text_input; - width: 70%; - @include float(right); - } - .openassessment_criterion_prompt.openassessment_highlighted_field{ - border: 2px solid red; - } - } - } - } - - .openassessment_criterion_feedback_wrapper{ - - .openassessment_criterion_feedback_header { - background-color: $edx-gray-l2; - padding: 5px; - margin: 10px; - @include border-radius(3px); - - } - - label{ - width: 100%; - select{ - @include float(right); - @include margin-right(24%); - } - } - - .openassessment_criterion_feedback_direction{ - label{ - @include margin-left(15px); - } - } - } - } - - .openassessment_criterion_option{ - @include padding(5px, 5px, 5px, 15px); - - .openassessment_criterion_option_remove_button{ - @extend .openassessment_container_remove_button; - } - - .openassessment_option_header{ - background-color: $edx-gray-t1; - @include padding(5px, 5px, 5px, 10px); - @include margin(5px, 5px, 8px, 5px); - @include border-radius(3px); - overflow: auto; - - .openassessment_option_header_title{ - cursor: default; - @include float(left); - @include padding(2.5px, 0, 0, 5px); - } - - .openassessment_option_header_remove{ - @extend .openassessment_container_remove_button; - } - } - - .openassessment_criterion_option_point_wrapper{ - width: 30%; - border-top: none; - @include padding(10px, 5px, 10px, 0px); - @include float(left); - margin: 0; - - .wrapper-comp-setting{ - min-width: 150px; - } - - label{ - width: 100%; - @include padding-left(calc((100% - 150px)/2)); - margin: 0; - @include float(right); - - input{ - min-width: 50px; - padding: 10px; - @include float(right); - width: 30%; - font-size: 11px; - } - } - } - - .openassessment_criterion_option_name_wrapper{ - @include float(left); - width: 70%; - @include padding(10px, 10px, 10px, 20px); - border-top: 0; - margin: 0; - - label{ - width: 100%; - vertical-align: middle; - padding: 0; - margin: 0; - - input{ - padding: 10px; - font-size: 11px; - width: 56%; - @include float(right); - } - } - } - - .openassessment_criterion_option_explanation_wrapper{ - @include padding(15px, 5px, 0px, 20px); - width: 100%; - display: inline-block; - margin: 0; - - label { - width: 100%; - @include text-align(left); - margin: 0; - - textarea { - padding: 10px; - @extend .openassessment_input_styling; - height: 70px; - width: 69.5%; - @include float(right); - } - } - } - } - - .openassessment_large_text_input{ - height: 70px; - width: 70%; - @extend .openassessment_input_styling; - } - - .openassessment_input_styling{ - resize: none; - box-sizing: border-box; - border: 1px solid #b2b2b2; - border-radius: 2px; - background-image: -webkit-linear-gradient(#F2F2F2,#FFF); - background-image: -moz-linear-gradient(#F2F2F2,#FFF); - background-image: linear-gradient(#F2F2F2,#FFF); - @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset); - font-family: 'Open Sans', sans-serif; - font-size: 11px; - color: #4c4c4c; - } - - #openassessment_rubric_feedback_wrapper{ - padding: 0; - - - #openassessment_rubric_feedback_header{ - background-color: $edx-gray-t1; - @include padding(7.5px, 7.5px, 7.5px, 15px); - @include margin(10px, 10px, 0, 10px); - border-radius: 3px; - } - - label{ - padding-top: 10px; - } - - textarea{ - padding: 10px; - @extend .openassessment_large_text_input; - width: 70%; - @include float(right); - } - } - } - - #oa_schedule_editor_wrapper { - .openassessment_schedule_setting_header { - font-size: 19px; - @include margin(15px, 0, 10px, 30px); - } - - .openassessment_date_config_radio_container { - border-bottom: 1px solid #e5e5e5; - - .date_config_radio_header { - font-size: 1.4em; - font-weight: 600; - } - - .date_config_doc_link { - margin: 16px 0; - color: #0075b4; - :hover { - color: #065683; - } - } - - .openassessment_date_config_radio_wrapper { - display: flex; - gap: 1em; - padding: 10px 0; - - .wrapper-comp-setting { - min-width: unset; - display: flex; - align-items: center; - - input[type="radio"] { - height: 20px; - min-width: auto; - width: 20px; - margin: 0 8px; - } - - input:disabled+label { - color: $edx-gray-l2; - font-weight: normal; - } - - .setting-label { - width: auto; - font-weight: normal; - } - } - } - } - - @media (max-width: 992px) { - .openassessment_date_config_radio_wrapper { - flex-direction: column; - gap: 0; - - .wrapper-comp-setting input[type="radio"] { - width: auto; - margin: 0 5px; - } - } - } - - li { - &:nth-child(2) { - border-bottom: 1px solid #e5e5e5; - } - } - - #peer_assessment_schedule_editor - #self_assessment_schedule_editor { - li { - &:nth-child(2) { - border-bottom: 1px solid #e5e5e5; - } - } - } - } - - hr{ - background-color: transparent; - color: $edx-gray-d3; - height: 1px; - border: 0px; - clear: both; - } - -} - -//For Both of these, we use high specificity to overload the previous styles -//without the important tag. -.modal-lg.modal-window.confirm.openassessment_modal_window{ - height: 80%; - top: 10%; - min-width: 600px; -} - -.openassessment_full_height.edit-xblock-modal, -.openassessment_full_height.xblock-editor, -.openassessment_full_height.xblock.xblock-studio_view.xblock-initialized, -[class*="view-"] .modal-lg.modal-editor .openassessment_full_height.modal-content -{ - height: 100%; -} - -#openassessment-editor { - .openassessment_highlighted_field{ - border-color: red; - border-width: 2px; - } -} - -#student_training_settings_editor { - - .openassessment_training_example { - padding: 5px; - .openassessment_training_example_header { - margin: 10px; - padding: 5px; - border-bottom: 1px solid; - overflow: auto; - color: $edx-gray-d2; - - .openassessment_training_example_header_title { - text-transform: uppercase; - width: 50%; - display: inline-block; - @include float(left); - padding-top: 2px; - } - - .openassessment_training_example_remove { - @include padding(3px, 5px, 3px, 7px); - cursor: pointer; - border-radius: 4px; - - h2:after { - font-family: FontAwesome; - content: "\f00d"; - display: inline-block; - color: inherit; - margin: 0 5px; - } - h2 { - text-transform: uppercase; - font-size: 80%; - @include float(right); - display: inline-block; - } - @include float(right); - } - - .openassessment_training_example_remove:hover { - background-color: lightgray; - } - - } - - .openassessment_training_example_body { - @include padding(0, 15px, 15px, 15px); - position: relative; - overflow: scroll; - .openassessment_training_example_essay_wrapper { - width: 58%; - display: inline-block; - position: absolute; - @include left(15px); - height: 100%; - textarea { - min-height: 90px; - height: calc(100% - 35px); - resize: none; - box-sizing: border-box; - border: 1px solid #b2b2b2; - border-radius: 2px; - @include padding(6px, 8px, 8px, 8px); - background-color: white; - @include single-box-shadow(0, 1px, 2px, 0, rgba(0, 0, 0, 0.1), inset); - font-family: 'Open Sans', sans-serif; - font-size: 11px; - color: #4c4c4c; - @include margin(5px, 15px, 0, 10px); - width: calc(100% - 25px); - } - } - - .openassessment_training_example_scored_rubric { - width: 40%; - display: inline-block; - @include float(right); - min-height: 150px; - .openassessment_training_example_criteria_selections { - .comp-setting-entry { - .wrapper-comp-setting{ - min-width: 100px; - } - margin: 0; - padding: 10px; - label{ - width: 100%; - @include margin-left(0); - select { - width: 60%; - @include float(right); - } - } - } - } - } - } - } - - .openassessment_add_training_example { - color: #009fe6; - @include text-align(center); - padding: 5px; - border: 1px solid; - border-radius: 4px; - margin: 10px; - } - - .openassessment_add_training_example:hover { - color: white; - background-color: #009fe6; - cursor: pointer; - } - - .openassessment_add_training_example:before { - font-family: "FontAwesome"; - display: inline-block; - width: auto; - height: auto; - content: "\f067"; - margin: 0 10px; - } -} - -#openassessment-editor .wrapper-comp-settings .list-input.settings-list .field.comp-setting-entry select { - padding: 5px; -} - -//--------------------------- -// Developer Styles for Image Submission -//--------------------------- - -.step--response { - - .action--upload { - @extend %btn--secondary; - @extend %action-2; - @include text-align(center); - @include float(right); - - display: inline-block; - margin: ($baseline-v/2) 0; - box-shadow: none; - - } - - .file--upload { - margin: $baseline-v ($baseline-v/2) $baseline-v 0; - } - - .delete__uploaded__file { - @extend %btn--secondary; - @extend %action-2; - @include text-align(center); - - display: inline-block; - margin: ($baseline-v/2); - padding: ($baseline-v/2); - box-shadow: none; - font-size: .75em; - - &:active { - text-shadow: none; - box-shadow: none; - } - &:hover { - text-shadow: none; - box-shadow: none; - } - &:focus { - text-shadow: none; - box-shadow: none; - } - } - - #team_name_and_users { - margin: ($baseline-v/2) 0; - border: 1px solid $color-decorative-secondary; - background-color: $white; - padding: $baseline-v; - } - - #team_concurrency_notice { - margin: ($baseline-v/2) 0; - border: 1px solid $color-warning; - background-color: $color-warning-back; - padding: $baseline-v; - } - - #team_user_has_previous_submission { - margin: ($baseline-v/2) 0; - border: 1px solid $color-error; - background-color: $color-error-back; - color: $color-error; - padding: $baseline-v; - } - - // assessment form - .step__rubric { - padding: ($baseline-v/2) ($baseline-h/4) 0 ($baseline-h/4); - background: $color-decorative-quaternary; - border-radius: ($baseline-v/10); - - #read-only-rubric-button{ - @extend %icon-1; - display: inline-block; - vertical-align: middle; - } - - #read_only___assessment__rubric__header{ - @extend %t-heading; - @include margin-left(($baseline-h/4)); - white-space: pre-wrap; - display: inline; - } - - // fields - .assessment__fields { - margin-bottom: $baseline-v; - } - - // rubric question - .assessment__rubric__question { - @extend %ui-rubric-question; - } - - // rubric options - .question__answers { - @extend %ui-rubric-answers; - overflow: visible; // needed for ui-hints - } - } -} -.self-assessment__display__header -.self-assessment__display__title, -.peer-assessment__display__header -.peer-assessment__display__title, -.staff-assessment__display__header -.staff-assessment__display__title, -.submission__answer__display -.submission__answer__display__title{ - margin: 10px 0; -} - - -.self-assessment__display__image, -.peer-assessment__display__image, -.staff-assessment__display__image, -.submission__answer__display__image{ - @extend .submission__answer__display__content; - max-height: 400px; - @include text-align(left); - overflow: auto; - img{ - max-height: 100%; - max-width: 100%; - } -} -.submission__answer__display__image -.submission--image{ - max-height: 250px; - max-width: 100%; -} - -.openassessment { - .step--leaderboard { - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - - .step__title { - .step__counter, .step__counter:before { - display: none; - } - - .wrapper--copy { - @include margin-left(0); - @include padding-left(0); - @include border-left(0); - } - } - - .step__label, .grade__value { - display: inline-block; - vertical-align: middle; - } - - .step__label { - @include margin-right(($baseline-h/4)); - } - - .list.leaderboard__score__list { - list-style-type: none; - - li.leaderboard__score__item { - margin: 15px 0; - - .leaderboard__list__number { - display: inline-block; - background: $edx-gray-d2; - color: white; - @include padding(5px, 5px, 3px, 5px); - font-size: 16px; - min-width: 35px; - @include text-align(center); - @include border-top-right-radius(2px); - @include border-top-left-radius(2px); - } - - .leaderboard__score__image { - max-height: 150px; - max-width: 100%; - @include margin-right(20px); - margin-bottom: 20px; - } - - .leaderboard__score__title { - font-size: 15px; - color: $heading-color; - text-transform: uppercase; - display: inline-block; - @include padding-left(15px); - } - - .leaderboard__answer { - border-top: 2px solid $edx-gray-d2; - @include single-box-shadow(0, 0, 3px, 1px, rgba(10, 10, 10, 0.1), inset); - padding: 10px; - max-height: 200px; - overflow-y: scroll; - font-size: 14px; - } - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/utilities/_extends.scss b/cms/static/sass/iframe-editors/oa/utilities/_extends.scss deleted file mode 100644 index bfe2665b9d35..000000000000 --- a/cms/static/sass/iframe-editors/oa/utilities/_extends.scss +++ /dev/null @@ -1,398 +0,0 @@ -// openassessment: utilities - extends -// ==================== - -// NOTES: -// * these are Sass-placeholders (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) that are meant for use with just openassessment UI - - -// -------------------- -// typography: subheading -// -------------------- -%t-superheading { - @extend %hd-2; - @extend %t-strong; -} - -%t-heading { - @extend %hd-4; - @extend %t-strong; -} - -%t-score { - @extend %copy-4; - @extend %t-strong; - @extend %t-titlecase; -} - - -// -------------------- -// UI: section -// -------------------- -%ui-section { - @include transition(all $tmg-f1 ease-in-out); - @include transform(scale(.99)); - @include border-radius(($baseline-v/10)); - @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2); - margin-bottom: $baseline-v; - border: 1px solid $color-decorative-tertiary; - border-top: ($baseline-v/4) solid $color-decorative-tertiary; - padding: ($baseline-v/2) ($baseline-h/2); - background: $bg-content; - - &:last-child { - margin-bottom: 0; - } - - // STATE: hover and focus - &:hover, &:focus { - @include transform(scale(1.0)); - } - - // don't zoom on hover/focus when step has error - &.has--error { - &:hover, &:focus { - @include transform(scale(.99)); - } - } - - // STATE: is showing - &.is--showing { - @include transform(scale(1.0)); - @include single-box-shadow(0, 1px, 1px, 0, $shadow-l1); - } - - // STATE: is loading - &.is--loading { - @include transform(scale(0.99)); - @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2); - } - - // STATE: is empty - &.is--empty { - - &:hover, &:focus { - @include transform(scale(0.99)); - } - } - - // STATE: is unavailable - &.is--unavailable { - border-top-color: $color-unavailable; - - &:hover, &:focus { - @include transform(scale(0.99)); - } - } - - // STATE: is in-progress - &.is--in-progress { - border-top-color: $action-primary-color; - } - - // STATE: is complete - &.is--complete { - border-top-color: $color-complete; - } - - // STATE: is incomplete - &.is--incomplete { - border-top-color: $color-incomplete; - } - - - // STATE: has errors - &.has--error { - border-top-color: $color-error; - } - - // STATE: is incomplete - &.is--closed, &.is--incomplete { - border-top-color: $color-incomplete; - } -} - -// -------------------- -// UI: subsection -// -------------------- -%ui-subsection { - margin-bottom: $baseline-v; -} - -%ui-subsection-title { - margin-bottom: ($baseline-v/2); - border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; - padding-bottom: ($baseline-v/2); -} - -%ui-subsection-content { - - p { - margin-bottom: $baseline-v; - - &:last-child { - margin-bottom: 0; - } - } -} - -// -------------------- -// UI: well -// -------------------- -%ui-well { - @include single-box-shadow(0, 1px, 2px, 1px, $shadow-l1, inset); - padding: $baseline-v ($baseline-h/2); - background: $color-decorative-quinternary; -} - - -// -------------------- -// UI: content -// -------------------- -%ui-content-longanswer { - max-height: ($baseline-v*15); - overflow-y: scroll; -} - -%action-items { - .response__submission__label { - @extend %t-score; - color: $copy-color; - display: inline-block; - vertical-align: middle; - - .save__submission__label { - @include margin-left(($baseline-h/4)); - } - - .list--actions { - @include text-align(left); - } - } - - .list--actions__item { - @include text-align(left); - margin-top: 5px; - } - - .action--save { - @extend %btn--secondary; - @extend %action-2; - display: block; - margin-bottom: ($baseline-v/2); - min-width: 215px; - - @include media($bp-ds) { - display: inline-block; - @include margin-right(($baseline-v/2)); - margin-bottom: 0; - } - - @include media($bp-dm) { - display: inline-block; - @include margin-right(($baseline-v/2)); - margin-bottom: 0; - } - - @include media($bp-dl) { - display: inline-block; - @include margin-right(($baseline-v/2)); - margin-bottom: 0; - } - - @include media($bp-dx) { - display: inline-block; - @include margin-right(($baseline-v/2)); - margin-bottom: 0; - } - } -} - -// -------------------- -// UI: rubric -// -------------------- -// rubric question -%ui-rubric-question { - @include clearfix(); - margin-bottom: 0px; - @extend %wipe-last-child; - - .question__title { - border-bottom: ($baseline-v/10) solid $heading-color; - padding-bottom: ($baseline-v/4); - - .icon { - @extend %icon-1; - display: inline-block; - vertical-align: middle; - } - } - - .question__title__copy { - @extend %t-heading; - @include margin-left(($baseline-h/4)); - white-space: pre-wrap; - display: inline; - } -} - -// rubric answers -%ui-rubric-answers { - margin-top: $baseline-v; - margin-bottom: $baseline-v; - @include margin-left(($baseline-h/2)); - - .answer, .answer--feedback { - @include row(); - @extend %wipe-last-child; - margin-bottom: ($baseline-v/2); - border-bottom: ($baseline-v/20) solid $color-decorative-quaternary; - padding-bottom: ($baseline-v/2); - } - - .wrapper--input { - margin-bottom: ($baseline-v/4); - - .answer__value, .answer__label { - display: inline-block; - vertical-align: middle; - } - - .answer__label { - @extend %copy-3; - @extend %t-strong; - margin-bottom: 0; // FIX: need to reset base label style - color: $copy-color; - } - - .answer__value { - @include margin-right(($baseline-v/2)); - - // STATE: checked - &:checked { - - + .answer__label { - color: $selected-color; - } - } - } - } - - .wrapper--metadata { - display: block; - - @include media($bp-dm) { - @include bidi-span-columns(8 of 12); - margin-bottom: 0; - } - - @include media($bp-dl) { - @include bidi-span-columns(8 of 12); - margin-bottom: 0; - } - - @include media($bp-dx) { - @include bidi-span-columns(8 of 12); - margin-bottom: 0; - } - } - - .answer__tip, .answer__points { - display: block; - } - - .answer__tip { - margin-bottom: ($baseline-v/2); - white-space: pre-wrap; - - @extend %copy-3; - @include margin-right($baseline-v); - color: $copy-color; - - @include media($bp-dm) { - @include bidi-span-columns(6 of 8); - @include float(left); - margin-bottom: 0; - } - - @include media($bp-dl) { - @include bidi-span-columns(6 of 8); - @include float(left); - margin-bottom: 0; - } - - @include media($bp-dx) { - @include bidi-span-columns(6 of 8); - @include float(left); - margin-bottom: 0; - } - - &:after { - content: ""; - } - } - - .answer__points { - @extend %t-score; - color: $copy-color; - - @include media($bp-dm) { - @include float(right); - @include text-align(right); - } - - @include media($bp-dl) { - @include float(right); - @include text-align(right); - } - - @include media($bp-dx) { - @include float(right); - @include text-align(right); - } - } - - .answer__points__label { - display: inline-block; // FIX: need to reset base label style - @include margin-left(($baseline-v/4)); - color: $copy-color; - } - - // ELEM: criterion selects - .answer { - - .wrapper--input { - @include media($bp-ds) { - @include bidi-span-columns(6 of 6); - } - - @include media($bp-dm) { - @include bidi-span-columns(4 of 12); - margin-bottom: 0; - } - - @include media($bp-dl) { - @include bidi-span-columns(4 of 12); - margin-bottom: 0; - } - - @include media($bp-dx) { - @include bidi-span-columns(4 of 12); - margin-bottom: 0; - } - } - } - - // ELEM: open text feedback for answer - .answer--feedback { - - .answer__label { - margin-bottom: ($baseline-v/4); - } - - .answer__value { - @extend %ui-content-longanswer; - min-height: ($baseline-v*5); - @include margin-right(0); - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/utilities/_mixins.scss b/cms/static/sass/iframe-editors/oa/utilities/_mixins.scss deleted file mode 100644 index 383fd2b363ff..000000000000 --- a/cms/static/sass/iframe-editors/oa/utilities/_mixins.scss +++ /dev/null @@ -1,49 +0,0 @@ -// openassessment: utilities - mixins -// ==================== - -@mixin single-box-shadow($offset-x, $offset-y, $blur-radius: 0, $spread-radius: 0, $color: grey, $inset: null) { - $shadow : ""; - @if $bi-app-direction == ltr { - $shadow: $offset-x $offset-y $blur-radius $spread-radius $color; - } @else { - $shadow: -($offset-x) $offset-y $blur-radius $spread-radius $color; - } - - @if $inset == inset { - $shadow: inset $shadow; - } - box-shadow: $shadow; -} - -@function bidi-rotate-angle($degrees) { - @if $bi-app-direction == ltr { - @return $degrees; - } @else { - @return 180deg - $degrees; - } -} - -// Bidi versions of neat mixins. -@mixin bidi-omega($query: block, $direction: default) { - @if $bi-app-direction == ltr { - @include direction-context(left-to-right) { - @include omega($query: $query, $direction: $direction); - } - } @else { - @include direction-context(right-to-left) { - @include omega($query: $query, $direction: $direction); - } - } -} - -@mixin bidi-span-columns($span: $columns of $container-columns, $display: block) { - @if $bi-app-direction == ltr { - @include direction-context(left-to-right) { - @include span-columns($span: $span, $display: $display); - } - } @else { - @include direction-context(right-to-left) { - @include span-columns($span: $span, $display: $display); - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/utilities/_shame.scss b/cms/static/sass/iframe-editors/oa/utilities/_shame.scss deleted file mode 100644 index 863a6264cd57..000000000000 --- a/cms/static/sass/iframe-editors/oa/utilities/_shame.scss +++ /dev/null @@ -1,199 +0,0 @@ -// openassessment: utilities - shame -// ==================== - -// NOTES: use for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css) - -.wrapper--xblock .openassessment h3.staff__grade__title { - font-size: inherit; - margin-bottom: 5px; -} - -.openassessment { - - // -------------------- - // LMS countermeasures - // -------------------- - // rules to overcome any poorly defined, scoped, or architected edX LMS-based CSS. Ideally this file will be removed when the LMS Front End is re-visited. - - // headers - .self-assessment__display__header, .peer-assessment__display__header, .step__header, - .staff-assessment__display__header, .submission__answer__display__header, .student-training__display__header { - margin-bottom: 0 !important; - border-radius: 0 !important; - padding-bottom: 2px !important; - font-size: initial !important; - border-bottom: none !important; - } - - span { - line-height: normal; - } - - h2 { - text-transform: none; - letter-spacing: normal; - } - - // step header - .openassessment__steps .openassessment__steps__step .step__header { - - .step__deadline { - color: $heading-color; - margin-left: 5px; - } - - // step title/name - .step__title { - @include text-align(left); - @include float(none); - margin-top: 0 !important; - - - .step__label { - text-transform: none; - letter-spacing: normal; - } - - .step__counter, .wrapper--copy { - display: inline-block; - vertical-align: middle; - } - - // step counter - .step__counter { - - // increment: show numbers using parent list counter - &:before { - @extend %hd-2; - @extend %t-strong; - content: counter(item, decimal); - counter-increment: item; - color: $copy-color; - } - } - } - } - - .step__status__value { - line-height: 0; - } - - // submission answer leaderboard fix (TNL-4009). 4 class selectors is more specific than - // lms/static/sass/course/courseware/_courseware.scss#L453 in edx-platform (3 class selectors) - .leaderboard__answer .submission__answer__display__content { - .submission__answer__part__text__title { - @include text-align(left); - @include float(none); - font-size: inherit; - margin: 0; - } - } - - .list--actions { - list-style: none !important; - @include padding-left(0 !important); - text-indent: 0 !important; - - li { - margin-bottom: 0 !important; - margin-top: 5px !important; - } - - button, .button, .action { - - span { - color: inherit; - } - } - } - - span { - color: inherit; - } - - // peer assessment - .step--peer-assessment .list--peer-assessments { - list-style: none outside none !important; - @include padding-left(0); - } - - // self assessment - - .self-assessment__display__title, .peer-assessment__display__title { - margin-bottom: ($baseline-v/2) !important; - color: $heading-color !important; - } - - // shown submission/results - .question__answers { - @include padding-left(0); - } - - // submission/results collapse and expand targets - .question__title.ui-slidable { - - .question__title__copy { - color: inherit !important; - } - } - - - .step--grade .step__title { - display: inline; - width: 100% !important; - } - - // actions - .action--submit, .action--save, .action--upload { - text-shadow: none !important; - box-shadow: none !important; - } - - // messages - .message p { - color: inherit; - } - - // -------------------- - // Studio countermeasures - // -------------------- - // rules to overcome any poorly defined, scoped, or architected edX Studio problem preview/rendering CSS. - - .icon { - font-style: normal; - } - - .step__title .step__deadline { - letter-spacing: normal; - text-transform: none; - } - - .openassessment__steps__step .step__header .step__title { - margin-bottom: 0; - } - - // - - - // -------------------- - // needed overrides - // -------------------- - .ui-hint:after { - @extend %copy-4; - @extend %deco-shadow-down; - } - - .is--collapsed { - - .question__answers { - overflow: auto; // needed for ui-hints to show and for the document flow to clear - } - } - - .wrapper--staff-assessment { - // 'p' elements in LMS have a color set on them. - .student__answer__display__content p { - color: inherit; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/utilities/_variables.scss b/cms/static/sass/iframe-editors/oa/utilities/_variables.scss deleted file mode 100644 index c8388d7eb74b..000000000000 --- a/cms/static/sass/iframe-editors/oa/utilities/_variables.scss +++ /dev/null @@ -1,23 +0,0 @@ -// openassessment: utilities - variables -// ==================== - -// NOTES: -// * these are openassessment-specific variable files - -// -------------------- -// layout (neat-based) - forced breakpoints/sizing -// -------------------- -$grid-size-s: 530px; // small -$grid-size-m: 760px; // medium -$grid-size-l: 925px; // large -$grid-size-x: 1300px; // extra large -$grid-size-f: 1600px; // full size - -// -------------------- -// layout (neat-based) - mediaqueries -// -------------------- -$bp-m: new-breakpoint(max-width ($grid-size-s - 1) 4); // mobile devices - make grid 4 columns -$bp-ds: new-breakpoint(min-width $grid-size-s max-width ($grid-size-m - 1) 6); // small displays - make grid 6 columns -$bp-dm: new-breakpoint(min-width $grid-size-m max-width ($grid-size-l - 1) 12); // medium displays - make grid 12 columns -$bp-dl: new-breakpoint(min-width $grid-size-l max-width ($grid-size-x - 1) 12); // large displays - make grid 12 columns -$bp-dx: new-breakpoint(min-width $grid-size-x 12); // large displays - make grid 12 columns diff --git a/cms/static/sass/iframe-editors/oa/vendor/_hint.scss b/cms/static/sass/iframe-editors/oa/vendor/_hint.scss deleted file mode 100644 index 7c7dfcbb3184..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/_hint.scss +++ /dev/null @@ -1,282 +0,0 @@ -/*! Hint.css - v1.3.1 - 2013-11-23 -* http://kushagragour.in/lab/hint/ -* Copyright (c) 2013 Kushagra Gour; Licensed MIT */ - -/*-------------------------------------*\ - HINT.css - A CSS tooltip library -\*-------------------------------------*/ -/** - * HINT.css is a tooltip library made in pure CSS. - * - * Source: https://github.com/chinchang/hint.css - * Demo: http://kushagragour.in/lab/hint/ - * - * Release under The MIT License - * - */ -/** - * source: hint-core.scss - * - * Defines the basic styling for the tooltip. - * Each tooltip is made of 2 parts: - * 1) body (:after) - * 2) arrow (:before) - * - * Classes added: - * 1) hint - */ -.hint, [data-hint] { - position: relative; - display: inline-block; - /** - * tooltip arrow - */ - /** - * tooltip body - */ } - .hint:before, .hint:after, [data-hint]:before, [data-hint]:after { - position: absolute; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - visibility: hidden; - opacity: 0; - z-index: 1000000; - pointer-events: none; - -webkit-transition: 0.3s ease; - -moz-transition: 0.3s ease; - transition: 0.3s ease; } - .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after { - visibility: visible; - opacity: 1; } - .hint:before, [data-hint]:before { - content: ''; - position: absolute; - background: transparent; - border: 6px solid transparent; - z-index: 1000001; } - .hint:after, [data-hint]:after { - content: attr(data-hint); - background: #383838; - color: white; - text-shadow: 0 -1px 0px black; - padding: 8px 10px; - font-size: 12px; - line-height: 12px; - white-space: nowrap; - box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } - -/** - * source: hint-position.scss - * - * Defines the positoning logic for the tooltips. - * - * Classes added: - * 1) hint--top - * 2) hint--bottom - * 3) hint--left - * 4) hint--right - */ -/** - * set default color for tooltip arrows - */ -.hint--top:before { - border-top-color: #383838; } - -.hint--bottom:before { - border-bottom-color: #383838; } - -.hint--left:before { - border-left-color: #383838; } - -.hint--right:before { - border-right-color: #383838; } - -/** - * top tooltip - */ -.hint--top:before { - margin-bottom: -12px; } -.hint--top:after { - margin-left: -18px; } -.hint--top:before, .hint--top:after { - bottom: 100%; - left: 50%; } -.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } - -/** - * bottom tooltip - */ -.hint--bottom:before { - margin-top: -12px; } -.hint--bottom:after { - margin-left: -18px; } -.hint--bottom:before, .hint--bottom:after { - top: 100%; - left: 50%; } -.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } - -/** - * right tooltip - */ -.hint--right:before { - margin-left: -12px; - margin-bottom: -6px; } -.hint--right:after { - margin-bottom: -14px; } -.hint--right:before, .hint--right:after { - left: 100%; - bottom: 50%; } -.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * left tooltip - */ -.hint--left:before { - margin-right: -12px; - margin-bottom: -6px; } -.hint--left:after { - margin-bottom: -14px; } -.hint--left:before, .hint--left:after { - right: 100%; - bottom: 50%; } -.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } - -/** - * source: hint-color-types.scss - * - * Contains tooltips of various types based on color differences. - * - * Classes added: - * 1) hint--error - * 2) hint--warning - * 3) hint--info - * 4) hint--success - * - */ -/** - * Error - */ -.hint--error:after { - background-color: #b34e4d; - text-shadow: 0 -1px 0px #592726; } -.hint--error.hint--top:before { - border-top-color: #b34e4d; } -.hint--error.hint--bottom:before { - border-bottom-color: #b34e4d; } -.hint--error.hint--left:before { - border-left-color: #b34e4d; } -.hint--error.hint--right:before { - border-right-color: #b34e4d; } - -/** - * Warning - */ -.hint--warning:after { - background-color: #c09854; - text-shadow: 0 -1px 0px #6c5328; } -.hint--warning.hint--top:before { - border-top-color: #c09854; } -.hint--warning.hint--bottom:before { - border-bottom-color: #c09854; } -.hint--warning.hint--left:before { - border-left-color: #c09854; } -.hint--warning.hint--right:before { - border-right-color: #c09854; } - -/** - * Info - */ -.hint--info:after { - background-color: #3986ac; - text-shadow: 0 -1px 0px #193b4d; } -.hint--info.hint--top:before { - border-top-color: #3986ac; } -.hint--info.hint--bottom:before { - border-bottom-color: #3986ac; } -.hint--info.hint--left:before { - border-left-color: #3986ac; } -.hint--info.hint--right:before { - border-right-color: #3986ac; } - -/** - * Success - */ -.hint--success:after { - background-color: #458746; - text-shadow: 0 -1px 0px #1a321a; } -.hint--success.hint--top:before { - border-top-color: #458746; } -.hint--success.hint--bottom:before { - border-bottom-color: #458746; } -.hint--success.hint--left:before { - border-left-color: #458746; } -.hint--success.hint--right:before { - border-right-color: #458746; } - -/** - * source: hint-always.scss - * - * Defines a persisted tooltip which shows always. - * - * Classes added: - * 1) hint--always - * - */ -.hint--always:after, .hint--always:before { - opacity: 1; - visibility: visible; } -.hint--always.hint--top:after, .hint--always.hint--top:before { - -webkit-transform: translateY(-8px); - -moz-transform: translateY(-8px); - transform: translateY(-8px); } -.hint--always.hint--bottom:after, .hint--always.hint--bottom:before { - -webkit-transform: translateY(8px); - -moz-transform: translateY(8px); - transform: translateY(8px); } -.hint--always.hint--left:after, .hint--always.hint--left:before { - -webkit-transform: translateX(-8px); - -moz-transform: translateX(-8px); - transform: translateX(-8px); } -.hint--always.hint--right:after, .hint--always.hint--right:before { - -webkit-transform: translateX(8px); - -moz-transform: translateX(8px); - transform: translateX(8px); } - -/** - * source: hint-rounded.scss - * - * Defines rounded corner tooltips. - * - * Classes added: - * 1) hint--rounded - * - */ -.hint--rounded:after { - border-radius: 4px; } - -/** - * source: hint-effects.scss - * - * Defines various transition effects for the tooltips. - * - * Classes added: - * 1) hint--bounce - * - */ -.hint--bounce:before, .hint--bounce:after { - -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); - -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); - transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } diff --git a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-ltr.scss b/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-ltr.scss deleted file mode 100755 index 6278a31380e8..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-ltr.scss +++ /dev/null @@ -1,11 +0,0 @@ -// ------------------------------------------ -// left to right module -// authors: -// twitter.com/anasnakawa -// twitter.com/victorzamfir -// licensed under the MIT license -// http://www.opensource.org/licenses/mit-license.php -// ------------------------------------------ - -@import 'variables-ltr'; -@import 'mixins'; \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-rtl.scss b/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-rtl.scss deleted file mode 100755 index 17b7f2e90fe7..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_bi-app-rtl.scss +++ /dev/null @@ -1,11 +0,0 @@ -// ------------------------------------------ -// right to left module -// authors: -// twitter.com/anasnakawa -// twitter.com/victorzamfir -// licensed under the MIT license -// http://www.opensource.org/licenses/mit-license.php -// ------------------------------------------ - -@import 'variables-rtl'; -@import 'mixins'; \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_mixins.scss b/cms/static/sass/iframe-editors/oa/vendor/bi-app/_mixins.scss deleted file mode 100755 index 353999671d4c..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_mixins.scss +++ /dev/null @@ -1,294 +0,0 @@ -// ------------------------------------------ -// bi app mixins -// authors: -// twitter.com/anasnakawa -// twitter.com/victorzamfir -// licensed under the MIT license -// http://www.opensource.org/licenses/mit-license.php -// ------------------------------------------ - -// ------------------------------------------ -// Table of contents -// ------------------------------------------ -// padding -// margin -// float -// text align -// clear -// left / right -// border -// - width -// - style -// - color -// - generic -// - radius -// ltr / rtl contents -// ------------------------------------------ - -// generic mixin for properties with values -// (top right bottom left) -// ------------------------------------------ -@mixin bi-app-compact($property, $top, $right, $bottom, $left) { - @if $bi-app-direction == ltr { - #{$property}: $top $right $bottom $left; - } @else { - #{$property}: $top $left $bottom $right; - } -} - -// padding -// ------------------------------------------ -@mixin padding-left($distance) { - padding-#{$bi-app-left}: $distance; -} - -@mixin padding-right($distance) { - padding-#{$bi-app-right}: $distance; -} - -@mixin padding($top, $right, $bottom, $left) { - @include bi-app-compact(padding, $top, $right, $bottom, $left); -} - -// margin -// ------------------------------------------ -@mixin margin-left($distance) { - margin-#{$bi-app-left}: $distance; -} - -@mixin margin-right($distance) { - margin-#{$bi-app-right}: $distance; -} - -@mixin margin($top, $right, $bottom, $left) { - @include bi-app-compact(margin, $top, $right, $bottom, $left); -} - -// float -// ------------------------------------------ -@mixin bi-app-float-left { - float: $bi-app-left; -} - -@mixin bi-app-float-right { - float: $bi-app-right; -} - -@mixin float($direction) { - @if $direction == left { - @include bi-app-float-left; - } @else if $direction == right { - @include bi-app-float-right; - } @else { - float: $direction; - } -} - -// text align -// ------------------------------------------ -@mixin bi-app-text-align-left { - text-align: $bi-app-left; -} - -@mixin bi-app-text-align-right { - text-align: $bi-app-right; -} - -@mixin text-align($direction) { - @if $direction == left { - @include bi-app-text-align-left; - } @else if $direction == right { - @include bi-app-text-align-right; - } @else { - text-align: $direction; - } -} - -// clear -// ------------------------------------------ -@mixin bi-app-clear-left { - clear: $bi-app-left; -} - -@mixin bi-app-clear-right { - clear: $bi-app-right; -} - -@mixin clear($direction) { - @if $direction == left { - @include bi-app-clear-left; - } @else if $direction == right { - @include bi-app-clear-right; - } @else { - clear: $direction; - } -} - -// left / right -// ------------------------------------------ -@mixin left($distance) { - @if $bi-app-direction == ltr { - left: $distance; - } @else if $bi-app-direction == rtl { - right: $distance; - } -} - -@mixin right($distance) { - @if $bi-app-direction == ltr { - right: $distance; - } @else if $bi-app-direction == rtl { - left: $distance; - } -} - -// border -// ------------------------------------------ - -// width -@mixin border-left-width($width) { - border-#{$bi-app-left}-width: $width; -} - -@mixin border-right-width($width) { - border-#{$bi-app-right}-width: $width; -} - -@mixin border-width($top, $right, $bottom, $left) { - @include bi-app-compact(border-width, $top, $right, $bottom, $left); -} - -// style -@mixin border-left-style($style) { - border-#{$bi-app-left}-style: $style; -} - -@mixin border-right-style($style) { - border-#{$bi-app-right}-style: $style; -} - -@mixin border-style($top, $right, $bottom, $left) { - @include bi-app-compact(border-style, $top, $right, $bottom, $left); -} - -// color -@mixin border-left-color($color) { - border-#{$bi-app-left}-color: $color; -} - -@mixin border-right-color($color) { - border-#{$bi-app-right}-color: $color; -} - -@mixin border-color($top, $right, $bottom, $left) { - @include bi-app-compact(border-color, $top, $right, $bottom, $left); -} - -// generic -@mixin border-left($border-style) { - border-#{$bi-app-left}: $border-style; -} - -@mixin border-right($border-style) { - border-#{$bi-app-right}: $border-style; -} - -// radius -@mixin border-top-left-radius($radius) { - -webkit-border-top-#{$bi-app-left}-radius: $radius; - -moz-border-top#{$bi-app-left}-radius: $radius; - border-top-#{$bi-app-left}-radius: $radius; -} - -@mixin border-top-right-radius($radius) { - -webkit-border-top-#{$bi-app-right}-radius: $radius; - -moz-border-top#{$bi-app-right}-radius: $radius; - border-top-#{$bi-app-right}-radius: $radius; -} - -@mixin border-bottom-left-radius($radius) { - -webkit-border-bottom-#{$bi-app-left}-radius: $radius; - -moz-border-bottom#{$bi-app-left}-radius: $radius; - border-bottom-#{$bi-app-left}-radius: $radius; -} - -@mixin border-bottom-right-radius($radius) { - -webkit-border-bottom-#{$bi-app-right}-radius: $radius; - -moz-border-bottom#{$bi-app-right}-radius: $radius; - border-bottom-#{$bi-app-right}-radius: $radius; -} - -@mixin border-right-radius($radius) { - @include border-top-right-radius($radius); - @include border-bottom-right-radius($radius); -} - -@mixin border-left-radius($radius) { - @include border-top-left-radius($radius); - @include border-bottom-left-radius($radius); -} - -@mixin border-top-radius($radius) { - @include border-top-left-radius($radius); - @include border-top-right-radius($radius); -} - -@mixin border-bottom-radius($radius) { - @include border-bottom-left-radius($radius); - @include border-bottom-right-radius($radius); -} - -@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) { - @if $topRight != null { - @include border-top-left-radius($topLeft); - @include border-top-right-radius($topRight); - @include border-bottom-right-radius($bottomRight); - @include border-bottom-left-radius($bottomLeft); - } @else { - -webkit-border-radius: $topLeft; - -moz-border-radius: $topLeft; - -ms-border-radius: $topLeft; - -o-border-radius: $topLeft; - border-radius: $topLeft; - } -} - -// Returns "en" or "ar", useful for image suffixes. -// Usage: background-image: url(/img/header-#{lang()}.png); -@function lang() { - @if $bi-app-direction == ltr { - @return 'en'; - } @else { - @return 'ar'; - } -} - -// Support for "direction" declaration (renders ltr/rtl). -// Useful for form elements as they swap the text-indent property and align the text accordingly. -@mixin direction { - direction: $bi-app-direction; -} - -// Inverts a percentage value. Example: 97% becames 3%. -// Useful for background-position. -@function bi-app-invert-percentage($percentage) { - @if $bi-app-direction == rtl { - @return 100% - $percentage; - } @else { - @return $percentage; - } -} - -// ltr / rtl contents -// ------------------------------------------ -@mixin ltr { - @if $bi-app-direction == ltr { - @content; - } -} - -@mixin rtl { - @if $bi-app-direction == rtl { - @content; - } -} diff --git a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-ltr.scss b/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-ltr.scss deleted file mode 100755 index 36d5a7b06e15..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-ltr.scss +++ /dev/null @@ -1,15 +0,0 @@ -// ------------------------------------------ -// left to right variables to be used by bi-app mixins -// authors: -// twitter.com/anasnakawa -// twitter.com/victorzamfir -// licensed under the MIT license -// http://www.opensource.org/licenses/mit-license.php -// ------------------------------------------ - -// namespacing variables with bi-app to -// avoid conflicting with other global variables -$bi-app-left : left; -$bi-app-right : right; -$bi-app-direction : ltr; -$bi-app-invert-direction: rtl; \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-rtl.scss b/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-rtl.scss deleted file mode 100755 index 7300f1786357..000000000000 --- a/cms/static/sass/iframe-editors/oa/vendor/bi-app/_variables-rtl.scss +++ /dev/null @@ -1,15 +0,0 @@ -// ------------------------------------------ -// right to left variables to be used by bi-app mixins -// authors: -// twitter.com/anasnakawa -// twitter.com/victorzamfir -// licensed under the MIT license -// http://www.opensource.org/licenses/mit-license.php -// ------------------------------------------ - -// namespacing variables with bi-app to -// avoid conflicting with other global variables -$bi-app-left : right; -$bi-app-right : left; -$bi-app-direction : rtl; -$bi-app-invert-direction: ltr; \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/views/_oa-base.scss b/cms/static/sass/iframe-editors/oa/views/_oa-base.scss deleted file mode 100644 index 30df32177e71..000000000000 --- a/cms/static/sass/iframe-editors/oa/views/_oa-base.scss +++ /dev/null @@ -1,1191 +0,0 @@ -// openassessment: views - base -// ==================== - -// NOTES: -// * The basic view and all of its states of the openassessment xblock - -.wrapper--openassessment { - position: relative; -} - -// default to hide and show when it is needed -.openassessment-initial-wrapper { - display: none; - - &.is--showing { - display: block; - } - - .ora-loading { - background: $color-unavailable; - padding: $baseline-h; - text-align: center; - - .wrapper--anim { - @include animation(pulse $tmg-s3 ease-in-out infinite); - } - - .icon { - display: inline-block; - color: $copy-color; - } - - .copy { - color: $copy-color; - } - } -} - -.openassessment { - @include direction(); - - // -------------------- - // general: chrome - // -------------------- - .openassessment__title { - @include row(); - @extend %t-regular; - } - - - // -------------------- - // overall message - // -------------------- - .openassessment__message { - @include row(); - background: none; - padding: 0; - } - - // -------------------- - // overall actions - // -------------------- - .list--actions { - margin-bottom: ($baseline-v/2); - @include text-align(center); - - @include media($bp-ds) { - @include text-align(right); - } - - @include media($bp-dm) { - @include text-align(right); - } - - @include media($bp-dl) { - @include text-align(right); - } - - @include media($bp-dx) { - @include text-align(right); - } - - // STATE: actions has an error - &.has--error { - - .message { - margin-bottom: $baseline-v; - @include text-align(left); - } - } - - .action--submit { - @extend %btn--primary; - @extend %action-2; - @include margin-left($baseline-v/2); - margin-top: ($baseline-v/2); - - .copy, .icon { - display: inline; - } - - .icon { - @extend %icon-2; - } - - .fa-caret-right:before { - @include transform(rotate(bidi-rotate-angle(0deg))); - } - } - } - - // -------------------- - // steps - // -------------------- - .openassessment__steps { - @extend %no-list; - counter-reset: item; // setting counter here - } - - .openassessment__steps__step { - @extend %ui-section; - - // step title - .step__title { - display: inline; - margin-bottom: ($baseline-v/2); - width: 100%; - margin-bottom: 0; - - .step__counter, .wrapper--copy { - display: inline-block; - vertical-align: middle; - } - - .wrapper--copy { - @include margin-left(($baseline-h/2)); - @include border-left(1px solid $color-decorative-tertiary); - @include padding-left(($baseline-h/2)); - - @include media($bp-m) { - @include margin-left(0); - @include border-left(none); - @include padding-left(0); - } - - @include media($bp-ds) { - @include margin-left(0); - @include border-left(none); - @include padding-left(0); - } - } - - .step__counter { - display: none; - - // increment: show numbers using parent list counter - &:before { - @extend %hd-2; - @extend %t-strong; - display: none; - content: counter(item, decimal); - counter-increment: item; - color: $copy-color; - } - - @include media($bp-dm) { - display: inline-block; - - - &:before { - display: inline; - } - } - - @include media($bp-dl) { - display: inline-block; - - - &:before { - display: inline; - } - } - - @include media($bp-dx) { - display: inline-block; - - - &:before { - display: inline; - } - } - } - - .step__label, .step__deadline { - display: block; - } - - .step__label { - @extend %t-superheading; - } - - .step__deadline { - @extend %hd-4; - color: $heading-color; - margin-left: 5px; - } - } - - // step status - .step__status { - display: inline; - margin-top: ($baseline-v/4); - - @include media($bp-dm) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v) - 12; - } - - @include media($bp-dl) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v) - 12; - } - - @include media($bp-dx) { - margin-top: 0; - @include float(right); - position: relative; - top: -($baseline-v) - 12; - } - - .step__status__value { - border-radius: ($baseline-v/10); - padding: ($baseline-v/4)-1 ($baseline-h/4); - background: $color-decorative-tertiary; - position: relative; - - @include media($bp-ds) { - display: block; - } - - @include media($bp-dm) { - display: block; - } - - @include media($bp-dl) { - display: block; - } - - @include media($bp-dx) { - display: block; - } - } - - .icon { - @extend %icon-3; - display: inline-block; - vertical-align: baseline; - @include margin-right(($baseline-h/4)); - } - - .copy { - @extend %t-score; - color: $heading-color; - } - } - - // step content wrapper - .wrapper--step__content { - margin-top: ($baseline-v/2); - padding-top: ($baseline-v/2); - border-top: 1px solid $color-decorative-tertiary; - } - - // step message - .step__message { - @include row(); - margin-bottom: $baseline-v; - } - - // step instructions - .step__instruction { - @extend %copy-2; - margin-bottom: $baseline-v; - color: $copy-color; - } - - // step content - .step__content { - margin-bottom: $baseline-v; - } - - .step__content__section { - margin-bottom: ($baseline-v*2); - - &:last-child { - @extend %wipe-last-child; - } - } - - // STATE: step is loading - &.is--loading { - - .step__header { - padding-bottom: 0; - border-bottom: none; - margin-bottom: 0; - } - - .step__counter:before, .step__label, .step__deadline { - color: $copy-color; - } - - .step__status__value { - background: $color-unavailable; - - .wrapper--anim { - @include animation(pulse $tmg-s3 ease-in-out infinite); - } - - .icon { - display: inline-block; - color: $copy-color; - } - - .copy { - color: $copy-color; - } - } - } - - // STATE: step is incomplete - &.is--incomplete { - - .step__counter:before { - border-color: $color-incomplete; - color: $copy-color; - } - - .step__status__value { - background: $color-incomplete; - - .copy, .icon { - color: $copy-color; - } - } - } - - // STATE: step is unavailable - &.is--unavailable { - - .step__counter:before, .step__label, .step__deadline { - color: $copy-color; - } - - .step__status__value { - background: $color-unavailable; - - .icon { - display: inline-block; - color: $copy-color; - } - - .copy { - color: $copy-color; - } - } - } - - // STATE: step is unavailable - &.is--waiting { - - .step__counter:before, .step__label, .step__deadline { - color: $copy-color; - } - - .step__status__value { - background: $color-unavailable; - - .icon { - display: inline-block; - color: $copy-color; - } - - .copy { - color: $copy-color; - } - } - - .step__title .grade__value__title { - color: $color-unavailable; - } - - .step__instruction, .grade__value__description { - color: $copy-color; - } - } - - // STATE: step is complete/submitted/graded - &.is--complete { - - .step__counter:before { - color: $color-complete; - } - - .step__status__value { - background: $color-complete; - - .icon { - display: inline-block; - } - - .copy, .icon { - color: $copy-inverse-color; - } - } - - button { - opacity: 1; - } - } - - // STATE: in-progress - &.is--in-progress { - - .step__counter:before { - color: $action-primary-color; - } - - .step__status__value { - background: $action-primary-color; - - .icon { - display: inline-block; - } - - .copy, .icon { - color: $copy-inverse-color; - } - } - - button { - opacity: 1; - } - } - - // STATE: has error - &.has--error { - - .step__counter:before { - border-color: rgba($color-error, 0.5); - color: $color-error; - } - - .step__status__value { - background: $color-error; - - .copy, .icon { - color: $copy-inverse-color; - } - } - - .step__label { - color: $color-error; - } - } - } - - - // -------------------- - // ui-slidable - // -------------------- - .ui-slidable__container { - .ui-slidable__content { - width: 100%; - } - - // If there is an icon, it should rotate when clicked - @include transition(color $tmg-f2 ease-in); - .icon { - @include transition(all $tmg-f2 ease-in-out 0s); - @include transform(rotate(bidi-rotate-angle(0deg))); - } - - &.is--initially--collapsed { - .ui-slidable__content { - display: none; - } - } - - &.is--showing { - .ui-slidable .icon { - @include transform(rotate(bidi-rotate-angle(90deg))); - @include transform-origin(50% 50%); - } - - .ui-slidable__container { - &:not(.is--showing) { - .icon { - @include transition(all $tmg-f2 ease-in-out 0s); - @include transform(rotate(bidi-rotate-angle(0deg))); - } - } - } - } - - .ui-slidable { - // Override default button styling. - @extend %btn-reset; - background: none; - border-radius: ($baseline-v/4); - padding: 5px; - - &:active, &:focus:not(:disabled), &:hover:not(:disabled) { - background: none; - border: none; - box-shadow: none; - } - - &:not([disabled]) { - color: $action-primary-color; - - &:hover, &:focus { - color: $action-primary-color-focus; - } - } - - .wrapper--copy { - text-align: left; - } - } - } - - // -------------------- - // submission - // -------------------- - - .submission__answer__part__prompt { - @extend %ui-well; - position: relative; - margin: ($baseline-v/2) 0; - border: 1px solid $color-decorative-tertiary; - @include border-left(($baseline-h/4) solid $color-decorative-secondary); - @include padding-left(($baseline-h*0.75)); - } - - .submission__answer__part__prompt__title { - @extend %text-sr; - } - - .submission__answer__part__prompt__copy { - @extend %copy-2; - color: $copy-color; - - > * { - margin-bottom: $baseline-v; - - &:last-child { - @extend %wipe-last-child; - } - } - - a { - @extend %link-copy; - } - } - - .submission__answer__part__text__title { - @extend %t-heading; - } - - .submission__answer__part__text__value { - margin: ($baseline-v/2) 0; - border-color: $gray-d7; - - &:not(textarea) { - border: 1px solid $color-decorative-secondary; - background-color: $white; - padding: $baseline-v; - } - } - - .submission__upload__files__title, - .submission__answer__part__tip__title { - @extend %t-heading; - } - - .submission__file__description__label { - margin-bottom: 5px; - } - - .submission__answer__file__block { - margin-bottom: 8px; - } - - .submission__img__preview { - float: left; - margin-right: 10px; - } - - // -------------------- - // response - // -------------------- - .step--response { - - // response form - .response__submission { - padding: ($baseline-v/2) ($baseline-h/4); - background: $color-decorative-quaternary; - border-radius: ($baseline-v/10); - } - - .response__submission__content { - @extend %action-items; - - label { - @extend %text-sr; - } - - .files__descriptions { - display: none; - - .submission__file__description { - padding-bottom: 10px; - } - } - - .submission__answer__part__text { - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*10); - } - } - - .submission__file__description { - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*4); - width: 70%; - } - } - - .submission__team__answer__display__file { - margin-bottom: ($baseline-v/2); - } - - .tip { - @extend %t-score; - padding: ($baseline-v/4) ($baseline-h/4); - background: $color-decorative-secondary; - color: $copy-inverse-color; - } - } - - .response__submission__actions { - @extend %action-items - } - } - - - // -------------------- - // peer assessment - // -------------------- - .step--peer-assessment { - - .list--peer-assessments { - @extend %no-list; - } - - // peer submission - .peer-assessment__display { - @extend %ui-subsection; - } - - .peer-assessment__display__header { - @include clearfix(); - - span { - @extend %t-strong; // FIX: needed due to DOM structure - } - - .peer-assessment__display__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - } - - .peer-assessment__display__response { - @extend %ui-subsection-content; - @extend %copy-3; - @extend %ui-content-longanswer; - @extend %ui-well; - color: $copy-color; - } - - // assessment form - .peer-assessment__assessment { - @extend %action-items; - - // fields - .assessment__fields { - margin-bottom: $baseline-v; - } - - // rubric question - .assessment__rubric__question { - @extend %ui-rubric-question; - } - - // rubric options - .question__answers { - @extend %ui-rubric-answers; - } - - // genereal feedback question - .assessment__rubric__question--feedback { - - .wrapper--input { - margin-top: $baseline-v; - } - - .question__title__copy { - @include margin-left(0); - white-space: pre-wrap; - } - - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*5); - } - } - } - } - - - // -------------------- - // self assessment - // -------------------- - .step--self-assessment { - - // submission - .self-assessment__display { - @extend %ui-subsection; - } - - .self-assessment__display__header { - @include clearfix(); - } - - .self-assessment__display__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - - .self-assessment__display__response { - @extend %ui-subsection-content; - @extend %copy-3; - @extend %ui-content-longanswer; - @extend %ui-well; - color: $copy-color; - } - - // assessment form - .self-assessment__assessment { - @extend %action-items; - - // fields - .assessment__fields { - margin-bottom: $baseline-v; - } - - // rubric question - .assessment__rubric__question { - @extend %ui-rubric-question; - } - - // rubric options - .question__answers { - @extend %ui-rubric-answers; - overflow: visible; // needed for ui-hints - } - - // genereal feedback question - .assessment__rubric__question--feedback { - - .wrapper--input { - margin-top: $baseline-v; - } - - .question__title__copy { - @include margin-left(0); - white-space: pre-wrap; - } - - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*5); - } - } - } - } - - - // -------------------- - // grade status - // -------------------- - // TODO: clean this up - need to make sure counter doens't show when loading or in other states - .step--grade { - - .step__title { - @include media($bp-m) { - @include bidi-span-columns(4 of 4); - } - - @include media($bp-ds) { - @include bidi-span-columns(6 of 6); - } - - @include media($bp-dm) { - @include bidi-span-columns(12 of 12); - } - - @include media($bp-dl) { - @include bidi-span-columns(12 of 12); - } - - @include media($bp-dx) { - @include bidi-span-columns(12 of 12); - } - - .step__counter, .step__counter:before { - display: none; - } - - .wrapper--copy { - @include margin-left(0); - @include border-left(none); - @include padding-left(0); - } - - .step__label, .grade__value { - display: inline; - vertical-align: middle; - } - - .step__label { - @include margin-right(($baseline-h/4)); - } - - .grade__value__title { - @extend %t-superheading; - - .grade__value__earned { - @extend %t-strong; - } - - .grade__value__potential { - @extend %t-strong; - } - } - } - - .grade__value__description { - @extend %copy-2; - margin-bottom: $baseline-v; - color: $copy-color; - } - - .grade__summary { - @extend %copy-2; - } - } - - - // -------------------- - // UI: submitted response - // -------------------- - .submission__answer__display__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - - .submission__answer__display__content { - @extend %copy-3; - @extend %ui-subsection-content; - - padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4); - border-radius: ($baseline-v/10); - list-style: none; - - .submission__answer__part { - margin: ($baseline-v*1.5) 0px 0px; - - &:first-child { - margin-top: 0px; - } - } - } - - - // -------------------- - // UI: displayed peer assessments - // -------------------- - - // peer review summary - .submission__peer-evaluations { - @extend %ui-subsection; - } - - .submission__peer-evaluations__title { - @extend %t-heading; - margin-bottom: ($baseline-v/2); - color: $heading-color; - } - - // rubric questions - .submission__peer-evaluations__questions { - @extend %no-list; - @extend %ui-subsection-content; - margin-bottom: ($baseline-v/2); - - &:last-child { - margin-bottom: 0; - border-bottom: none; - padding-bottom: 0; - } - - // individual question - .question { - margin-bottom: ($baseline-v*1.5); - @extend %wipe-last-child; - } - - .question__title { - @include clearfix(); - margin-bottom: $baseline-v; - border-bottom: ($baseline-v/10) solid $heading-color; - padding-bottom: ($baseline-v/4); - - .icon { - @extend %icon-1; - display: inline-block; - vertical-align: middle; - } - } - - .question__title__copy { - @extend %t-heading; - @include margin-left(($baseline-h/4)); - white-space: pre-wrap; - } - - .question__score { - @extend %t-score; - @include float(right); - @include margin-left($baseline-v); - } - - .question__score__value { - @extend %t-strong; - color: $heading-color; - - &:after { - content: "/"; - @include margin-left(($baseline-v/4)); - color: $heading-color; - } - } - - .question__score__potential { - @extend %t-strong; - color: $heading-color; - - .unit { - @extend %t-strong; - @include margin-left(($baseline-v/4)); - } - } - - .question__answers { - @extend %no-list; - @extend %wipe-last-child; - @include row(); - overflow: visible; // needed for ui-hints - } - - // individual answers - .answer { - margin-bottom: $baseline-v; - @extend %no-list; - - // CASE: self assessment - &.self-assessment { - @include border-left(($baseline-h/8) solid $color-decorative-quaternary); - @include padding-left(($baseline-h/2)); - - .answer__source { - color: $color-decorative-tertiary; - } - } - } - - .answer__source { - @extend %hd-5; - @extend %t-strong; - @extend %t-titlecase; - display: block; - color: $heading-color; - - .answer__source__value-with-points { - @extend %t-score; - color: $heading-color; - } - } - - .answer__value { - display: block; - margin-bottom: ($baseline-v/2); - color: $heading-color; - - .answer__value__raw { - white-space: pre-wrap; - } - } - - .answer__value__value { - @extend %hd-2; - @extend %t-strong; - color: $heading-color; - - .ui-hint { - @extend %trans-color; - color: $color-decorative-tertiary; - - // STATE: hover - needed to reset color to what's expected from _navigation.scss (TODO: clean up specificity) - &:hover, &:focus { - color: $action-primary-color-focus; - } - } - } - - .answer__score, .answer__score__value { - @extend %t-score; - display: block; - color: $heading-color; - } - } - - // criterion-based feedback - .answer--feedback { - - @include media($bp-ds) { - @include bidi-span-columns(6 of 6); - } - - @include media($bp-dm) { - @include bidi-span-columns(12 of 12); - } - - @include media($bp-dl) { - @include bidi-span-columns(12 of 12); - } - - @include media($bp-dx) { - @include bidi-span-columns(12 of 12); - } - - .answer--feedback__title { - @extend %action-2; - } - - .answer--feedback__title__copy { - @include margin-left(($baseline-h/4)); - } - - .answer--feedback__content { - margin-top: ($baseline-v/4); - } - - .action--save { - @extend %action-button !optional - } - - .feedback { - @extend %no-list; - @extend %wipe-last-child; - margin-bottom: $baseline-v; - } - - .feedback__source { - @extend %hd-5; - @extend %t-strong; - @extend %t-titlecase; - display: block; - color: $heading-color; - } - - .feedback__value { - @extend %copy-3; - display: block; - - .feedback__value__raw { - white-space: pre-wrap; - } - - } - } - - - // overall feedback form - .submission__feedback { - @extend %ui-subsection; - } - - .submission__feedback__title { - @extend %ui-subsection-title; - @extend %t-heading; - border-bottom-color: solid $heading-color; - color: $heading-color; - - .icon { - @extend %icon-1; - display: inline-block; - vertical-align: middle; - } - } - - .submission__feedback__title__copy { - @extend %t-heading; - @include margin-left(($baseline-h/4)); - } - - .submission__feedback__content { - @extend %ui-subsection-content; - margin-bottom: $baseline-v; - } - - .submission__feedback__instructions { - @extend %copy-2; - margin-bottom: $baseline-v; - color: $copy-color; - } - - .submission__feedback__elements { - padding: $baseline-v ($baseline-h/2) $baseline-v ($baseline-h/2); - background: $color-decorative-quaternary; - border-radius: ($baseline-v/10); - } - - .submission__feedback__fields { - margin-bottom: $baseline-v; - - .field { - margin-bottom: ($baseline-v*1.5); - - &:last-child { - margin-bottom: 0; - } - } - - select { - display: block; - } - - textarea { - @extend %ui-content-longanswer; - min-height: ($baseline-v*10); - } - } - - .submission__feedback__actions { - @extend %ui-subsection-content; - padding-top: 0; - - .list--actions { - padding: 0; - } - } - - .action--submit { - @extend %btn--secondary; - @extend %action-2; - @include margin-right(($baseline-v/2)); - } -} diff --git a/cms/static/sass/iframe-editors/oa/views/_oa-course-items-listing.scss b/cms/static/sass/iframe-editors/oa/views/_oa-course-items-listing.scss deleted file mode 100644 index a0380d691b9e..000000000000 --- a/cms/static/sass/iframe-editors/oa/views/_oa-course-items-listing.scss +++ /dev/null @@ -1,94 +0,0 @@ -.open-response-assessment-block { - - table { - table-layout: fixed; - } - - .open-response-assessment-msg { - margin-bottom: 20px; - } - - .open-response-assessment-content, - .open-response-assessment-item - { - display: none; - } - - .open-response-assessment-summary { - td { - border: none; - padding: 0.5rem; - } - } - - .open-response-assessment-item-breadcrumbs { - padding-bottom: 20px; - a { - cursor: pointer; - } - } - - .open-response-assessment-main-table { - th { - background-color: #ffffff; - text-align: left; - padding: 0.5rem; - - button { - background: none; - border: none; - box-shadow: none; - outline: none; - font-size: 14px; - padding-left: 0px; - text-align: left; - } - - a { - color: #000000 !important; - } - } - - td { - padding: 0.5rem; - a { - cursor: pointer; - } - } - - tbody tr:nth-child(odd) { - background-color: #f9f9f9; - } - } - - %truncated-digits { - text-overflow: ellipsis; - overflow: hidden; - } - - .ora-summary-title { - color: #0079bc; - font-weight: bold; - text-transform: uppercase; - font-size: 0.8em; - } - - .ora-summary-value { - @extend %truncated-digits; - font-size: 1.5em; - padding-top: 0.5rem; - } - - .backgrid { - @extend %truncated-digits; - .peer, .self, .staff, .waiting, .training { - width: 80px; - } - .total { - width: 140px; - } - .done { - width: 170px; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/views/_oa-jquery-ui-rubric-reuse.scss b/cms/static/sass/iframe-editors/oa/views/_oa-jquery-ui-rubric-reuse.scss deleted file mode 100644 index 1f9adb67047f..000000000000 --- a/cms/static/sass/iframe-editors/oa/views/_oa-jquery-ui-rubric-reuse.scss +++ /dev/null @@ -1,219 +0,0 @@ -/*! jQuery UI - v1.12.1 - 2021-07-13 -* http://jqueryui.com -* Includes: theme.css -* To view and modify this theme, visit http://jqueryui.com/themeroller/?bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=&bgImgOpacityHeader=30&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23ebebeb&fcHighlight=%23000000&borderColorHighlight=%23000000&bgTextureHighlight=flat&bgColorHighlight=%23d7d7d7&iconColorActive=%23777777&fcActive=%23454545&borderColorActive=%23c5c5c5&bgTextureActive=flat&bgColorActive=%23ffffff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23f3f3f3&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23ffffff&iconColorContent=%23444444&fcContent=%23454545&borderColorContent=%23c5c5c5&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23454545&borderColorHeader=%23D7D3D1&bgTextureHeader=flat&bgColorHeader=%23ffffff&cornerRadius=1px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif -* Copyright jQuery Foundation and other contributors; Licensed MIT */ - -@mixin rubric-reuse-jquery-ui { - .ui-widget { - font-family: Arial,Helvetica,sans-serif; - font-size: 1em; - } - .ui-widget .ui-widget { - font-size: 1em; - } - .ui-widget input, - .ui-widget select, - .ui-widget textarea, - .ui-widget button { - font-family: Arial,Helvetica,sans-serif; - font-size: 1em; - } - .ui-widget.ui-widget-content { - border: 1px solid #c5c5c5; - } - .ui-widget-content { - border: 1px solid #c5c5c5; - background: #ffffff; - color: #454545; - } - .ui-widget-content a { - color: #454545; - } - .ui-widget-header { - border: 1px solid #D7D3D1; - background: #ffffff; - color: #454545; - font-weight: bold; - } - .ui-widget-header a { - color: #454545; - } - - /* Interaction states - ----------------------------------*/ - .ui-state-default, - .ui-widget-content .ui-state-default, - .ui-widget-header .ui-state-default, - .ui-button, - - /* We use html here because we need a greater specificity to make sure disabled - works properly when clicked or hovered */ - html .ui-button.ui-state-disabled:hover, - html .ui-button.ui-state-disabled:active { - border: 1px solid #c5c5c5; - background: #ffffff; - font-weight: normal; - color: #454545; - } - .ui-state-default a, - .ui-state-default a:link, - .ui-state-default a:visited, - a .ui-button, - a:link .ui-button, - a:visited .ui-button, - .ui-button { - color: #454545; - text-decoration: none; - } - .ui-state-hover, - .ui-widget-content .ui-state-hover, - .ui-widget-header .ui-state-hover, - .ui-state-focus, - .ui-widget-content .ui-state-focus, - .ui-widget-header .ui-state-focus, - .ui-button:hover, - .ui-button:focus { - border: 1px solid #cccccc; - background: #f3f3f3; - font-weight: normal; - color: #2b2b2b; - } - .ui-state-hover a, - .ui-state-hover a:hover, - .ui-state-hover a:link, - .ui-state-hover a:visited, - .ui-state-focus a, - .ui-state-focus a:hover, - .ui-state-focus a:link, - .ui-state-focus a:visited, - a .ui-button:hover, - a .ui-button:focus { - color: #2b2b2b; - text-decoration: none; - } - - .ui-visual-focus { - box-shadow: 0 0 3px 1px rgb(94, 158, 214); - } - .ui-state-active, - .ui-widget-content .ui-state-active, - .ui-widget-header .ui-state-active, - a .ui-button:active, - .ui-button:active, - .ui-button.ui-state-active:hover { - border: 1px solid #c5c5c5; - background: #ffffff; - font-weight: normal; - color: #454545; - } - .ui-icon-background, - .ui-state-active .ui-icon-background { - border: #c5c5c5; - background-color: #454545; - } - .ui-state-active a, - .ui-state-active a:link, - .ui-state-active a:visited { - color: #454545; - text-decoration: none; - } - - /* Interaction Cues - ----------------------------------*/ - .ui-state-highlight, - .ui-widget-content .ui-state-highlight, - .ui-widget-header .ui-state-highlight { - border: 1px solid #000000; - background: #d7d7d7; - color: #000000; - } - .ui-state-checked { - border: 1px solid #000000; - background: #d7d7d7; - } - .ui-state-highlight a, - .ui-widget-content .ui-state-highlight a, - .ui-widget-header .ui-state-highlight a { - color: #000000; - } - .ui-state-error, - .ui-widget-content .ui-state-error, - .ui-widget-header .ui-state-error { - border: 1px solid #f1a899; - background: #fddfdf; - color: #5f3f3f; - } - .ui-state-error a, - .ui-widget-content .ui-state-error a, - .ui-widget-header .ui-state-error a { - color: #5f3f3f; - } - .ui-state-error-text, - .ui-widget-content .ui-state-error-text, - .ui-widget-header .ui-state-error-text { - color: #5f3f3f; - } - .ui-priority-primary, - .ui-widget-content .ui-priority-primary, - .ui-widget-header .ui-priority-primary { - font-weight: bold; - } - .ui-priority-secondary, - .ui-widget-content .ui-priority-secondary, - .ui-widget-header .ui-priority-secondary { - opacity: .7; - filter:Alpha(Opacity=70); /* support: IE8 */ - font-weight: normal; - } - .ui-state-disabled, - .ui-widget-content .ui-state-disabled, - .ui-widget-header .ui-state-disabled { - opacity: .35; - filter:Alpha(Opacity=35); /* support: IE8 */ - background-image: none; - } - .ui-state-disabled .ui-icon { - filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ - } - - /* Misc visuals - ----------------------------------*/ - - /* Corner radius */ - .ui-corner-all, - .ui-corner-top, - .ui-corner-left, - .ui-corner-tl { - border-top-left-radius: 1px; - } - .ui-corner-all, - .ui-corner-top, - .ui-corner-right, - .ui-corner-tr { - border-top-right-radius: 1px; - } - .ui-corner-all, - .ui-corner-bottom, - .ui-corner-left, - .ui-corner-bl { - border-bottom-left-radius: 1px; - } - .ui-corner-all, - .ui-corner-bottom, - .ui-corner-right, - .ui-corner-br { - border-bottom-right-radius: 1px; - } - - /* Overlays */ - .ui-widget-overlay { - background: #aaaaaa; - opacity: .3; - filter: Alpha(Opacity=30); /* support: IE8 */ - } - .ui-widget-shadow { - -webkit-box-shadow: 0px 0px 5px #666666; - box-shadow: 0px 0px 5px #666666; - } -} \ No newline at end of file diff --git a/cms/static/sass/iframe-editors/oa/xb/assets/_fonts.scss b/cms/static/sass/iframe-editors/oa/xb/assets/_fonts.scss deleted file mode 100644 index 4eb24393c947..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/assets/_fonts.scss +++ /dev/null @@ -1,12 +0,0 @@ -// xblock: assets - fonts -// ==================== - -// NOTES: -// * use this area to load external font/typography assets or reference any bundled with xblocks - - -// -------------------- -// EXAMPLE: Google webfonts import -// -------------------- -// import from google fonts - Lato (http://www.google.com/fonts/specimen/Lato) -// @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); diff --git a/cms/static/sass/iframe-editors/oa/xb/assets/_graphics.scss b/cms/static/sass/iframe-editors/oa/xb/assets/_graphics.scss deleted file mode 100644 index e83330df05de..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/assets/_graphics.scss +++ /dev/null @@ -1,10 +0,0 @@ -// xblock: assets - graphics -// ==================== - -// NOTES: -// * this is where any rasterized graphics/sprites are defined as well as where images/visual media are styled - -// -------------------- -// EXAMPLE: image -// -------------------- -// $logo--app: '../images/logo--app.png'; diff --git a/cms/static/sass/iframe-editors/oa/xb/contexts/_ie.scss b/cms/static/sass/iframe-editors/oa/xb/contexts/_ie.scss deleted file mode 100644 index 6838390ba873..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/contexts/_ie.scss +++ /dev/null @@ -1,28 +0,0 @@ -// xblock: contexts - internet explorer -// ==================== - -// NOTES: -// * any x-block-specific support-based styling needed for internet explorer should be placed here - -// -------------------- -// CASE: less than or equal to IE9 -// -------------------- -.lte9 { - -} - - -// -------------------- -// CASE: less than or equal to IE8 -// -------------------- -.lte8 { - -} - - -// -------------------- -// CASE: less than or equal to IE7 -// -------------------- -.lte7 { - -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_base.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_base.scss deleted file mode 100644 index 5253b53d40eb..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_base.scss +++ /dev/null @@ -1,64 +0,0 @@ -// xblock: elements - base -// ==================== - -// NOTES: -// * all base set-up styles that can be applied to any xblock - -// -------------------- -// fonts -// -------------------- -.wrapper--xblock { - background: $bg-view; -} - -// -------------------- -// layout -// -------------------- -// [class^="wrapper--"] { -// @extend %wrapper; -// padding: 0; -// } - - -// -------------------- -// semantic elements, but visually hidden -// -------------------- -.sr, -hr.divider, -.nav--contents { - @extend %text-sr; -} - -// -------------------- -// system-needed elements, but visually hidden -// -------------------- -.system__element { - @extend %text-sr; -} - - -// -------------------- -// toggling visibility -// -------------------- -.is--hidden { - @extend %state-hidden; -} - - -// -------------------- -// semantic lists used for UI -// -------------------- -.list--actions, -.list--docs, -.list--steps, -.list--fields, -.list--controls, -.list--fields, -.list--help, -.list--options, -.nav--wizard, -.list--tips, -.field--group { - @extend %no-list; - @extend %wipe-last-child; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_controls.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_controls.scss deleted file mode 100644 index 2743b9e31fd4..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_controls.scss +++ /dev/null @@ -1,140 +0,0 @@ -// xblock: elements - controls -// ==================== - -// NOTES: -// * all UI-based controls that can be extends in any xlbock - - -// -------------------- -// links -// -------------------- -// links - copy -%link-copy { - @include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out); - border-bottom: 1px solid transparent; - color: $action-primary-color; - text-decoration: none; - - &:hover, &:focus { - color: $action-primary-color-focus; - border-color: $action-primary-color-focus; - } - - &:active, &.is--current { - color: $action-primary-color-active; - border-color: $action-primary-color-active; - } -} - -// -------------------- -// buttons -// -------------------- -// buttons - archetypes -%btn { - @include box-sizing(border-box); - @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out); - display: inline-block; - cursor: pointer; - text-decoration: none; - - &:hover, &:active, &:focus { - text-decoration: none; - } - - // CASE: icons in buttons - .icon { - display: inline-block; - vertical-align: middle; - } -} - -%btn-pill { - @extend %btn; - border-radius: ($baseline-v/5); -} - -%btn-rounded { - @extend %btn; - border-radius: ($baseline-v/2); -} - -%btn-edged { - @extend %btn; - border-radius: ($baseline-v/10); -} - -%btn-reset { - font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 14px; - -webkit-appearance: none; - background-image: none; - text-shadow: none; - box-shadow: none; - border: none; - border-image: none; -} - -// buttons - primary -%btn--primary { - @extend %btn-pill; - @extend %t-strong; - padding: ($baseline-v/2) ($baseline-h); - background: $action-primary-color; - border: 1px solid $action-primary-color; - color: $copy-inverse-color; - - &:hover, &:active, &:focus { - background: $action-primary-color-focus; - border-color: $action-primary-color-focus; - } - - &.current, &.active { - background: $action-primary-color-active; - border-color: $action-primary-color-active; - - &:hover, &:active, &:focus { - - } - } - - &[disabled] { - color: $action-primary-color-disabled; - border-color: $action-primary-color-disabled; - background: $action-primary-color-disabled-back; - opacity: 1; - } -} - - -// buttons - secondary -%btn--secondary { - @extend %btn-pill; - @extend %t-strong; - padding: ($baseline-v/2) ($baseline-h); - background: $white; - border: 1px solid $uxpl-primary-dark; - color: $uxpl-primary-dark; - - &:hover, &:active, &:focus { - background: $action-primary-color; - border-color: $action-primary-color; - color: $copy-inverse-color; - } - - &.current, &.active { - background: $white; - border-color: $uxpl-primary-dark; - color: $uxpl-primary-dark; - - &:hover, &:active, &:focus { - - } - } - - &[disabled] { - background: $white; - border-color: $action-primary-color-disabled; - color: $action-primary-color-disabled; - opacity: 1; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_forms.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_forms.scss deleted file mode 100644 index 39d5585f120d..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_forms.scss +++ /dev/null @@ -1,120 +0,0 @@ -// xblock: elements - forms -// ==================== - -// NOTES: -// * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks - -// contains all form elements inside of the main xblock wrapper -.wrapper--xblock { - - - // forms - general - - // placeholder transitions - [placeholder]:focus::-webkit-input-placeholder { - @extend %trans-opacity; - opacity: 0.0; - } - - // common inputs - input[type="text"], - input[type="email"], - input[type="password"], - textarea { - @extend %t-strong; - border: 1px solid $color-decorative-secondary; - padding: ($baseline-v/2); - color: $copy-color; - - @include placeholder { - @extend %t-regular; - color: $copy-color; - } - - // STATE: focus - &:focus { - box-shadow: 0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15); - border-color: $selected-color; - } - } - - // general field UI - .field { - font-family: $f-copy; - - label, .label, .field-group__label { - @extend %copy-3; - } - - .field-group__label { - display: block; - margin-bottom: ($baseline-v/2); - } - - textarea { - width: 100%; - } - - .tip { - display: block; - @extend %copy-4; - color: $copy-color; - } - } - - // TYPE: textarea fields - .field--textarea { - - .label, label { - @extend %t-strong; - margin-bottom: ($baseline-v/2); - } - } - - // TYPE: field-group - .field-group { - - } - - .field-group__label { - @extend %t-strong; - margin-bottom: ($baseline-v/2); - } - - // TYPE: radio/checkbox fields - .field--radio, .field--checkbox { - - // general option UI - .option { - margin-bottom: ($baseline-v/4); - - &:last-child { - @extend %wipe-last-child; - } - } - - .option__input, .option__label { - display: inline-block; - vertical-align: middle; - } - - .option__label { - @extend %copy-3; - @extend %t-strong; - margin-bottom: 0; // FIX: need to reset base label style - color: $copy-color; - } - - .option__input { - @include margin-right(($baseline-v/2)); - - // STATE: checked - &:checked { - - + .option__label { - color: $selected-color; - } - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_layout.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_layout.scss deleted file mode 100644 index 98842fd95409..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_layout.scss +++ /dev/null @@ -1,9 +0,0 @@ -// xblock: elements - layouts -// ==================== - -// NOTES: -// * Grid and common page layout rules - -.wrapper--grid { - @include outer-container(); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_system-feedback.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_system-feedback.scss deleted file mode 100644 index 2187b4318312..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_system-feedback.scss +++ /dev/null @@ -1,166 +0,0 @@ -// xblock: elements - system feedback -// ==================== - -// NOTES: -// * General system feedback UI archetypes - messages, transitions, etc. - -.wrapper--xblock { - - // -------------------- - // messages - // -------------------- - .message { - margin-bottom: $baseline-v; - border-radius: ($baseline-v/10); - padding: $baseline-v ($baseline-h/2); - background: $color-decorative-quaternary; - - .message__title { - @extend %t-heading; - margin-bottom: ($baseline-v/4); - border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; - padding-bottom: ($baseline-v/4); - } - - .message__content { - @extend %copy-3; - color: $copy-color; - - p { - margin-bottom: ($baseline-v/2); - - &:last-child { - @extend %wipe-last-child; - } - } - - a { - @extend %link-copy; - } - } - } - - // TYPE: error - .message--error { - background: $color-error-back; - - .message__title { - color: $copy-color; - border-bottom-color: $color-error; - } - } - - // TYPE: warning - .message--warning { - background: $color-warning-back; - - .message__title { - color: $copy-color; - border-bottom-color: $color-warning; - } - } - - // TYPE: complete - .message--complete { - background: $color-complete-back; - - .message__title { - color: $copy-color; - border-bottom-color: $color-complete; - } - } - - // TYPE: incomplete - .message--incomplete { - background: $color-incomplete-back; - - .message__title { - color: $copy-color; - border-bottom-color: $color-incomplete; - } - } - - // CASE: showing errors is shown - .message--error { - @extend %trans-opacity; - display: none; - opacity: 0.0; - } - - .has--error { - - .message--error { - display: block; - opacity: 1.0; - } - } - - // TYPE: inline message - .message--inline { - padding: ($baseline-v/2) ($baseline-h/2); - background: tint($color-confirm, 15%); - - .message__title { - margin-bottom: 0; - border: none; - padding-bottom: 0; - color: $copy-inverse-color; - } - - &.message--error { - background: $color-error; - - .message__content { - color: $copy-inverse-color; - } - } - - &.message--warning { - background: $color-warning; - - .message__content { - color: $uxpl-gray-dark; - } - - .message__title { - color: $uxpl-gray-dark; - } - } - } - - - // -------------------- - // transitions - // -------------------- - .is--transitioning { - @extend %state-disabled; - padding: ($baseline-v*2) ($baseline-h); - background: $color-decorative-quaternary; - - .transition__status { - @include alignVertically(); - text-align: center; - - .wrapper--anim { - display: block; - @include animation(pulse $tmg-s3 ease-in-out infinite); - } - - .icon, .copy { - display: block; - color: $copy-color; - } - - .icon { - @extend %icon-0; - margin-bottom: ($baseline-v/2); - } - - .copy { - @extend %hd-2; - @extend %t-strong; - @extend %t-titlecase; - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/elements/_typography.scss b/cms/static/sass/iframe-editors/oa/xb/elements/_typography.scss deleted file mode 100644 index 8cf4ff66efca..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/elements/_typography.scss +++ /dev/null @@ -1,174 +0,0 @@ -// xblock: elements - typography -// ==================== - -// NOTES: -// * all typographical settings should be placed here for general xblocks use -// * typographical scale reference: 0, 14, 18, 24, 32, 43 - -// -------------------- -// type weights -// -------------------- -%t-ultrastrong { - font-weight: 800; -} -%t-strong { - font-weight: 600; -} -%t-regular { - font-weight: 400; -} -%t-light { - font-weight: 300; -} -%t-ultralight { - font-weight: 200; -} - -// -------------------- -// type size variants -// -------------------- -%t-xsmall { - @include typeSet(xsmall); -} - -%t-small { - @include typeSet(small); -} - -%t-base { - @include typeSet(base); -} - -%t-medium { - @include typeSet(medium); -} - -%t-large { - @include typeSet(large); -} - -%t-xlarge { - @include typeSet(xlarge); -} - - -// -------------------- -// style: titlecase -// -------------------- -%t-titlecase { - text-transform: uppercase; - letter-spacing: 0.05rem; -} - - -// -------------------- -// canned headings -// -------------------- -%hd-1 { - @extend %t-xlarge; - font-family: $f-title; -} - -%hd-2 { - @extend %t-large; - font-family: $f-title; -} - -%hd-3 { - @extend %t-medium; - font-family: $f-title; -} - -%hd-4 { - @extend %t-base; - font-family: $f-title; -} - -%hd-5 { - @extend %t-small; - font-family: $f-title; -} - - -// -------------------- -// canned copy -// -------------------- -%copy-1 { - @extend %t-large; - font-family: $f-copy; -} - -%copy-2 { - @extend %t-medium; - font-family: $f-copy; -} - -%copy-3 { - @extend %t-base; - font-family: $f-copy; -} - -%copy-4 { - @extend %t-small; - font-family: $f-copy; -} - -%copy-5 { - @extend %t-xsmall; - font-family: $f-copy; -} - - -// -------------------- -// canned actions -// -------------------- -%action-1 { - @extend %t-medium; - font-family: $f-action; -} - -%action-2 { - @extend %t-base; - font-family: $f-action; -} - -%action-3 { - @extend %t-small; - font-family: $f-action; -} - -%action-4 { - @extend %t-xsmall; - font-family: $f-action; -} - -// -------------------- -// canned icons -// -------------------- -%icon-0 { - @extend %t-xlarge; -} - -%icon-1 { - @extend %t-large; -} - -%icon-2 { - @extend %t-medium; -} - -%icon-3 { - @extend %t-base; -} - -%icon-4 { - @extend %t-small; -} - - -// -------------------- -// visual emphasis -// -------------------- -%emphasis { - @extend %t-strong; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon-deprecated-upcoming.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon-deprecated-upcoming.scss deleted file mode 100644 index 5332496d82ef..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon-deprecated-upcoming.scss +++ /dev/null @@ -1,13 +0,0 @@ -//************************************************************************// -// These mixins/functions are deprecated -// They will be removed in the next MAJOR version release -//************************************************************************// -@mixin box-shadow ($shadows...) { - @include prefixer(box-shadow, $shadows, spec); - @warn "box-shadow is deprecated and will be removed in the next major version release"; -} - -@mixin background-size ($lengths...) { - @include prefixer(background-size, $lengths, spec); - @warn "background-size is deprecated and will be removed in the next major version release"; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon.scss deleted file mode 100644 index 53fbca877f04..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/_bourbon.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Custom Helpers -@import "helpers/deprecated-webkit-gradient"; -@import "helpers/gradient-positions-parser"; -@import "helpers/linear-positions-parser"; -@import "helpers/radial-arg-parser"; -@import "helpers/radial-positions-parser"; -@import "helpers/render-gradients"; -@import "helpers/shape-size-stripper"; - -// Custom Functions -@import "functions/compact"; -@import "functions/flex-grid"; -@import "functions/grid-width"; -@import "functions/linear-gradient"; -@import "functions/modular-scale"; -@import "functions/px-to-em"; -@import "functions/radial-gradient"; -@import "functions/tint-shade"; -@import "functions/transition-property-name"; - -// CSS3 Mixins -@import "css3/animation"; -@import "css3/appearance"; -@import "css3/backface-visibility"; -@import "css3/background"; -@import "css3/background-image"; -@import "css3/border-image"; -@import "css3/border-radius"; -@import "css3/box-sizing"; -@import "css3/columns"; -@import "css3/flex-box"; -@import "css3/font-face"; -@import "css3/hidpi-media-query"; -@import "css3/image-rendering"; -@import "css3/inline-block"; -@import "css3/keyframes"; -@import "css3/linear-gradient"; -@import "css3/perspective"; -@import "css3/radial-gradient"; -@import "css3/transform"; -@import "css3/transition"; -@import "css3/user-select"; -@import "css3/placeholder"; - -// Addons & other mixins -@import "addons/button"; -@import "addons/clearfix"; -@import "addons/font-family"; -@import "addons/hide-text"; -@import "addons/html5-input-types"; -@import "addons/position"; -@import "addons/prefixer"; -@import "addons/retina-image"; -@import "addons/size"; -@import "addons/timing-functions"; -@import "addons/triangle"; - -// Soon to be deprecated Mixins -@import "bourbon-deprecated-upcoming"; diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_button.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_button.scss deleted file mode 100644 index 3ae393c090f9..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_button.scss +++ /dev/null @@ -1,273 +0,0 @@ -@mixin button ($style: simple, $base-color: #4294f0) { - - @if type-of($style) == color { - $base-color: $style; - $style: simple; - } - - // Grayscale button - @if $base-color == grayscale($base-color) { - @if $style == simple { - @include simple($base-color, $grayscale: true); - } - - @else if $style == shiny { - @include shiny($base-color, $grayscale: true); - } - - @else if $style == pill { - @include pill($base-color, $grayscale: true); - } - } - - // Colored button - @else { - @if $style == simple { - @include simple($base-color); - } - - @else if $style == shiny { - @include shiny($base-color); - } - - @else if $style == pill { - @include pill($base-color); - } - } - - &:disabled { - opacity: 0.5; - cursor: not-allowed; - } -} - - -// Simple Button -//************************************************************************// -@mixin simple($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); - $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); - $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border: grayscale($border); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); - } - - border: 1px solid $border; - border-radius: 3px; - box-shadow: inset 0 1px 0 0 $inset-shadow; - color: $color; - display: inline-block; - font-size: 11px; - font-weight: bold; - @include linear-gradient ($base-color, $stop-gradient); - padding: 7px 18px; - text-decoration: none; - text-shadow: 0 1px 0 $text-shadow; - background-clip: padding-box; - - &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); - $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); - - @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - } - - box-shadow: inset 0 1px 0 0 $inset-shadow-hover; - cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); - } - - &:active:not(:disabled) { - $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); - $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); - - @if $grayscale == true { - $border-active: grayscale($border-active); - $inset-shadow-active: grayscale($inset-shadow-active); - } - - border: 1px solid $border-active; - box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; - } -} - - -// Shiny Button -//************************************************************************// -@mixin shiny($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); - $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); - $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); - $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); - $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); - $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); - $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border: grayscale($border); - $border-bottom: grayscale($border-bottom); - $fourth-stop: grayscale($fourth-stop); - $inset-shadow: grayscale($inset-shadow); - $second-stop: grayscale($second-stop); - $text-shadow: grayscale($text-shadow); - $third-stop: grayscale($third-stop); - } - - border: 1px solid $border; - border-bottom: 1px solid $border-bottom; - border-radius: 5px; - box-shadow: inset 0 1px 0 0 $inset-shadow; - color: $color; - display: inline-block; - font-size: 14px; - font-weight: bold; - @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); - padding: 8px 20px; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 1px $text-shadow; - - &:hover:not(:disabled) { - $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); - $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); - $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); - $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); - - @if $grayscale == true { - $first-stop-hover: grayscale($first-stop-hover); - $second-stop-hover: grayscale($second-stop-hover); - $third-stop-hover: grayscale($third-stop-hover); - $fourth-stop-hover: grayscale($fourth-stop-hover); - } - - cursor: pointer; - @include linear-gradient(top, $first-stop-hover 0%, - $second-stop-hover 50%, - $third-stop-hover 50%, - $fourth-stop-hover 100%); - } - - &:active:not(:disabled) { - $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); - - @if $grayscale == true { - $inset-shadow-active: grayscale($inset-shadow-active); - } - - box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; - } -} - - -// Pill Button -//************************************************************************// -@mixin pill($base-color, $grayscale: false) { - $color: hsl(0, 0, 100%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); - $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); - $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); - $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); - - @if lightness($base-color) > 70% { - $color: hsl(0, 0, 20%); - $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); - } - - @if $grayscale == true { - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow: grayscale($inset-shadow); - $stop-gradient: grayscale($stop-gradient); - $text-shadow: grayscale($text-shadow); - } - - border: 1px solid $border-top; - border-color: $border-top $border-sides $border-bottom; - border-radius: 16px; - box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; - color: $color; - display: inline-block; - font-size: 11px; - font-weight: normal; - line-height: 1; - @include linear-gradient ($base-color, $stop-gradient); - padding: 5px 16px; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 1px $text-shadow; - background-clip: padding-box; - - &:hover:not(:disabled) { - $base-color-hover: adjust-color($base-color, $lightness: -4.5%); - $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); - $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); - $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); - $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); - $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); - $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); - - @if $grayscale == true { - $base-color-hover: grayscale($base-color-hover); - $border-bottom: grayscale($border-bottom); - $border-sides: grayscale($border-sides); - $border-top: grayscale($border-top); - $inset-shadow-hover: grayscale($inset-shadow-hover); - $stop-gradient-hover: grayscale($stop-gradient-hover); - $text-shadow-hover: grayscale($text-shadow-hover); - } - - border: 1px solid $border-top; - border-color: $border-top $border-sides $border-bottom; - box-shadow: inset 0 1px 0 0 $inset-shadow-hover; - cursor: pointer; - @include linear-gradient ($base-color-hover, $stop-gradient-hover); - text-shadow: 0 -1px 1px $text-shadow-hover; - background-clip: padding-box; - } - - &:active:not(:disabled) { - $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); - $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); - $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); - $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); - $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); - - @if $grayscale == true { - $active-color: grayscale($active-color); - $border-active: grayscale($border-active); - $border-bottom-active: grayscale($border-bottom-active); - $inset-shadow-active: grayscale($inset-shadow-active); - $text-shadow-active: grayscale($text-shadow-active); - } - - background: $active-color; - border: 1px solid $border-active; - border-bottom: 1px solid $border-bottom-active; - box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; - text-shadow: 0 -1px 1px $text-shadow-active; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_clearfix.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_clearfix.scss deleted file mode 100644 index ca9903cf02e2..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_clearfix.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Micro clearfix provides an easy way to contain floats without adding additional markup -// -// Example usage: -// -// // Contain all floats within .wrapper -// .wrapper { -// @include clearfix; -// .content, -// .sidebar { -// float : left; -// } -// } - -@mixin clearfix { - *zoom: 1; - - &:before, - &:after { - content: " "; - display: table; - } - - &:after { - clear: both; - } -} - -// Acknowledgements -// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_font-family.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_font-family.scss deleted file mode 100644 index df8a80ddfcfe..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_font-family.scss +++ /dev/null @@ -1,5 +0,0 @@ -$georgia: Georgia, Cambria, "Times New Roman", Times, serif; -$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; -$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; -$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; -$verdana: Verdana, Geneva, sans-serif; diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_hide-text.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_hide-text.scss deleted file mode 100644 index 68d4bf86cb2d..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_hide-text.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin hide-text { - color: transparent; - font: 0/0 a; - text-shadow: none; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_html5-input-types.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_html5-input-types.scss deleted file mode 100644 index b184382d910c..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_html5-input-types.scss +++ /dev/null @@ -1,56 +0,0 @@ -//************************************************************************// -// Generate a variable ($all-text-inputs) with a list of all html5 -// input types that have a text-based input, excluding textarea. -// http://diveintohtml5.org/forms.html -//************************************************************************// -$inputs-list: 'input[type="email"]', - 'input[type="number"]', - 'input[type="password"]', - 'input[type="search"]', - 'input[type="tel"]', - 'input[type="text"]', - 'input[type="url"]', - - // Webkit & Gecko may change the display of these in the future - 'input[type="color"]', - 'input[type="date"]', - 'input[type="datetime"]', - 'input[type="datetime-local"]', - 'input[type="month"]', - 'input[type="time"]', - 'input[type="week"]'; - -$unquoted-inputs-list: (); -@each $input-type in $inputs-list { - $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); -} - -$all-text-inputs: $unquoted-inputs-list; - - -// Hover Pseudo-class -//************************************************************************// -$all-text-inputs-hover: (); -@each $input-type in $unquoted-inputs-list { - $input-type-hover: $input-type + ":hover"; - $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); -} - -// Focus Pseudo-class -//************************************************************************// -$all-text-inputs-focus: (); -@each $input-type in $unquoted-inputs-list { - $input-type-focus: $input-type + ":focus"; - $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); -} - -// You must use interpolation on the variable: -// #{$all-text-inputs} -// #{$all-text-inputs-hover} -// #{$all-text-inputs-focus} - -// Example -//************************************************************************// -// #{$all-text-inputs}, textarea { -// border: 1px solid red; -// } diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_position.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_position.scss deleted file mode 100644 index faad1cae50ad..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_position.scss +++ /dev/null @@ -1,42 +0,0 @@ -@mixin position ($position: relative, $coordinates: 0 0 0 0) { - - @if type-of($position) == list { - $coordinates: $position; - $position: relative; - } - - $top: nth($coordinates, 1); - $right: nth($coordinates, 2); - $bottom: nth($coordinates, 3); - $left: nth($coordinates, 4); - - position: $position; - - @if $top == auto { - top: $top; - } - @else if not(unitless($top)) { - top: $top; - } - - @if $right == auto { - right: $right; - } - @else if not(unitless($right)) { - right: $right; - } - - @if $bottom == auto { - bottom: $bottom; - } - @else if not(unitless($bottom)) { - bottom: $bottom; - } - - @if $left == auto { - left: $left; - } - @else if not(unitless($left)) { - left: $left; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_prefixer.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_prefixer.scss deleted file mode 100644 index 6bfd23a1dd53..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_prefixer.scss +++ /dev/null @@ -1,49 +0,0 @@ -//************************************************************************// -// Example: @include prefixer(border-radius, $radii, webkit ms spec); -//************************************************************************// -$prefix-for-webkit: true !default; -$prefix-for-mozilla: true !default; -$prefix-for-microsoft: true !default; -$prefix-for-opera: true !default; -$prefix-for-spec: true !default; // required for keyframe mixin - -@mixin prefixer ($property, $value, $prefixes) { - @each $prefix in $prefixes { - @if $prefix == webkit { - @if $prefix-for-webkit { - -webkit-#{$property}: $value; - } - } - @else if $prefix == moz { - @if $prefix-for-mozilla { - -moz-#{$property}: $value; - } - } - @else if $prefix == ms { - @if $prefix-for-microsoft { - -ms-#{$property}: $value; - } - } - @else if $prefix == o { - @if $prefix-for-opera { - -o-#{$property}: $value; - } - } - @else if $prefix == spec { - @if $prefix-for-spec { - #{$property}: $value; - } - } - @else { - @warn "Unrecognized prefix: #{$prefix}"; - } - } -} - -@mixin disable-prefix-for-all() { - $prefix-for-webkit: false; - $prefix-for-mozilla: false; - $prefix-for-microsoft: false; - $prefix-for-opera: false; - $prefix-for-spec: false; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_retina-image.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_retina-image.scss deleted file mode 100644 index a84b6faebc1b..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_retina-image.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { - @if $asset-pipeline { - background-image: image-url("#{$filename}.#{$extension}"); - } - @else { - background-image: url("#{$filename}.#{$extension}"); - } - - @include hidpi { - - @if $asset-pipeline { - @if $retina-filename { - background-image: image-url("#{$retina-filename}.#{$extension}"); - } - @else { - background-image: image-url("#{$filename}@2x.#{$extension}"); - } - } - - @else { - @if $retina-filename { - background-image: url("#{$retina-filename}.#{$extension}"); - } - @else { - background-image: url("#{$filename}@2x.#{$extension}"); - } - } - - background-size: $background-size; - - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_size.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_size.scss deleted file mode 100644 index 342e41b79f11..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_size.scss +++ /dev/null @@ -1,44 +0,0 @@ -@mixin size($size) { - @if length($size) == 1 { - @if $size == auto { - width: $size; - height: $size; - } - - @else if unitless($size) { - width: $size + px; - height: $size + px; - } - - @else if not(unitless($size)) { - width: $size; - height: $size; - } - } - - // Width x Height - @if length($size) == 2 { - $width: nth($size, 1); - $height: nth($size, 2); - - @if $width == auto { - width: $width; - } - @else if not(unitless($width)) { - width: $width; - } - @else if unitless($width) { - width: $width + px; - } - - @if $height == auto { - height: $height; - } - @else if not(unitless($height)) { - height: $height; - } - @else if unitless($height) { - height: $height + px; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_timing-functions.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_timing-functions.scss deleted file mode 100644 index 51b241091490..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_timing-functions.scss +++ /dev/null @@ -1,32 +0,0 @@ -// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) -// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html - -// EASE IN -$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); -$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); -$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); -$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); -$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); -$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); -$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); -$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); - -// EASE OUT -$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); -$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); -$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); -$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); -$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); -$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); -$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); -$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); - -// EASE IN OUT -$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); -$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); -$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); -$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); -$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); -$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); -$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); -$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_triangle.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_triangle.scss deleted file mode 100644 index 0e02aca2ca59..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/addons/_triangle.scss +++ /dev/null @@ -1,45 +0,0 @@ -@mixin triangle ($size, $color, $direction) { - height: 0; - width: 0; - - @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { - border-color: transparent; - border-style: solid; - border-width: $size / 2; - - @if $direction == up { - border-bottom-color: $color; - - } @else if $direction == right { - border-left-color: $color; - - } @else if $direction == down { - border-top-color: $color; - - } @else if $direction == left { - border-right-color: $color; - } - } - - @else if ($direction == up-right) or ($direction == up-left) { - border-top: $size solid $color; - - @if $direction == up-right { - border-left: $size solid transparent; - - } @else if $direction == up-left { - border-right: $size solid transparent; - } - } - - @else if ($direction == down-right) or ($direction == down-left) { - border-bottom: $size solid $color; - - @if $direction == down-right { - border-left: $size solid transparent; - - } @else if $direction == down-left { - border-right: $size solid transparent; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_animation.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_animation.scss deleted file mode 100644 index 08c3dbf157c1..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_animation.scss +++ /dev/null @@ -1,52 +0,0 @@ -// http://www.w3.org/TR/css3-animations/#the-animation-name-property- -// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. - -// Official animation shorthand property. -@mixin animation ($animations...) { - @include prefixer(animation, $animations, webkit moz spec); -} - -// Individual Animation Properties -@mixin animation-name ($names...) { - @include prefixer(animation-name, $names, webkit moz spec); -} - - -@mixin animation-duration ($times...) { - @include prefixer(animation-duration, $times, webkit moz spec); -} - - -@mixin animation-timing-function ($motions...) { -// ease | linear | ease-in | ease-out | ease-in-out - @include prefixer(animation-timing-function, $motions, webkit moz spec); -} - - -@mixin animation-iteration-count ($values...) { -// infinite | - @include prefixer(animation-iteration-count, $values, webkit moz spec); -} - - -@mixin animation-direction ($directions...) { -// normal | alternate - @include prefixer(animation-direction, $directions, webkit moz spec); -} - - -@mixin animation-play-state ($states...) { -// running | paused - @include prefixer(animation-play-state, $states, webkit moz spec); -} - - -@mixin animation-delay ($times...) { - @include prefixer(animation-delay, $times, webkit moz spec); -} - - -@mixin animation-fill-mode ($modes...) { -// none | forwards | backwards | both - @include prefixer(animation-fill-mode, $modes, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_appearance.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_appearance.scss deleted file mode 100644 index 3eb16e45de7e..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_appearance.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin appearance ($value) { - @include prefixer(appearance, $value, webkit moz ms o spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_backface-visibility.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_backface-visibility.scss deleted file mode 100644 index 1161fe60dd1e..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_backface-visibility.scss +++ /dev/null @@ -1,6 +0,0 @@ -//************************************************************************// -// Backface-visibility mixin -//************************************************************************// -@mixin backface-visibility($visibility) { - @include prefixer(backface-visibility, $visibility, webkit spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background-image.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background-image.scss deleted file mode 100644 index 17016b91b9ce..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background-image.scss +++ /dev/null @@ -1,48 +0,0 @@ -//************************************************************************// -// Background-image property for adding multiple background images with -// gradients, or for stringing multiple gradients together. -//************************************************************************// - -@mixin background-image($images...) { - background-image: _add-prefix($images, webkit); - background-image: _add-prefix($images); -} - -@function _add-prefix($images, $vendor: false) { - $images-prefixed: (); - $gradient-positions: false; - @for $i from 1 through length($images) { - $type: type-of(nth($images, $i)); // Get type of variable - List or String - - // If variable is a list - Gradient - @if $type == list { - $gradient-type: nth(nth($images, $i), 1); // linear or radial - $gradient-pos: null; - $gradient-args: null; - - @if ($gradient-type == linear) or ($gradient-type == radial) { - $gradient-pos: nth(nth($images, $i), 2); // Get gradient position - $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) - } - @else { - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) - } - - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); - $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); - $images-prefixed: append($images-prefixed, $gradient, comma); - } - // If variable is a string - Image - @else if $type == string { - $images-prefixed: join($images-prefixed, nth($images, $i), comma); - } - } - @return $images-prefixed; -} - -//Examples: - //@include background-image(linear-gradient(top, orange, red)); - //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); - //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); - //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); - //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background.scss deleted file mode 100644 index 766d5d32247f..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_background.scss +++ /dev/null @@ -1,103 +0,0 @@ -//************************************************************************// -// Background property for adding multiple backgrounds using shorthand -// notation. -//************************************************************************// - -@mixin background( - $background-1 , $background-2: false, - $background-3: false, $background-4: false, - $background-5: false, $background-6: false, - $background-7: false, $background-8: false, - $background-9: false, $background-10: false, - $fallback: false -) { - $backgrounds: compact($background-1, $background-2, - $background-3, $background-4, - $background-5, $background-6, - $background-7, $background-8, - $background-9, $background-10); - - $fallback-color: false; - @if (type-of($fallback) == color) or ($fallback == "transparent") { - $fallback-color: $fallback; - } - @else { - $fallback-color: _extract-background-color($backgrounds); - } - - @if $fallback-color { - background-color: $fallback-color; - } - background: _background-add-prefix($backgrounds, webkit); - background: _background-add-prefix($backgrounds); -} - -@function _extract-background-color($backgrounds) { - $final-bg-layer: nth($backgrounds, length($backgrounds)); - @if type-of($final-bg-layer) == list { - @for $i from 1 through length($final-bg-layer) { - $value: nth($final-bg-layer, $i); - @if type-of($value) == color { - @return $value; - } - } - } - @return false; -} - -@function _background-add-prefix($backgrounds, $vendor: false) { - $backgrounds-prefixed: (); - - @for $i from 1 through length($backgrounds) { - $shorthand: nth($backgrounds, $i); // Get member for current index - $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) - - // If shorthand is a list (gradient) - @if $type == list { - $first-member: nth($shorthand, 1); // Get first member of shorthand - - // Linear Gradient - @if index(linear radial, nth($first-member, 1)) { - $gradient-type: nth($first-member, 1); // linear || radial - $gradient-args: false; - $gradient-positions: false; - $shorthand-start: false; - @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... - $gradient-positions: nth($first-member, 2); - $gradient-args: nth($first-member, 3); - $shorthand-start: 2; - } - @else { // Linear gradient only - lg(red,orange),... - $gradient-positions: nth($shorthand, 2); - $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) - } - - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); - $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); - - // Append any additional shorthand args to gradient - @if $shorthand-start { - @for $j from $shorthand-start through length($shorthand) { - $gradient: join($gradient, nth($shorthand, $j), space); - } - } - $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); - } - // Image with additional properties - @else { - $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); - } - } - // If shorthand is a simple string (color or image) - @else if $type == string { - $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); - } - } - @return $backgrounds-prefixed; -} - -//Examples: - //@include background(linear-gradient(top, orange, red)); - //@include background(radial-gradient(circle at 40% 40%, orange, red)); - //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); - //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-image.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-image.scss deleted file mode 100644 index 1fff212df8aa..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-image.scss +++ /dev/null @@ -1,55 +0,0 @@ -@mixin border-image($images) { - -webkit-border-image: _border-add-prefix($images, webkit); - -moz-border-image: _border-add-prefix($images, moz); - -o-border-image: _border-add-prefix($images, o); - border-image: _border-add-prefix($images); -} - -@function _border-add-prefix($images, $vendor: false) { - $border-image: null; - $images-type: type-of(nth($images, 1)); - $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) - - // If input is a gradient - @if $images-type == string { - @if ($first-var == "linear") or ($first-var == "radial") { - $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) - $gradient-pos: nth($images, 2); // Get gradient position - $gradient-args: nth($images, 3); // Get actual gradient (red, blue) - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); - $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); - } - // If input is a URL - @else { - $border-image: $images; - } - } - // If input is gradient or url + additional args - @else if $images-type == list { - $type: type-of(nth($images, 1)); // Get type of variable - List or String - - // If variable is a list - Gradient - @if $type == list { - $gradient: nth($images, 1); - $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) - $gradient-pos: nth($gradient, 2); // Get gradient position - $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); - $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); - - @for $i from 2 through length($images) { - $border-image: append($border-image, nth($images, $i)); - } - } - } - @return $border-image; -} - -//Examples: -// @include border-image(url("image.png")); -// @include border-image(url("image.png") 20 stretch); -// @include border-image(linear-gradient(45deg, orange, yellow)); -// @include border-image(linear-gradient(45deg, orange, yellow) stretch); -// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); -// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); - diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-radius.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-radius.scss deleted file mode 100644 index 7c1719010907..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_border-radius.scss +++ /dev/null @@ -1,22 +0,0 @@ -//************************************************************************// -// Shorthand Border-radius mixins -//************************************************************************// -@mixin border-top-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-top-right-radius, $radii, spec); -} - -@mixin border-bottom-radius($radii) { - @include prefixer(border-bottom-left-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); -} - -@mixin border-left-radius($radii) { - @include prefixer(border-top-left-radius, $radii, spec); - @include prefixer(border-bottom-left-radius, $radii, spec); -} - -@mixin border-right-radius($radii) { - @include prefixer(border-top-right-radius, $radii, spec); - @include prefixer(border-bottom-right-radius, $radii, spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_box-sizing.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_box-sizing.scss deleted file mode 100644 index f07e1d412e32..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_box-sizing.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin box-sizing ($box) { -// content-box | border-box | inherit - @include prefixer(box-sizing, $box, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_columns.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_columns.scss deleted file mode 100644 index 42274a4eebbb..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_columns.scss +++ /dev/null @@ -1,47 +0,0 @@ -@mixin columns($arg: auto) { -// || - @include prefixer(columns, $arg, webkit moz spec); -} - -@mixin column-count($int: auto) { -// auto || integer - @include prefixer(column-count, $int, webkit moz spec); -} - -@mixin column-gap($length: normal) { -// normal || length - @include prefixer(column-gap, $length, webkit moz spec); -} - -@mixin column-fill($arg: auto) { -// auto || length - @include prefixer(columns-fill, $arg, webkit moz spec); -} - -@mixin column-rule($arg) { -// || || - @include prefixer(column-rule, $arg, webkit moz spec); -} - -@mixin column-rule-color($color) { - @include prefixer(column-rule-color, $color, webkit moz spec); -} - -@mixin column-rule-style($style: none) { -// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid - @include prefixer(column-rule-style, $style, webkit moz spec); -} - -@mixin column-rule-width ($width: none) { - @include prefixer(column-rule-width, $width, webkit moz spec); -} - -@mixin column-span($arg: none) { -// none || all - @include prefixer(column-span, $arg, webkit moz spec); -} - -@mixin column-width($length: auto) { -// auto || length - @include prefixer(column-width, $length, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_flex-box.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_flex-box.scss deleted file mode 100644 index 3e741e669661..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_flex-box.scss +++ /dev/null @@ -1,52 +0,0 @@ -// CSS3 Flexible Box Model and property defaults - -// Custom shorthand notation for flexbox -@mixin box($orient: inline-axis, $pack: start, $align: stretch) { - @include display-box; - @include box-orient($orient); - @include box-pack($pack); - @include box-align($align); -} - -@mixin display-box { - display: -webkit-box; - display: -moz-box; - display: box; -} - -@mixin box-orient($orient: inline-axis) { -// horizontal|vertical|inline-axis|block-axis|inherit - @include prefixer(box-orient, $orient, webkit moz spec); -} - -@mixin box-pack($pack: start) { -// start|end|center|justify - @include prefixer(box-pack, $pack, webkit moz spec); -} - -@mixin box-align($align: stretch) { -// start|end|center|baseline|stretch - @include prefixer(box-align, $align, webkit moz spec); -} - -@mixin box-direction($direction: normal) { -// normal|reverse|inherit - @include prefixer(box-direction, $direction, webkit moz spec); -} - -@mixin box-lines($lines: single) { -// single|multiple - @include prefixer(box-lines, $lines, webkit moz spec); -} - -@mixin box-ordinal-group($int: 1) { - @include prefixer(box-ordinal-group, $int, webkit moz spec); -} - -@mixin box-flex($value: 0.0) { - @include prefixer(box-flex, $value, webkit moz spec); -} - -@mixin box-flex-group($int: 1) { - @include prefixer(box-flex-group, $int, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_font-face.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_font-face.scss deleted file mode 100644 index 029ee8fe88c8..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_font-face.scss +++ /dev/null @@ -1,23 +0,0 @@ -// Order of the includes matters, and it is: normal, bold, italic, bold+italic. - -@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { - @font-face { - font-family: $font-family; - font-weight: $weight; - font-style: $style; - - @if $asset-pipeline == true { - src: font-url('#{$file-path}.eot'); - src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), - font-url('#{$file-path}.woff') format('woff'), - font-url('#{$file-path}.ttf') format('truetype'), - font-url('#{$file-path}.svg##{$font-family}') format('svg'); - } @else { - src: url('#{$file-path}.eot'); - src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), - url('#{$file-path}.woff') format('woff'), - url('#{$file-path}.ttf') format('truetype'), - url('#{$file-path}.svg##{$font-family}') format('svg'); - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_hidpi-media-query.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_hidpi-media-query.scss deleted file mode 100644 index 111e4009b5a7..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_hidpi-media-query.scss +++ /dev/null @@ -1,10 +0,0 @@ -// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) -@mixin hidpi($ratio: 1.3) { - @media only screen and (-webkit-min-device-pixel-ratio: $ratio), - only screen and (min--moz-device-pixel-ratio: $ratio), - only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), - only screen and (min-resolution: #{round($ratio*96)}dpi), - only screen and (min-resolution: #{$ratio}dppx) { - @content; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_image-rendering.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_image-rendering.scss deleted file mode 100644 index abc7ee1aa47c..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_image-rendering.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin image-rendering ($mode:optimizeQuality) { - - @if ($mode == optimize-contrast) { - image-rendering: -moz-crisp-edges; - image-rendering: -o-crisp-edges; - image-rendering: -webkit-optimize-contrast; - image-rendering: optimize-contrast; - } - - @else { - image-rendering: $mode; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_inline-block.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_inline-block.scss deleted file mode 100644 index 3272a0010b31..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_inline-block.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Legacy support for inline-block in IE7 (maybe IE6) -@mixin inline-block { - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_keyframes.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_keyframes.scss deleted file mode 100644 index dca61f2a0748..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_keyframes.scss +++ /dev/null @@ -1,43 +0,0 @@ -// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content -@mixin keyframes($name) { - $original-prefix-for-webkit: $prefix-for-webkit; - $original-prefix-for-mozilla: $prefix-for-mozilla; - $original-prefix-for-microsoft: $prefix-for-microsoft; - $original-prefix-for-opera: $prefix-for-opera; - $original-prefix-for-spec: $prefix-for-spec; - - @if $original-prefix-for-webkit { - @include disable-prefix-for-all(); - $prefix-for-webkit: true; - @-webkit-keyframes #{$name} { - @content; - } - } - @if $original-prefix-for-mozilla { - @include disable-prefix-for-all(); - $prefix-for-mozilla: true; - @-moz-keyframes #{$name} { - @content; - } - } - @if $original-prefix-for-opera { - @include disable-prefix-for-all(); - $prefix-for-opera: true; - @-o-keyframes #{$name} { - @content; - } - } - @if $original-prefix-for-spec { - @include disable-prefix-for-all(); - $prefix-for-spec: true; - @keyframes #{$name} { - @content; - } - } - - $prefix-for-webkit: $original-prefix-for-webkit; - $prefix-for-mozilla: $original-prefix-for-mozilla; - $prefix-for-microsoft: $original-prefix-for-microsoft; - $prefix-for-opera: $original-prefix-for-opera; - $prefix-for-spec: $original-prefix-for-spec; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_linear-gradient.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_linear-gradient.scss deleted file mode 100644 index d5b687b00cb3..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_linear-gradient.scss +++ /dev/null @@ -1,41 +0,0 @@ -@mixin linear-gradient($pos, $G1, $G2: false, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false, - $deprecated-pos1: left top, - $deprecated-pos2: left bottom, - $fallback: false) { - // Detect what type of value exists in $pos - $pos-type: type-of(nth($pos, 1)); - $pos-spec: null; - $pos-degree: null; - - // If $pos is missing from mixin, reassign vars and add default position - @if ($pos-type == color) or (nth($pos, 1) == "transparent") { - $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; - $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; - $pos: null; - } - - @if $pos { - $positions: _linear-positions-parser($pos); - $pos-degree: nth($positions, 1); - $pos-spec: nth($positions, 2); - } - - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - - // Set $G1 as the default fallback color - $fallback-color: nth($G1, 1); - - // If $fallback is a color use that color as the fallback color - @if (type-of($fallback) == color) or ($fallback == "transparent") { - $fallback-color: $fallback; - } - - background-color: $fallback-color; - background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 - background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome - background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_perspective.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_perspective.scss deleted file mode 100644 index 0e4deb80f3c2..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_perspective.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin perspective($depth: none) { - // none | - @include prefixer(perspective, $depth, webkit moz spec); -} - -@mixin perspective-origin($value: 50% 50%) { - @include prefixer(perspective-origin, $value, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_placeholder.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_placeholder.scss deleted file mode 100644 index 22fd92b4f234..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_placeholder.scss +++ /dev/null @@ -1,29 +0,0 @@ -$placeholders: '-webkit-input-placeholder', - '-moz-placeholder', - '-ms-input-placeholder'; - -@mixin placeholder { - @each $placeholder in $placeholders { - @if $placeholder == "-webkit-input-placeholder" { - &::#{$placeholder} { - @content; - } - } - @else if $placeholder == "-moz-placeholder" { - // FF 18- - &:#{$placeholder} { - @content; - } - - // FF 19+ - &::#{$placeholder} { - @content; - } - } - @else { - &:#{$placeholder} { - @content; - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_radial-gradient.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_radial-gradient.scss deleted file mode 100644 index e87b45a5a1a1..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_radial-gradient.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Requires Sass 3.1+ -@mixin radial-gradient($G1, $G2, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false, - $pos: null, - $shape-size: null, - $deprecated-pos1: center center, - $deprecated-pos2: center center, - $deprecated-radius1: 0, - $deprecated-radius2: 460, - $fallback: false) { - - $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); - $G1: nth($data, 1); - $G2: nth($data, 2); - $pos: nth($data, 3); - $shape-size: nth($data, 4); - - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - - // Strip deprecated cover/contain for spec - $shape-size-spec: _shape-size-stripper($shape-size); - - // Set $G1 as the default fallback color - $first-color: nth($full, 1); - $fallback-color: nth($first-color, 1); - - @if (type-of($fallback) == color) or ($fallback == "transparent") { - $fallback-color: $fallback; - } - - // Add Commas and spaces - $shape-size: if($shape-size, '#{$shape-size}, ', null); - $pos: if($pos, '#{$pos}, ', null); - $pos-spec: if($pos, 'at #{$pos}', null); - $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); - - background-color: $fallback-color; - background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 - background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); - background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transform.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transform.scss deleted file mode 100644 index 8cc35963d555..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transform.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin transform($property: none) { -// none | - @include prefixer(transform, $property, webkit moz ms o spec); -} - -@mixin transform-origin($axes: 50%) { -// x-axis - left | center | right | length | % -// y-axis - top | center | bottom | length | % -// z-axis - length - @include prefixer(transform-origin, $axes, webkit moz ms o spec); -} - -@mixin transform-style ($style: flat) { - @include prefixer(transform-style, $style, webkit moz ms o spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transition.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transition.scss deleted file mode 100644 index 180cde6c8a44..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_transition.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. -// Example: @include transition (all, 2.0s, ease-in-out); -// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); -// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); - -@mixin transition ($properties...) { - @if length($properties) >= 1 { - @include prefixer(transition, $properties, webkit moz spec); - } - - @else { - $properties: all 0.15s ease-out 0; - @include prefixer(transition, $properties, webkit moz spec); - } -} - -@mixin transition-property ($properties...) { - -webkit-transition-property: transition-property-names($properties, 'webkit'); - -moz-transition-property: transition-property-names($properties, 'moz'); - transition-property: transition-property-names($properties, false); -} - -@mixin transition-duration ($times...) { - @include prefixer(transition-duration, $times, webkit moz spec); -} - -@mixin transition-timing-function ($motions...) { -// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() - @include prefixer(transition-timing-function, $motions, webkit moz spec); -} - -@mixin transition-delay ($times...) { - @include prefixer(transition-delay, $times, webkit moz spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_user-select.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_user-select.scss deleted file mode 100644 index 1380aa8baa9f..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/css3/_user-select.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin user-select($arg: none) { - @include prefixer(user-select, $arg, webkit moz ms spec); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_compact.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_compact.scss deleted file mode 100644 index 871500e33946..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_compact.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Remove `false` values from a list - -@function compact($vars...) { - $list: (); - @each $var in $vars { - @if $var { - $list: append($list, $var, comma); - } - } - @return $list; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_flex-grid.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_flex-grid.scss deleted file mode 100644 index 6b8a175e86de..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_flex-grid.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Flexible grid -@function flex-grid($columns, $container-columns: $fg-max-columns) { - $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($width / $container-width); -} - -// Flexible gutter -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($gutter / $container-width); -} - -// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. -// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. -// -// The calculation presumes that your column structure will be missing the last gutter: -// -// -- column -- gutter -- column -- gutter -- column -// -// $fg-column: 60px; // Column Width -// $fg-gutter: 25px; // Gutter Width -// $fg-max-columns: 12; // Total Columns For Main Container -// -// div { -// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; -// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; -// -// p { -// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; -// float: left; -// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; -// } -// -// blockquote { -// float: left; -// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; -// } -// } diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_grid-width.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_grid-width.scss deleted file mode 100644 index 8e63d83d6023..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_grid-width.scss +++ /dev/null @@ -1,13 +0,0 @@ -@function grid-width($n) { - @return $n * $gw-column + ($n - 1) * $gw-gutter; -} - -// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. -// -// $gw-column: 100px; // Column Width -// $gw-gutter: 40px; // Gutter Width -// -// div { -// width: grid-width(4); // returns 520px; -// margin-left: $gw-gutter; // returns 40px; -// } diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_linear-gradient.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_linear-gradient.scss deleted file mode 100644 index c8454d83f087..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_linear-gradient.scss +++ /dev/null @@ -1,13 +0,0 @@ -@function linear-gradient($pos, $gradients...) { - $type: linear; - $pos-type: type-of(nth($pos, 1)); - - // if $pos doesn't exist, fix $gradient - @if ($pos-type == color) or (nth($pos, 1) == "transparent") { - $gradients: zip($pos $gradients); - $pos: false; - } - - $type-gradient: $type, $pos, $gradients; - @return $type-gradient; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_modular-scale.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_modular-scale.scss deleted file mode 100644 index dddccb522416..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_modular-scale.scss +++ /dev/null @@ -1,40 +0,0 @@ -@function modular-scale($value, $increment, $ratio) { - @if $increment > 0 { - @for $i from 1 through $increment { - $value: ($value * $ratio); - } - } - - @if $increment < 0 { - $increment: abs($increment); - @for $i from 1 through $increment { - $value: ($value / $ratio); - } - } - - @return $value; -} - -// div { -// Increment Up GR with positive value -// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px -// -// Increment Down GR with negative value -// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px -// -// Can be used with ceil(round up) or floor(round down) -// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px -// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px -// } -// -// modularscale.com - -@function golden-ratio($value, $increment) { - @return modular-scale($value, $increment, 1.618) -} - -// div { -// font-size: golden-ratio(14px, 1); // returns: 22.652px -// } -// -// goldenratiocalculator.com diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_px-to-em.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_px-to-em.scss deleted file mode 100644 index 2eb1031c60e9..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_px-to-em.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Convert pixels to ems -// eg. for a relational value of 12px write em(12) when the parent is 16px -// if the parent is another value say 24px write em(12, 24) - -@function em($pxval, $base: 16) { - @return ($pxval / $base) * 1em; -} - diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_radial-gradient.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_radial-gradient.scss deleted file mode 100644 index 75584060d2af..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_radial-gradient.scss +++ /dev/null @@ -1,23 +0,0 @@ -// This function is required and used by the background-image mixin. -@function radial-gradient($G1, $G2, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false, - $pos: null, - $shape-size: null) { - - $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); - $G1: nth($data, 1); - $G2: nth($data, 2); - $pos: nth($data, 3); - $shape-size: nth($data, 4); - - $type: radial; - $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - - $type-gradient: $type, $shape-size $pos, $gradient; - @return $type-gradient; -} - - diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_tint-shade.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_tint-shade.scss deleted file mode 100644 index f7172004ac63..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_tint-shade.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Add percentage of white to a color -@function tint($color, $percent){ - @return mix(white, $color, $percent); -} - -// Add percentage of black to a color -@function shade($color, $percent){ - @return mix(black, $color, $percent); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_transition-property-name.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_transition-property-name.scss deleted file mode 100644 index 97a6de344ceb..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/functions/_transition-property-name.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Return vendor-prefixed property names if appropriate -// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background -//************************************************************************// -@function transition-property-names($props, $vendor: false) { - $new-props: (); - - @each $prop in $props { - $new-props: append($new-props, transition-property-name($prop, $vendor), comma); - } - - @return $new-props; -} - -@function transition-property-name($prop, $vendor: false) { - // put other properties that need to be prefixed here aswell - @if $vendor and $prop == transform { - @return unquote('-'+$vendor+'-'+$prop); - } - @else { - @return $prop; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_deprecated-webkit-gradient.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_deprecated-webkit-gradient.scss deleted file mode 100644 index cd17e2832daa..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_deprecated-webkit-gradient.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Render Deprecated Webkit Gradient - Linear || Radial -//************************************************************************// -@function _deprecated-webkit-gradient($type, - $deprecated-pos1, $deprecated-pos2, - $full, - $deprecated-radius1: false, $deprecated-radius2: false) { - $gradient-list: (); - $gradient: false; - $full-length: length($full); - $percentage: false; - $gradient-type: $type; - - @for $i from 1 through $full-length { - $gradient: nth($full, $i); - - @if length($gradient) == 2 { - $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); - $gradient-list: join($gradient-list, $color-stop, comma); - } - @else if $gradient != null { - @if $i == $full-length { - $percentage: 100%; - } - @else { - $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; - } - $color-stop: color-stop(unquote($percentage), $gradient); - $gradient-list: join($gradient-list, $color-stop, comma); - } - } - - @if $type == radial { - $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); - } - @else if $type == linear { - $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); - } - @return $gradient; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_gradient-positions-parser.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_gradient-positions-parser.scss deleted file mode 100644 index 07d30b6cf956..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_gradient-positions-parser.scss +++ /dev/null @@ -1,13 +0,0 @@ -@function _gradient-positions-parser($gradient-type, $gradient-positions) { - @if $gradient-positions - and ($gradient-type == linear) - and (type-of($gradient-positions) != color) { - $gradient-positions: _linear-positions-parser($gradient-positions); - } - @else if $gradient-positions - and ($gradient-type == radial) - and (type-of($gradient-positions) != color) { - $gradient-positions: _radial-positions-parser($gradient-positions); - } - @return $gradient-positions; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_linear-positions-parser.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_linear-positions-parser.scss deleted file mode 100644 index d26383edce15..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_linear-positions-parser.scss +++ /dev/null @@ -1,61 +0,0 @@ -@function _linear-positions-parser($pos) { - $type: type-of(nth($pos, 1)); - $spec: null; - $degree: null; - $side: null; - $corner: null; - $length: length($pos); - // Parse Side and corner positions - @if ($length > 1) { - @if nth($pos, 1) == "to" { // Newer syntax - $side: nth($pos, 2); - - @if $length == 2 { // eg. to top - // Swap for backwards compatability - $degree: _position-flipper(nth($pos, 2)); - } - @else if $length == 3 { // eg. to top left - $corner: nth($pos, 3); - } - } - @else if $length == 2 { // Older syntax ("top left") - $side: _position-flipper(nth($pos, 1)); - $corner: _position-flipper(nth($pos, 2)); - } - - @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { - $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); - } - $spec: to $side $corner; - } - @else if $length == 1 { - // Swap for backwards compatability - @if $type == string { - $degree: $pos; - $spec: to _position-flipper($pos); - } - @else { - $degree: -270 - $pos; //rotate the gradient opposite from spec - $spec: $pos; - } - } - $degree: unquote($degree + ","); - $spec: unquote($spec + ","); - @return $degree $spec; -} - -@function _position-flipper($pos) { - @return if($pos == left, right, null) - if($pos == right, left, null) - if($pos == top, bottom, null) - if($pos == bottom, top, null); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-arg-parser.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-arg-parser.scss deleted file mode 100644 index 3466695bdfb1..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-arg-parser.scss +++ /dev/null @@ -1,69 +0,0 @@ -@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { - @each $value in $G1, $G2 { - $first-val: nth($value, 1); - $pos-type: type-of($first-val); - $spec-at-index: null; - - // Determine if spec was passed to mixin - @if type-of($value) == list { - $spec-at-index: if(index($value, at), index($value, at), false); - } - @if $spec-at-index { - @if $spec-at-index > 1 { - @for $i from 1 through ($spec-at-index - 1) { - $shape-size: $shape-size nth($value, $i); - } - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); - } - } - @else if $spec-at-index == 1 { - @for $i from ($spec-at-index + 1) through length($value) { - $pos: $pos nth($value, $i); - } - } - $G1: false; - } - - // If not spec calculate correct values - @else { - @if ($pos-type != color) or ($first-val != "transparent") { - @if ($pos-type == number) - or ($first-val == "center") - or ($first-val == "top") - or ($first-val == "right") - or ($first-val == "bottom") - or ($first-val == "left") { - - $pos: $value; - - @if $pos == $G1 { - $G1: false; - } - } - - @else if - ($first-val == "ellipse") - or ($first-val == "circle") - or ($first-val == "closest-side") - or ($first-val == "closest-corner") - or ($first-val == "farthest-side") - or ($first-val == "farthest-corner") - or ($first-val == "contain") - or ($first-val == "cover") { - - $shape-size: $value; - - @if $value == $G1 { - $G1: false; - } - - @else if $value == $G2 { - $G2: false; - } - } - } - } - } - @return $G1, $G2, $pos, $shape-size; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-positions-parser.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-positions-parser.scss deleted file mode 100644 index 6a5b47777815..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_radial-positions-parser.scss +++ /dev/null @@ -1,18 +0,0 @@ -@function _radial-positions-parser($gradient-pos) { - $shape-size: nth($gradient-pos, 1); - $pos: nth($gradient-pos, 2); - $shape-size-spec: _shape-size-stripper($shape-size); - - $pre-spec: unquote(if($pos, "#{$pos}, ", null)) - unquote(if($shape-size, "#{$shape-size},", null)); - $pos-spec: if($pos, "at #{$pos}", null); - - $spec: "#{$shape-size-spec} #{$pos-spec}"; - - // Add comma - @if ($spec != ' ') { - $spec: "#{$spec}," - } - - @return $pre-spec $spec; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_render-gradients.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_render-gradients.scss deleted file mode 100644 index 5765676838de..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_render-gradients.scss +++ /dev/null @@ -1,26 +0,0 @@ -// User for linear and radial gradients within background-image or border-image properties - -@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { - $pre-spec: null; - $spec: null; - $vendor-gradients: null; - @if $gradient-type == linear { - @if $gradient-positions { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); - } - } - @else if $gradient-type == radial { - $pre-spec: nth($gradient-positions, 1); - $spec: nth($gradient-positions, 2); - } - - @if $vendor { - $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); - } - @else if $vendor == false { - $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; - $vendor-gradients: unquote($vendor-gradients); - } - @return $vendor-gradients; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_shape-size-stripper.scss b/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_shape-size-stripper.scss deleted file mode 100644 index ee5eda422050..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/bourbon/helpers/_shape-size-stripper.scss +++ /dev/null @@ -1,10 +0,0 @@ -@function _shape-size-stripper($shape-size) { - $shape-size-spec: null; - @each $value in $shape-size { - @if ($value == "cover") or ($value == "contain") { - $value: null; - } - $shape-size-spec: "#{$shape-size-spec} #{$value}"; - } - @return $shape-size-spec; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat-helpers.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat-helpers.scss deleted file mode 100644 index 9c182d2ee87f..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat-helpers.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Functions -@import "functions/private"; -@import "functions/new-breakpoint"; - -// Settings -@import "settings/grid"; -@import "settings/visual-grid"; -@import "settings/disable-warnings"; diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat.scss deleted file mode 100644 index 5113401caa18..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/_neat.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* Neat 1.7.0 - * http://neat.bourbon.io - * Copyright 2012-2014 thoughtbot, inc. - * MIT License */ - -// Helpers -@import "neat-helpers"; - -// Grid -@import "grid/private"; -@import "grid/box-sizing"; -@import "grid/omega"; -@import "grid/outer-container"; -@import "grid/span-columns"; -@import "grid/row"; -@import "grid/shift"; -@import "grid/pad"; -@import "grid/fill-parent"; -@import "grid/media"; -@import "grid/to-deprecate"; -@import "grid/visual-grid"; -@import "grid/display-context"; -@import "grid/direction-context"; diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_new-breakpoint.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_new-breakpoint.scss deleted file mode 100644 index 13a3ace1ff46..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_new-breakpoint.scss +++ /dev/null @@ -1,49 +0,0 @@ -/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. -/// -/// @param {List} $query -/// A list of media query features and values. Each `$feature` should have a corresponding `$value`. -/// -/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. -/// -/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). -/// -/// @param {Number (unitless)} $total-columns ($grid-columns) -/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. -/// -/// @example scss - Usage -/// $mobile: new-breakpoint(max-width 480px 4); -/// -/// .element { -/// @include media($mobile) { -/// @include span-columns(4); -/// } -/// } -/// -/// @example css - CSS Output -/// @media screen and (max-width: 480px) { -/// .element { -/// display: block; -/// float: left; -/// margin-right: 7.42297%; -/// width: 100%; -/// } -/// .element:last-child { -/// margin-right: 0; -/// } -/// } - -@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { - @if length($query) == 1 { - $query: $default-feature nth($query, 1) $total-columns; - } - - @else if is-even(length($query)) { - $query: append($query, $total-columns); - } - - @if not belongs-to($query, $visual-grid-breakpoints) { - $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; - } - - @return $query; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_private.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_private.scss deleted file mode 100644 index e89e68a66caf..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/functions/_private.scss +++ /dev/null @@ -1,108 +0,0 @@ -// Checks if a number is even -@function is-even($int) { - @return $int % 2 == 0 -} - -// Checks if an element belongs to a list or not -@function belongs-to($tested-item, $list) { - @return not not-belongs-to($tested-item, $list); -} - -@function not-belongs-to($tested-item, $list) { - @return not index($list, $tested-item); -} - -// Contains display value -@function contains-display-value($query) { - @return belongs-to(table, $query) - or belongs-to(block, $query) - or belongs-to(inline-block, $query) - or belongs-to(inline, $query); -} - -// Parses the first argument of span-columns() -@function container-span($span: $span) { - @if length($span) == 3 { - $container-columns: nth($span, 3); - @return $container-columns; - } @else if length($span) == 2 { - $container-columns: nth($span, 2); - @return $container-columns; - } - - @return $grid-columns; -} - -@function container-shift($shift: $shift) { - $parent-columns: $grid-columns !default !global; - - @if length($shift) == 3 { - $container-columns: nth($shift, 3); - @return $container-columns; - } @else if length($shift) == 2 { - $container-columns: nth($shift, 2); - @return $container-columns; - } - - @return $parent-columns; -} - -// Generates a striped background -@function gradient-stops($grid-columns, $color: $visual-grid-color) { - $transparent: rgba(0,0,0,0); - - $column-width: flex-grid(1, $grid-columns); - $gutter-width: flex-gutter($grid-columns); - $column-offset: $column-width; - - $values: ($transparent 0, $color 0); - - @for $i from 1 to $grid-columns*2 { - @if is-even($i) { - $values: append($values, $transparent $column-offset, comma); - $values: append($values, $color $column-offset, comma); - $column-offset: $column-offset + $column-width; - } @else { - $values: append($values, $color $column-offset, comma); - $values: append($values, $transparent $column-offset, comma); - $column-offset: $column-offset + $gutter-width; - } - } - - @return $values; -} - -// Layout direction -@function get-direction($layout, $default) { - $direction: null; - - @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { - $direction: direction-from-layout($layout); - } @else { - $direction: direction-from-layout($default); - } - - @return $direction; -} - -@function direction-from-layout($layout) { - $direction: null; - - @if to-upper-case($layout) == "LTR" { - $direction: right; - } @else { - $direction: left; - } - - @return $direction; -} - -@function get-opposite-direction($direction) { - $opposite-direction: left; - - @if $direction == "left" { - $opposite-direction: right; - } - - @return $opposite-direction; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_box-sizing.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_box-sizing.scss deleted file mode 100644 index bc794436a599..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_box-sizing.scss +++ /dev/null @@ -1,11 +0,0 @@ -@if $border-box-sizing == true { - html { // http://bit.ly/1qk2tVR - @include box-sizing(border-box); - } - - * { - &, &:before, &:after { - @include box-sizing(inherit); - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_direction-context.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_direction-context.scss deleted file mode 100644 index d781c9d2992c..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_direction-context.scss +++ /dev/null @@ -1,31 +0,0 @@ -/// Changes the direction property used by other mixins called in the code block argument. -/// -/// @param {String} $direction (left-to-right) -/// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. -/// -/// @example scss - Usage -/// @include direction(right-to-left) { -/// .right-to-left-block { -/// @include span-columns(6); -/// } -/// } -/// -/// @example css - CSS Output -/// .right-to-left-block { -/// float: right; -/// ... -/// } - -@mixin direction-context($direction: left-to-right) { - $scope-direction: $layout-direction; - - @if to-lower-case($direction) == "left-to-right" { - $layout-direction: LTR !global; - } @else if to-lower-case($direction) == "right-to-left" { - $layout-direction: RTL !global; - } - - @content; - - $layout-direction: $scope-direction !global; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_display-context.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_display-context.scss deleted file mode 100644 index f983551b5377..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_display-context.scss +++ /dev/null @@ -1,26 +0,0 @@ -/// Changes the display property used by other mixins called in the code block argument. -/// -/// @param {String} $display (block) -/// Display value to be used within the block. Can be `table` or `block`. -/// -/// @example scss -/// @include display(table) { -/// .display-table { -/// @include span-columns(6); -/// } -/// } -/// -/// @example css -/// .display-table { -/// display: table-cell; -/// ... -/// } - -@mixin display-context($display: block) { - $scope-display: $container-display-table; - $container-display-table: $display == table !global; - - @content; - - $container-display-table: $scope-display !global; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_fill-parent.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_fill-parent.scss deleted file mode 100644 index 91559acd2e0f..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_fill-parent.scss +++ /dev/null @@ -1,22 +0,0 @@ -/// Forces the element to fill its parent container. -/// -/// @example scss - Usage -/// .element { -/// @include fill-parent; -/// } -/// -/// @example css - CSS Output -/// .element { -/// width: 100%; -/// -webkit-box-sizing: border-box; -/// -moz-box-sizing: border-box; -/// box-sizing: border-box; -/// } - -@mixin fill-parent() { - width: 100%; - - @if $border-box-sizing == false { - @include box-sizing(border-box); - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_grid.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_grid.scss deleted file mode 100644 index e074b6c536c8..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_grid.scss +++ /dev/null @@ -1,5 +0,0 @@ -@if $border-box-sizing == true { - * { - @include box-sizing(border-box); - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_media.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_media.scss deleted file mode 100644 index 467c2aa610e9..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_media.scss +++ /dev/null @@ -1,92 +0,0 @@ -/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid). -/// -/// @param {List} $query -/// A list of media query features and values, where each `$feature` should have a corresponding `$value`. -/// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). -/// -/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. -/// -/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). -/// -/// -/// @param {Number (unitless)} $total-columns ($grid-columns) -/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. -/// -/// @example scss - Usage -/// .responsive-element { -/// @include media(769px) { -/// @include span-columns(6); -/// } -/// } -/// -/// .new-context-element { -/// @include media(min-width 320px max-width 480px, 6) { -/// @include span-columns(6); -/// } -/// } -/// -/// @example css - CSS Output -/// @media screen and (min-width: 769px) { -/// .responsive-element { -/// display: block; -/// float: left; -/// margin-right: 2.35765%; -/// width: 48.82117%; -/// } -/// -/// .responsive-element:last-child { -/// margin-right: 0; -/// } -/// } -/// -/// @media screen and (min-width: 320px) and (max-width: 480px) { -/// .new-context-element { -/// display: block; -/// float: left; -/// margin-right: 4.82916%; -/// width: 100%; -/// } -/// -/// .new-context-element:last-child { -/// margin-right: 0; -/// } -/// } - -@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) { - @if length($query) == 1 { - @media screen and ($default-feature: nth($query, 1)) { - $default-grid-columns: $grid-columns; - $grid-columns: $total-columns !global; - @content; - $grid-columns: $default-grid-columns !global; - } - } - - @else { - $loop-to: length($query); - $media-query: 'screen and '; - $default-grid-columns: $grid-columns; - $grid-columns: $total-columns !global; - - @if not is-even(length($query)) { - $grid-columns: nth($query, $loop-to) !global; - $loop-to: $loop-to - 1; - } - - $i: 1; - @while $i <= $loop-to { - $media-query: $media-query + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') '; - - @if ($i + 1) != $loop-to { - $media-query: $media-query + 'and '; - } - - $i: $i + 2; - } - - @media #{$media-query} { - @content; - $grid-columns: $default-grid-columns !global; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_omega.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_omega.scss deleted file mode 100644 index b458963ff9a7..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_omega.scss +++ /dev/null @@ -1,91 +0,0 @@ -/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. -/// -/// @param {List} $query (block) -/// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). -/// -/// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. -/// -/// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead. -/// -/// @example scss - Usage -/// .element { -/// @include omega; -/// } -/// -/// .nth-element { -/// @include omega(4n); -/// } -/// -/// @example css - CSS Output -/// .element { -/// margin-right: 0; -/// } -/// -/// .nth-element:nth-child(4n) { -/// margin-right: 0; -/// } -/// -/// .nth-element:nth-child(4n+1) { -/// clear: left; -/// } - -@mixin omega($query: block, $direction: default) { - $table: belongs-to(table, $query); - $auto: belongs-to(auto, $query); - - @if $direction != default { - @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); - } @else { - $direction: get-direction($layout-direction, $default-layout-direction); - } - - @if $table { - @include -neat-warn("The omega mixin no longer removes padding in table layouts."); - } - - @if length($query) == 1 { - @if $auto { - &:last-child { - margin-#{$direction}: 0; - } - } - - @else if contains-display-value($query) and $table == false { - margin-#{$direction}: 0; - } - - @else { - @include nth-child($query, $direction); - } - } - - @else if length($query) == 2 { - @if $auto { - &:last-child { - margin-#{$direction}: 0; - } - } - - @else { - @include nth-child(nth($query, 1), $direction); - } - } - - @else { - @include -neat-warn("Too many arguments passed to the omega() mixin."); - } -} - -@mixin nth-child($query, $direction) { - $opposite-direction: get-opposite-direction($direction); - - &:nth-child(#{$query}) { - margin-#{$direction}: 0; - } - - @if type-of($query) == number { - &:nth-child(#{$query}+1) { - clear: $opposite-direction; - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_outer-container.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_outer-container.scss deleted file mode 100644 index e50069a590e1..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_outer-container.scss +++ /dev/null @@ -1,36 +0,0 @@ -/// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`. -/// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. -/// -/// @param {Number (unit)} $local-max-width ($max-width) -/// Max width to be applied to the element. Can be a percentage or a measure. -/// -/// @example scss - Usage -/// .element { -/// @include outer-container(100%); -/// } -/// -/// @example css - CSS Output -/// .element { -/// *zoom: 1; -/// max-width: 100%; -/// margin-left: auto; -/// margin-right: auto; -/// } -/// -/// .element:before, .element:after { -/// content: " "; -/// display: table; -/// } -/// -/// .element:after { -/// clear: both; -/// } - -@mixin outer-container($local-max-width: $max-width) { - @include clearfix; - max-width: $local-max-width; - margin: { - left: auto; - right: auto; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_pad.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_pad.scss deleted file mode 100644 index c77cd672f33d..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_pad.scss +++ /dev/null @@ -1,23 +0,0 @@ -/// Adds padding to the element. -/// -/// @param {List} $padding (flex-gutter()) -/// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. -/// -/// @example scss - Usage -/// .element { -/// @include pad(30px -20px 10px default); -/// } -/// -/// @example css - CSS Output -/// .element { -/// padding: 30px -20px 10px 2.35765%; -/// } - -@mixin pad($padding: flex-gutter()) { - $padding-list: null; - @each $value in $padding { - $value: if($value == 'default', flex-gutter(), $value); - $padding-list: join($padding-list, $value); - } - padding: $padding-list; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_private.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_private.scss deleted file mode 100644 index 4c4e18c17744..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_private.scss +++ /dev/null @@ -1,35 +0,0 @@ -$parent-columns: $grid-columns !default; -$fg-column: $column; -$fg-gutter: $gutter; -$fg-max-columns: $grid-columns; -$container-display-table: false !default; -$layout-direction: LTR !default; - -@function flex-grid($columns, $container-columns: $fg-max-columns) { - $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($width / $container-width); -} - -@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { - $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; - @return percentage($gutter / $container-width); -} - -@function grid-width($n) { - @return $n * $gw-column + ($n - 1) * $gw-gutter; -} - -@function get-parent-columns($columns) { - @if $columns != $grid-columns { - $parent-columns: $columns !global; - } @else { - $parent-columns: $grid-columns !global; - } - - @return $parent-columns; -} - -@function is-display-table($container-is-display-table, $display) { - @return $container-is-display-table == true or $display == table; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_reset.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_reset.scss deleted file mode 100644 index f670019e4b47..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_reset.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin reset-display { - $container-display-table: false; -} - -@mixin reset-layout-direction { - $layout-direction: $default-layout-direction; -} - -@mixin reset-all { - @include reset-display; - @include reset-layout-direction; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_row.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_row.scss deleted file mode 100644 index 18a6881553fb..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_row.scss +++ /dev/null @@ -1,53 +0,0 @@ -/// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. -/// -/// @param {String} $display (default) -/// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. -/// -/// @param {String} $direction ($default-layout-direction) -/// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). -/// -/// @example scss - Usage -/// .element { -/// @include row(); -/// } -/// -/// @example css - CSS Output -/// .element { -/// *zoom: 1; -/// display: block; -/// } -/// -/// .element:before, .element:after { -/// content: " "; -/// display: table; -/// } -/// -/// .element:after { -/// clear: both; -/// } - -@mixin row($display: default, $direction: $default-layout-direction) { - @if $direction != $default-layout-direction { - @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); - } - - $layout-direction: $direction !global; - - @if $display != default { - @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); - } - - @if $display == table { - display: table; - @include fill-parent; - table-layout: fixed; - $container-display-table: true !global; - } - - @else { - @include clearfix; - display: block; - $container-display-table: false !global; - } -} - diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_shift.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_shift.scss deleted file mode 100644 index 89b71b266328..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_shift.scss +++ /dev/null @@ -1,48 +0,0 @@ -/// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. -/// -/// @param {Number (unitless)} $n-columns (1) -/// Number of columns by which the element shifts. -/// -/// @example scss - Usage -/// .element { -/// @include shift(-3); -/// } -/// -/// @example css - CSS output -/// .element { -/// margin-left: -25.58941%; -/// } - -@mixin shift($n-columns: 1) { - @include shift-in-context($n-columns); -} - -/// Translates an element horizontally by a number of columns, in a specific nesting context. -/// -/// @param {List} $shift -/// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). -/// -/// The two values can be separated with any string such as `of`, `/`, etc. -/// -/// @example scss - Usage -/// .element { -/// @include shift(-3 of 6); -/// } -/// -/// @example css - CSS output -/// .element { -/// margin-left: -52.41458%; -/// } - -@mixin shift-in-context($shift: $columns of $container-columns) { - $n-columns: nth($shift, 1); - $parent-columns: container-shift($shift) !global; - - $direction: get-direction($layout-direction, $default-layout-direction); - $opposite-direction: get-opposite-direction($direction); - - margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); - - // Reset nesting context - $parent-columns: $grid-columns !global; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_span-columns.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_span-columns.scss deleted file mode 100644 index 05931ab483a5..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_span-columns.scss +++ /dev/null @@ -1,90 +0,0 @@ -/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. -/// -/// @param {List} $span -/// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). -/// -/// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. -/// -/// The values can be separated with any string such as `of`, `/`, etc. -/// -/// @param {String} $display (block) -/// Sets the display property of the element. By default it sets the display propert of the element to `block`. -/// -/// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. -/// -/// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. -/// -/// @example scss - Usage -/// .element { -/// @include span-columns(6); -/// -/// .nested-element { -/// @include span-columns(2 of 6); -/// } -/// } -/// -/// @example css - CSS Output -/// .element { -/// display: block; -/// float: left; -/// margin-right: 2.35765%; -/// width: 48.82117%; -/// } -/// -/// .element:last-child { -/// margin-right: 0; -/// } -/// -/// .element .nested-element { -/// display: block; -/// float: left; -/// margin-right: 4.82916%; -/// width: 30.11389%; -/// } -/// -/// .element .nested-element:last-child { -/// margin-right: 0; -/// } - -@mixin span-columns($span: $columns of $container-columns, $display: block) { - $columns: nth($span, 1); - $container-columns: container-span($span); - - $parent-columns: get-parent-columns($container-columns) !global; - - $direction: get-direction($layout-direction, $default-layout-direction); - $opposite-direction: get-opposite-direction($direction); - - $display-table: is-display-table($container-display-table, $display); - - @if $display-table { - display: table-cell; - width: percentage($columns / $container-columns); - } @else { - float: #{$opposite-direction}; - - @if $display != no-display { - display: block; - } - - @if $display == collapse { - @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); - } - - @if $display == collapse or $display == block-collapse { - width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); - - &:last-child { - width: flex-grid($columns, $container-columns); - } - - } @else { - margin-#{$direction}: flex-gutter($container-columns); - width: flex-grid($columns, $container-columns); - - &:last-child { - margin-#{$direction}: 0; - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_to-deprecate.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_to-deprecate.scss deleted file mode 100644 index cdd96a1058cc..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_to-deprecate.scss +++ /dev/null @@ -1,105 +0,0 @@ -@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { - @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."); - - @if length($query) == 1 { - @media screen and ($default-feature: nth($query, 1)) { - $default-grid-columns: $grid-columns; - $grid-columns: $total-columns; - @content; - $grid-columns: $default-grid-columns; - } - } - - @else if length($query) == 2 { - @media screen and (nth($query, 1): nth($query, 2)) { - $default-grid-columns: $grid-columns; - $grid-columns: $total-columns; - @content; - $grid-columns: $default-grid-columns; - } - } - - @else if length($query) == 3 { - @media screen and (nth($query, 1): nth($query, 2)) { - $default-grid-columns: $grid-columns; - $grid-columns: nth($query, 3); - @content; - $grid-columns: $default-grid-columns; - } - } - - @else if length($query) == 4 { - @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { - $default-grid-columns: $grid-columns; - $grid-columns: $total-columns; - @content; - $grid-columns: $default-grid-columns; - } - } - - @else if length($query) == 5 { - @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { - $default-grid-columns: $grid-columns; - $grid-columns: nth($query, 5); - @content; - $grid-columns: $default-grid-columns; - } - } - - @else { - @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details."); - } -} - -@mixin nth-omega($nth, $display: block, $direction: default) { - @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead."); - @include omega($nth $display, $direction); -} - -/// Resets the active display property to `block`. Particularly useful when changing the display property in a single row. -/// -/// @example scss - Usage -/// .element { -/// @include row(table); -/// // Context changed to table display -/// } -/// -/// @include reset-display; -/// // Context is reset to block display - -@mixin reset-display { - $container-display-table: false !global; - @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin."); -} - -/// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row. -/// -/// @example scss - Usage -/// .element { -/// @include row($direction: RTL); -/// // Context changed to right-to-left -/// } -/// -/// @include reset-layout-direction; -/// // Context is reset to left-to-right - -@mixin reset-layout-direction { - $layout-direction: $default-layout-direction !global; - @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin."); -} - -/// Resets both the active layout direction and the active display property. -/// -/// @example scss - Usage -/// .element { -/// @include row(table, RTL); -/// // Context changed to table table and right-to-left -/// } -/// -/// @include reset-all; -/// // Context is reset to block display and left-to-right - -@mixin reset-all { - @include reset-display; - @include reset-layout-direction; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_visual-grid.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_visual-grid.scss deleted file mode 100644 index 9a99bfb7d83a..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/grid/_visual-grid.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin grid-column-gradient($values...) { - background-image: -webkit-linear-gradient(left, $values); - background-image: -moz-linear-gradient(left, $values); - background-image: -ms-linear-gradient(left, $values); - background-image: -o-linear-gradient(left, $values); - background-image: unquote("linear-gradient(to left, #{$values})"); -} - -@if $visual-grid == true or $visual-grid == yes { - body:before { - content: ''; - display: inline-block; - @include grid-column-gradient(gradient-stops($grid-columns)); - height: 100%; - left: 0; - margin: 0 auto; - max-width: $max-width; - opacity: $visual-grid-opacity; - position: fixed; - right: 0; - width: 100%; - pointer-events: none; - - @if $visual-grid-index == back { - z-index: -1; - } - - @else if $visual-grid-index == front { - z-index: 9999; - } - - @each $breakpoint in $visual-grid-breakpoints { - @if $breakpoint { - @include media($breakpoint) { - @include grid-column-gradient(gradient-stops($grid-columns)); - } - } - } - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_disable-warnings.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_disable-warnings.scss deleted file mode 100644 index cf54e14a6887..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_disable-warnings.scss +++ /dev/null @@ -1,11 +0,0 @@ -/// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. -/// -/// @type Bool - -$disable-warnings: false !default; - -@mixin -neat-warn($message) { - @if $disable-warnings == false { - @warn "#{$message}"; - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_grid.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_grid.scss deleted file mode 100644 index 23c1f9b34134..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_grid.scss +++ /dev/null @@ -1,53 +0,0 @@ -/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with a `!global` flag. -/// -/// @type Number (Unit) - -$column: golden-ratio(1em, 3) !default; - -/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with the `!global` flag. -/// -/// @type Number (Unit) - -$gutter: golden-ratio(1em, 1) !default; - -/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. -/// -/// @type Number (Unitless) - -$grid-columns: 12 !default; - -/// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag. -/// -/// @type Number (Unit) -/// -$max-width: em(1088) !default; - -/// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. -/// -/// @type Bool -/// -/// @example css - CSS Output -/// html { -/// -webkit-box-sizing: border-box; -/// -moz-box-sizing: border-box; -/// box-sizing: border-box; } -/// -/// *, *:before, *:after { -/// -webkit-box-sizing: inherit; -/// -moz-box-sizing: inherit; -/// box-sizing: inherit; -/// } - -$border-box-sizing: true !default; - -/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. -/// -/// @type String - -$default-feature: min-width; // Default @media feature for the breakpoint() mixin - -///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. -/// -///@type String - -$default-layout-direction: LTR !default; diff --git a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_visual-grid.scss b/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_visual-grid.scss deleted file mode 100644 index 1273c420297a..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/libs/neat/settings/_visual-grid.scss +++ /dev/null @@ -1,25 +0,0 @@ -/// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. -/// -/// @type Bool - -$visual-grid: false !default; - -/// Sets the visual grid color. Set with `!global` flag. -/// -/// @type Color - -$visual-grid-color: #EEE !default; - -/// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. -/// -/// @type String - -$visual-grid-index: back !default; - -/// Sets the opacity property of the visual grid. Set with `!global` flag. -/// -/// @type Number (unitless) - -$visual-grid-opacity: 0.4 !default; - -$visual-grid-breakpoints: () !default; diff --git a/cms/static/sass/iframe-editors/oa/xb/utilities/_animations.scss b/cms/static/sass/iframe-editors/oa/xb/utilities/_animations.scss deleted file mode 100644 index 393b586b39ea..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/utilities/_animations.scss +++ /dev/null @@ -1,28 +0,0 @@ -// xblock: utilities - CSS animations -// ==================== - - -// -------------------- -// pulse -// -------------------- - -@include keyframes(pulse) { - - 0% { - opacity: 0.50; - } - - 50% { - opacity: 1.0; - } - - 100% { - opacity: 0.50; - } - -} - -// canned animation - use if you want out of the box/non-customized anim -%anim-pulse { - @include animation(pulse $tmg-f1 ease-in-out 1); -} diff --git a/cms/static/sass/iframe-editors/oa/xb/utilities/_extends.scss b/cms/static/sass/iframe-editors/oa/xb/utilities/_extends.scss deleted file mode 100644 index 88a8e51d9bd9..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/utilities/_extends.scss +++ /dev/null @@ -1,181 +0,0 @@ -// xblock: utilities - Sass extends -// ==================== - -// NOTES: -// * these are Sass-placeholders (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) that can be applied to any xblock - - -// -------------------- -// utility: nth-type style clearing -// -------------------- -%wipe-first-child { - - &:first-child { - margin-top: 0; - border-top: none; - padding-top: 0; - - margin-left: 0; - border-left: none; - padding-left: 0; - } -} - -%wipe-last-child { - - &:last-child { - margin-bottom: 0; - border-bottom: none; - padding-bottom: 0; - - margin-right: 0; - border-right: none; - padding-right: 0; - } -} - - -// -------------------- -// utility: wrapper elements -// -------------------- -%wrapper { - @include clearfix(); - @include box-sizing(border-box); - width: 100%; -} - - -// -------------------- -// utility: list resets -// -------------------- -// lists -%no-list { - list-style: none; - margin: 0; - padding: 0; - text-indent: 0; -} - -// -------------------- -// utility: image-replacement hidden text -// -------------------- -%text-hide { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -// -------------------- -// utility: hidden elements for screenreaders -// -------------------- -%text-sr { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -// -------------------- -// utility: text-wrapping -// -------------------- -%text-wrap { - text-wrap: wrap; - white-space: pre-wrap; - white-space: -moz-pre-wrap; - word-wrap: break-word; -} - - -// -------------------- -// utility: visual text overflow -// -------------------- -%text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - - -// -------------------- -// UI: controls -// -------------------- -%fake-link { - cursor: pointer; -} - -%state-disabled { - pointer-events: none; - outline: none; -} - -%state-enabled { - pointer-events: auto; -} - -// -------------------- -// UI: element rendering/visibility -// -------------------- -%state-hidden { - @extend %state-disabled; - display: none; - visibility: hidden; -} - - -// -------------------- -// UI: element depth -// -------------------- -%depth0 { z-index: 0; } -%depth1 { z-index: 10; } -%depth2 { z-index: 100; } -%depth3 { z-index: 1000; } -%depth4 { z-index: 10000; } -%depth5 { z-index: 100000; } - - -// -------------------- -// UI: transitions -// -------------------- -%trans-size { - @include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out); -} - -%trans-opacity { - @include transition(opacity $tmg-f1 ease-in-out); -} - -%trans-color { - @include transition(color $tmg-f1 ease-in-out); -} - - -// -------------------- -// Decorative: shadows -// -------------------- -%deco-shadow-up { - box-shadow: 0 -1px 2px 0 $shadow-d1; -} - -%deco-shadow-down { - box-shadow: 0 1px 2px 0 $shadow-d1; -} - -%deco-shadow-subtle-up { - box-shadow: 0 -1px 2px 0 $shadow-l1; -} - -%deco-shadow-subtle-down { - box-shadow: 0 1px 2px 0 $shadow-l1; -} - - -// -------------------- -// Decorative: round/circular elements -// -------------------- -%deco-circle { - border-radius: 99999em; -} diff --git a/cms/static/sass/iframe-editors/oa/xb/utilities/_mixins.scss b/cms/static/sass/iframe-editors/oa/xb/utilities/_mixins.scss deleted file mode 100644 index 0f7bb9d5252f..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/utilities/_mixins.scss +++ /dev/null @@ -1,79 +0,0 @@ -// xblock: utilities - Sass mixins -// ==================== - -// NOTES: -// * these are Sass-based mixins (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins) that can be applied to any xblock - - -// -------------------- -// shorthand - absolute position -// -------------------- -@mixin posAbs ($top: auto, $right: auto, $bottom: auto, $left: auto) { - position: absolute; - top: $top; - right: $right; - bottom: $bottom; - left: $left; -} - -// -------------------- -// shorthand - vertically align something -// -------------------- -@mixin alignVertically { - position: relative; - top: 50%; - @include transform(translateY(-50%)); -} - - -// -------------------- -// fontSize (rems) -// -------------------- -@mixin fontSize($sizeValue: 16){ - font-size: $sizeValue + px; - // font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently -} - - -// -------------------- -// line-height (rems) -// -------------------- -@mixin lh($fontSize: auto){ - line-height: ($fontSize*1.50) + px; - // line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently -} - -// -------------------- -// type setting -// -------------------- -@mixin typeSet($size) { - @if $size == "xsmall" { - @include fontSize($f-size-xsmall); - @include lh($f-size-xsmall); - } - - @if $size == "small" { - @include fontSize($f-size-small); - @include lh($f-size-small); - } - - @if $size == "base" { - @include fontSize($f-size-base); - @include lh($f-size-base); - } - - @if $size == "medium" { - @include fontSize($f-size-medium); - @include lh($f-size-medium); - } - - @if $size == "large" { - @include fontSize($f-size-large); - @include lh($f-size-large); - } - - @if $size == "xlarge" { - @include fontSize($f-size-xlarge); - @include lh($f-size-xlarge); - } -} diff --git a/cms/static/sass/iframe-editors/oa/xb/utilities/_reset.scss b/cms/static/sass/iframe-editors/oa/xb/utilities/_reset.scss deleted file mode 100644 index 5ec80d17fc1c..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/utilities/_reset.scss +++ /dev/null @@ -1,467 +0,0 @@ -// xblock: utilities - reset -// ==================== - -// NOTES: -// * this reset is scoped to just the xblock's markup/elements. The app/system should never be touched. -// * this reset is heavily based on the good work of normalize (http://necolas.github.io/normalize.css/) - -// contains all resets inside of the main xblock wrapper -.wrapper--xblock { - - // -------------------- - // porting of normalize.css v3.0.0 | MIT License | git.io/normalize - // -------------------- - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ - - /* HTML5 display definitions - ========================================================================== */ - - /** - * Correct `block` display not defined in IE 8/9. - */ - - article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - nav, - section, - summary { - display: block; - } - - /** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - - audio, - canvas, - progress, - video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ - } - - /** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - - audio:not([controls]) { - display: none; - height: 0; - } - - /** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. - */ - - [hidden], - template { - display: none; - } - - /* Links - ========================================================================== */ - - /** - * Remove the gray background color from active links in IE 10. - */ - - a { - background: transparent; - } - - - /* Text-level semantics - ========================================================================== */ - - /** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - - abbr[title] { - border-bottom: 1px dotted; - } - - /** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - - b, - strong { - font-weight: bold; - } - - /** - * Address styling not present in Safari 5 and Chrome. - */ - - dfn { - font-style: italic; - } - - /** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - - h1 { - font-size: 2em; - margin: 0.67em 0; - } - - /** - * Address styling not present in IE 8/9. - */ - - mark { - background: #ff0; - color: #000; - } - - /** - * Address inconsistent and variable font size in all browsers. - */ - - small { - font-size: 80%; - } - - /** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { - top: -0.5em; - } - - sub { - bottom: -0.25em; - } - - /* Embedded content - ========================================================================== */ - - /** - * Remove border when inside `a` element in IE 8/9. - */ - - img { - border: 0; - } - - /** - * Correct overflow displayed oddly in IE 9. - */ - - svg:not(:root) { - overflow: hidden; - } - - /* Grouping content - ========================================================================== */ - - /** - * Address margin not present in IE 8/9 and Safari 5. - */ - - figure { - margin: 1em 40px; - } - - /** - * Address differences between Firefox and other browsers. - */ - - hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; - } - - /** - * Contain overflow in all browsers. - */ - - pre { - overflow: auto; - } - - /** - * Address odd `em`-unit font size rendering in all browsers. - */ - - code, - kbd, - pre, - samp { - font-family: monospace, monospace; - font-size: 1em; - } - - /* Forms - ========================================================================== */ - - /** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - - /** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - - button, - input, - optgroup, - select, - textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ - } - - /** - * Address `overflow` set to `hidden` in IE 8/9/10. - */ - - button { - overflow: visible; - } - - /** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8+, and Opera - * Correct `select` style inheritance in Firefox. - */ - - button, - select { - text-transform: none; - } - - /** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - - button, - html input[type="button"], /* 1 */ - input[type="reset"], - input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - } - - /** - * Re-set default cursor for disabled elements. - */ - - button[disabled], - html input[disabled] { - cursor: default; - } - - /** - * Set opacity on buttons to 50% (which matches LMS styling). - */ - - button[disabled] { - opacity: 0.5; - } - - /** - * Remove inner padding and border in Firefox 4+. - */ - - button::-moz-focus-inner, - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - - input { - line-height: normal; - } - - /** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - - input[type="checkbox"], - input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - } - - /** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - - input[type="number"]::-webkit-inner-spin-button, - input[type="number"]::-webkit-outer-spin-button { - height: auto; - } - - /** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - - input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; - } - - /** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - - input[type="search"]::-webkit-search-cancel-button, - input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** - * Define consistent border, margin, and padding. - */ - - fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - @include padding(0.35em, 0.625em, 0.75em, 0.625em); - } - - /** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - - legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ - } - - /** - * Remove default vertical scrollbar in IE 8/9. - */ - - textarea { - overflow: auto; - } - - /** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - - optgroup { - font-weight: bold; - } - - /* Tables - ========================================================================== */ - - /** - * Remove most spacing between table cells. - */ - - table { - border-collapse: collapse; - border-spacing: 0; - } - - td, - th { - padding: 0; - } - - - // -------------------- - // custom reset - // -------------------- - * { - @include box-sizing(border-box); - } - - div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, figcaption, figure, - footer, header, hgroup, menu, nav, section, summary, - time, mark, audio, video { - margin: 0; - vertical-align: baseline; - border: 0; - padding: 0; - font-weight: 400; - } - - abbr[title] { - border-bottom: none; - text-decoration: none; - cursor: help; - } - - strong, .emphasis { - @extend %t-strong; - } - - - // -------------------- - // context base reset: edX LMS - // -------------------- - // TODO: fill this in when xblock is rendered in edX LMS - - // -------------------- - // context base reset: LTI - // -------------------- - // TODO: fill this in when xblock is rendered in LTI contexts -} diff --git a/cms/static/sass/iframe-editors/oa/xb/utilities/_variables.scss b/cms/static/sass/iframe-editors/oa/xb/utilities/_variables.scss deleted file mode 100644 index 4073b130e53c..000000000000 --- a/cms/static/sass/iframe-editors/oa/xb/utilities/_variables.scss +++ /dev/null @@ -1,187 +0,0 @@ -// xblock: utilities - Sass variables -// ==================== - -// NOTES: -// * these are general variables to be set and overriden later by theming and particular xblock _variables.scss files - -// -------------------- -// units -// -------------------- -$baseline-v: 20px; // vertical baseline -$baseline-h: 40px; // horizontal baseline - -// -------------------- -// layout - grid (neat-based - http://neat.bourbon.io/) -// -------------------- -// grid -$max-width: 100%; // http://gridcalculator.dk/#/1040/12/20/20 -$grid-columns: 12; // make grid 12 columns -$column: $baseline-v; -$gutter: $baseline-v; // gutter b/t columns -// $visual-grid: true; -// $visual-grid-index: front; - -// -------------------- -// colors - basic -// -------------------- -// grays -$gray: rgb(55, 59, 68); -$gray-l1: tint($gray,20%); -$gray-l2: tint($gray,40%); -$gray-l3: tint($gray,60%); -$gray-l4: tint($gray,80%); -$gray-l5: tint($gray,90%); -$gray-l6: tint($gray,95%); -$gray-l7: tint($gray,99.50%); -$gray-d1: shade($gray,20%); -$gray-d2: shade($gray,40%); -$gray-d3: shade($gray,60%); -$gray-d4: shade($gray,80%); -$gray-d5: shade($gray,90%); -$gray-d6: shade($gray,95%); -$gray-d7: rgb(124, 143, 156); // 3:1 contrast for WCAG 2.1 compliance - -// blacks -$black: $gray-d6; -$black-t: rgb(0,0,0); -$black-t3: rgba($black,0.75); - -// whites -$white: rgb(255, 255, 255); - -// shadows -$shadow: rgba($black,0.2); -$shadow-l1: rgba($black,0.1); -$shadow-l2: rgba($black,0.05); -$shadow-d1: rgba($black,0.4); - -// blue -$blue: rgb(128, 169, 204); -$blue-s1: saturate($blue,15%); -$blue-u1: desaturate($blue,15%); -$blue-u2: desaturate($blue,30%); - -// -------------------- -// colors - paragon -// -------------------- -$gray-800: #333333; - -$light-700: #D7D3D1; - -$warning-fill: #F0CC00; - -// -------------------- -// fonts -// -------------------- -$f-serif: 'Poly', Cambria, Georgia, 'Times New Roman', Times, serif; -$f-sans-serif: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; - - -// -------------------- -// animation/transitions -// -------------------- -// timing - used for animation/transition mixin syncing -$tmg-s3: 3.0s; -$tmg-s2: 2.0s; -$tmg-s1: 1.0s; -$tmg-avg: 0.75s; -$tmg-f1: 0.50s; -$tmg-f2: 0.25s; -$tmg-f3: 0.125s; - -// animation-based settings -$anim-distance-offviewport: ($baseline-h*100); // for larger/page-level animations - -//--------------------- -// UXPL colors -//--------------------- -$uxpl-gray-base: rgb(65, 65, 65); -$uxpl-gray-dark: rgb(17, 17, 17); -$uxpl-gray-back: rgb(217, 217, 217); -$uxpl-gray-x-back: rgb(245, 245, 245); -$uxpl-primary-base: rgb(0, 117, 180); -$uxpl-primary-dark: rgb(6, 86, 131); -$uxpl-success-text: rgb(0, 129, 0); -$uxpl-success-back: rgb(236, 250, 236); -$uxpl-warning-accent: rgb(255, 192, 31) ; -$uxpl-warning-back: rgb(255, 249, 235); -$uxpl-error-text: rgb(178, 6, 16); -$uxpl-error-back: rgb(254, 236, 237); - -// -------------------- -// application - fonts -// -------------------- -$f-title: $f-sans-serif; -$f-copy: $f-serif; -$f-action: $f-sans-serif; -$f-base-color: $uxpl-gray-base; - -// type sizes -$f-size-xsmall: 10; -$f-size-small: 12; -$f-size-base: 14; -$f-size-medium: 16; -$f-size-large: 18; -$f-size-xlarge: 22; - -// -------------------- -// application - colors -// -------------------- - -// application - colors: decorative -$color-decorative-primary: $blue-u2; -$color-decorative-secondary: tint($color-decorative-primary, 30%); -$color-decorative-tertiary: $uxpl-gray-back; -$color-decorative-quaternary: tint($color-decorative-primary, 90%); -$color-decorative-quinternary: tint($color-decorative-primary, 98%); - -// application - colors: states -$color-disabled: $gray-l4; -$color-unfocused: $gray-l2; -$color-focused: $blue-u2; - -// application - colors: actions -$action-primary-color: $uxpl-primary-base; -$action-primary-color-focus: $uxpl-primary-dark; -$action-primary-color-active: $uxpl-primary-base; -$action-primary-color-disabled: rgb(180,179,179); -$action-primary-color-disabled-back: $uxpl-gray-x-back; - -// application - colors: copy and headings -$heading-color: $f-base-color; -$copy-color: $f-base-color; -$copy-inverse-color: $white; - -// application - colors: states -$selected-color: $black-t; - -// application - colors: view-based elements -$bg-view: $gray-l7; -$bg-content: $white; -$bg-message: $black; - -// -------------------- -// // application - colors: states -// -------------------- -$color-error: $uxpl-error-text; -$color-error-back: $uxpl-error-back; - -$color-warning: $uxpl-warning-accent; -$color-warning-back: $uxpl-warning-back; - -$color-complete: $uxpl-success-text; -$color-complete-back: $uxpl-success-back; - -$color-incomplete: $color-warning; -$color-incomplete-back: $color-warning-back; - -$color-confirm: $heading-color; -$color-unavailable: $uxpl-gray-back; - -// -------------------- -// application - colors: staff UI -// -------------------- -$color-decorative-staff: $color-decorative-primary; -$heading-staff-color: $white; -$staff-bg: $gray-d1; diff --git a/common/templates/xblock_v2/xblock_iframe.html b/common/templates/xblock_v2/xblock_iframe.html index feb8592ed860..438ab9d80773 100644 --- a/common/templates/xblock_v2/xblock_iframe.html +++ b/common/templates/xblock_v2/xblock_iframe.html @@ -109,6 +109,7 @@ +