Skip to content

E
edx-platform
Commit 1ef0751f by Brian Talbot
Options

certificates: re-organizing comments/folder structure to match current FED standards

parent 3590985f
Showing with 102 additions and 320 deletions
lms/static/certificates/sass/_shame.scss deleted 100644 → 0
// edX: Certificates - Shame
// ====================
// shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (http://csswizardry.com/2013/04/shame-css)
lms/static/certificates/sass/assets/_graphics.scss deleted 100644 → 0
// edX: Certificates - Graphics
// ====================
// sprites, background images, decorative elements are placed/defined here
lms/static/certificates/sass/assets/_anims.scss → lms/static/certificates/sass/base/_anims.scss
// edX: Certificates - Animations // ------------------------------
// ==================== // Open edX Certificates: Animations
// fade in // fade in
@include keyframes(fadeIn) { @include keyframes(fadeIn) {
...@@ -21,10 +21,6 @@ ...@@ -21,10 +21,6 @@
@include animation(fadeIn $tmg-f2 linear 1); @include animation(fadeIn $tmg-f2 linear 1);
} }
// ====================
// fade in + up // fade in + up
@include keyframes(fadeInUp) { @include keyframes(fadeInUp) {
0% { 0% {
...@@ -43,10 +39,6 @@ ...@@ -43,10 +39,6 @@
@include animation(fadeInUp $tmg-f2 linear 1); @include animation(fadeInUp $tmg-f2 linear 1);
} }
// ====================
// fade in + down // fade in + down
@include keyframes(fadeInDown) { @include keyframes(fadeInDown) {
0% { 0% {
...@@ -65,10 +57,6 @@ ...@@ -65,10 +57,6 @@
@include animation(fadeInDown $tmg-f2 linear 1); @include animation(fadeInDown $tmg-f2 linear 1);
} }
// ====================
// fade out // fade out
@include keyframes(fadeOut) { @include keyframes(fadeOut) {
0% { 0% {
...@@ -89,157 +77,11 @@ ...@@ -89,157 +77,11 @@
@include animation(fadeOut $tmg-f2 linear 1); @include animation(fadeOut $tmg-f2 linear 1);
} }
// ====================
// slide in left
@include keyframes(slideInLeft) {
0% {
opacity: 0;
transform: translateX(-($anim-distance-offviewport));
}
100% {
transform: translateX(0);
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInLeft {
@include animation(slideInLeft $tmg-f2 linear 1);
}
// ====================
// slide in right
@include keyframes(slideInRight) {
0% {
opacity: 0;
transform: translateX($anim-distance-offviewport);
}
100% {
transform: translateX(0);
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInRight {
@include animation(slideInRight $tmg-f2 linear 1);
}
// ====================
// slide in down
@include keyframes(slideInDown) {
0% {
opacity: 0;
transform: translateY(-($anim-distance-offviewport));
}
100% {
transform: translateY(0);
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInDown {
@include animation(slideInDown $tmg-f2 linear 1);
}
// ====================
// slide in up
@include keyframes(slideInUp) {
0% {
opacity: 0;
transform: translateY($anim-distance-offviewport);
}
100% {
transform: translateY(0);
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInUp {
@include animation(slideInUp $tmg-f2 linear 1);
}
// ====================
// slide out left
@include keyframes(slideOutLeft) {
0% {
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-($anim-distance-offviewport));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideOutLeft {
@include animation(slideOutLeft $tmg-f2 linear 1);
}
// ====================
// slide out right
@include keyframes(slideOutRight) {
0% {
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX($anim-distance-offviewport);
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideOutRight {
@include animation(slideOutRight $tmg-f2 linear 1);
}
// ====================
// slide out up
@include keyframes(slideOutUp) {
0% {
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-($anim-distance-offviewport));
}
}
// canned animation - use if you want out of the box/non-customized anim // canned animation - use if you want out of the box/non-customized anim
%anim-slideOutUp { %anim-slideOutUp {
@include animation(slideOutUp $tmg-f2 linear 1); @include animation(slideOutUp $tmg-f2 linear 1);
} }
// ====================
// rotate up // rotate up
@include keyframes(rotateUp) { @include keyframes(rotateUp) {
0% { 0% {
...@@ -323,9 +165,6 @@ ...@@ -323,9 +165,6 @@
@include animation(rotateCCW $tmg-s1 linear infinite); @include animation(rotateCCW $tmg-s1 linear infinite);
} }
// ====================
// bounce in // bounce in
@include keyframes(bounceIn) { @include keyframes(bounceIn) {
0% { 0% {
...@@ -371,10 +210,6 @@ ...@@ -371,10 +210,6 @@
@include animation(bounceOut $tmg-f1 ease-in-out 1); @include animation(bounceOut $tmg-f1 ease-in-out 1);
} }
// ====================
// flash // flash
@include keyframes(flash) { @include keyframes(flash) {
0%, 50%, 100% {opacity: 1.0;} 0%, 50%, 100% {opacity: 1.0;}
...@@ -386,10 +221,6 @@ ...@@ -386,10 +221,6 @@
@include animation(flash $tmg-f1 ease-in-out 1); @include animation(flash $tmg-f1 ease-in-out 1);
} }
// ====================
// shake // shake
@include keyframes(shake) { @include keyframes(shake) {
0%, 100% {transform: translateX(0);} 0%, 100% {transform: translateX(0);}
...@@ -402,10 +233,6 @@ ...@@ -402,10 +233,6 @@
@include animation(shake $tmg-f1 ease-in-out 1); @include animation(shake $tmg-f1 ease-in-out 1);
} }
// ====================
// bounce // bounce
@include keyframes(bounce) { @include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
...@@ -418,10 +245,6 @@ ...@@ -418,10 +245,6 @@
@include animation(shake $tmg-f1 ease-in-out 1); @include animation(shake $tmg-f1 ease-in-out 1);
} }
// ====================
// bounce // bounce
@include keyframes(bounce) { @include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
......
lms/static/certificates/sass/assets/_fonts.scss → lms/static/certificates/sass/base/_fonts.scss
// edX: Certificates - Fonts // ------------------------------
// ==================== // Open edX Certificates: Fonts
// import from google fonts - Open Sans // import from google fonts - Open Sans
// (http://www.google.com/fonts/specimen/Open+Sans) // (http://www.google.com/fonts/specimen/Open+Sans)
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
lms/static/certificates/sass/base/_graphics.scss 0 → 100644
// ------------------------------
// Open edX Certificates: Graphics
// sprites, background images, decorative elements are placed/defined here
lms/static/certificates/sass/_base.scss → lms/static/certificates/sass/base/_reset.scss
// edX: Certificates - Base // ------------------------------
// ==================== // Open edX Certificates: Reset
// basic
html, body { html, body {
height: 100%; height: 100%;
} }
...@@ -15,9 +14,6 @@ body { ...@@ -15,9 +14,6 @@ body {
@extend %t-copy-base; @extend %t-copy-base;
} }
// ====================
// base: layout
[class^="wrapper-"] { [class^="wrapper-"] {
@extend %wrapper !optional; @extend %wrapper !optional;
padding: 0; padding: 0;
...@@ -27,15 +23,10 @@ body { ...@@ -27,15 +23,10 @@ body {
@extend %ui-text-sr; @extend %ui-text-sr;
} }
// ====================
// base: view
.wrapper-view { .wrapper-view {
background: $bg-view; background: $bg-view;
} }
// ====================
[class^="content-"]{ [class^="content-"]{
a { a {
...@@ -43,9 +34,6 @@ body { ...@@ -43,9 +34,6 @@ body {
} }
} }
// ====================
// base: elements
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
......
lms/static/certificates/sass/elements/_typography.scss → lms/static/certificates/sass/base/_typography.scss
// edX: Certificates - Typography // ------------------------------
// ==================== // Open edX Certificates: Typogrpahy
// (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// ====================
// misc // misc
%t-weight0 { %t-weight0 {
...@@ -26,8 +22,6 @@ ...@@ -26,8 +22,6 @@
font-weight: 700; font-weight: 700;
} }
// ====================
// headings/titles // headings/titles
%t-title-1, %t-title-2, %t-title-3, %t-title-4, %t-title-5, %t-title-5, %t-title-6, %t-title-7, %t-title-8, %t-title-9 { %t-title-1, %t-title-2, %t-title-3, %t-title-4, %t-title-5, %t-title-5, %t-title-6, %t-title-7, %t-title-8, %t-title-9 {
font-family: $f-sans-serif; font-family: $f-sans-serif;
...@@ -88,8 +82,6 @@ ...@@ -88,8 +82,6 @@
@include lh(10); @include lh(10);
} }
// ====================
// copy // copy
%t-copy { %t-copy {
font-family: $f-sans-serif; font-family: $f-sans-serif;
...@@ -137,15 +129,11 @@ ...@@ -137,15 +129,11 @@
@include lh(10); @include lh(10);
} }
// ====================
// code // code
%t-code { %t-code {
font-family: $f-monospace; font-family: $f-monospace;
} }
// ====================
// actions/labels // actions/labels
%t-action1 { %t-action1 {
@include font-size(24); @include font-size(24);
...@@ -172,8 +160,6 @@ ...@@ -172,8 +160,6 @@
@include lh(12); @include lh(12);
} }
// ====================
// icons // icons
%t-icon { %t-icon {
......
lms/static/certificates/sass/elements/_controls.scss → lms/static/certificates/sass/components/_controls.scss
// edX: Certificates - Controls // ------------------------------
// ==================== // Open edX Certificates: Controls
// archetype: buttons // archetype: buttons
%btn { %btn {
...@@ -90,8 +90,6 @@ ...@@ -90,8 +90,6 @@
} }
} }
// ====================
// links - subtle // links - subtle
%link-subtle { %link-subtle {
@include transition(color $tmg-f1 ease-in-out); @include transition(color $tmg-f1 ease-in-out);
...@@ -115,7 +113,3 @@ ...@@ -115,7 +113,3 @@
border-color: $color-link-focus; border-color: $color-link-focus;
} }
} }
// ====================
// archetype: modal/dialogue controls
lms/static/certificates/sass/elements/_footer.scss → lms/static/certificates/sass/components/_footer.scss
// edX: Certificates - Footer // ------------------------------
// ==================== // Open edX Certificates: Footer
.wrapper-footer { .wrapper-footer {
padding: 0 ($baseline-h*2); padding: 0 ($baseline-h*2);
......
lms/static/certificates/sass/elements/_header.scss → lms/static/certificates/sass/components/_header.scss
// edX: Certificates - Header // ------------------------------
// ==================== // Open edX Certificates: Header
// grid/layout // grid/layout
.wrapper-header { .wrapper-header {
......
lms/static/certificates/sass/elements/_navigation.scss → lms/static/certificates/sass/components/_navigation.scss
// edX: Certificates - Navigation // ------------------------------
// ==================== // Open edX Certificates: Navigation
// general // general
%nav { %nav {
......
lms/static/certificates/sass/contexts/_ie.scss
// edX: Certificates - IE-specific styling // ------------------------------
// ==================== // Open edX Certificates: IE-Specific Styling
// less than IE10 // less than IE10
.lt-ie10 { .lt-ie10 {
......
lms/static/certificates/sass/contexts/_print.scss
// edX: Certificates - Print-centric styling // ------------------------------
// ==================== // Open edX Certificates: Print-Specific Styling
// print - general // print - general
@include media(print) { @include media(print) {
......
lms/static/certificates/sass/main.scss 0 → 100644
// ------------------------------
// Open edX Certificates: Main Style Compile
// About: Sass compile for Open edX certificates. This does not contain styles for other Open edX products/experiences (e.g. account/onboarding).
// ------------------------------
// #VENDOR
// ------------------------------
@import '../vendor/bourbon/bourbon';
@import '../vendor/neat/neat';
@import '../vendor/normalize/normalize';
// ------------------------------
// #UTILITIES
// ------------------------------
@import 'utilities/variables';
@import 'utilities/mixins';
// ------------------------------
// #BASE
// ------------------------------
@import 'base/fonts';
@import 'base/graphics';
@import 'base/anims';
@import 'base/typography';
@import 'base/reset';
// ------------------------------
// #COMPONENTS
// ------------------------------
@import 'components/controls';
@import 'components/navigation';
@import 'components/header';
@import 'components/footer';
// ------------------------------
// #VIEWS
// ------------------------------
@import 'views/certificate';
@import 'views/valid';
@import 'views/invalid';
@import 'views/validate';
// ------------------------------
// #CONTEXTS
// ------------------------------
@import 'contexts/print';
@import 'contexts/ie';
// ------------------------------
// #SHAME
// ------------------------------
@import 'utilities/shame';
lms/static/certificates/sass/style-application.scss deleted 100644 → 0
// edX: Certificates - Style Compilation
// ====================
// BASE - libs and resets *do not edit*
@import 'utilities/bourbon/bourbon'; // http://bourbon.io
@import 'utilities/neat/neat'; // http://neat.bourbon.io
// Utilities and Assets
// ====================
// BASE - utilities
@import 'utilities/variables'; // settings/values/placeholders
@import 'utilities/mixins'; // re-usable utility and non-standalone rules
// BASE - assets
@import 'assets/fonts'; // imported/used fonts
@import 'assets/graphics'; // sprites, basic img/figure/svg styling
@import 'assets/anims'; // css-based animations
// General, Elements, and Views
// ====================
// BASE - foundation
@import 'base';
// BASE - elements
@import 'elements/typography'; // font sizes/scale and applied/canned definitions
@import 'elements/controls'; // buttons, link styles, sliders, etc.
@import 'elements/navigation'; // all archetypes of navigation
@import 'elements/header'; // view/app headers
@import 'elements/footer'; // view/app footers
// BASE - specific views/areas of app
@import 'views/certificate'; // certificate/achievement view
@import 'views/valid'; // valid certificate/achievement view
@import 'views/invalid'; // invvalid certificate view
@import 'views/validate'; // DIY validation
// BASE - contextual
@import 'contexts/print'; // basic print styling
@import 'contexts/ie'; // ie-specific styling
// BASE - misc.
@import 'shame'; // shame file - used for any bad-form/orphaned scss
lms/static/certificates/sass/utilities/_mixins.scss
// edX: Certificates - Mixins & Extends // ------------------------------
// ==================== // Open edX Certificates: Mixins
// utility - font sizing // utility - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
...@@ -38,8 +38,6 @@ ...@@ -38,8 +38,6 @@
} }
} }
// ====================
// UI - wrapper elements // UI - wrapper elements
%ui-wrapper { %ui-wrapper {
@include clearfix(); @include clearfix();
...@@ -47,8 +45,6 @@ ...@@ -47,8 +45,6 @@
width: 100%; width: 100%;
} }
// ====================
// UI - lists // UI - lists
%ui-no-list { %ui-no-list {
list-style: none; list-style: none;
...@@ -99,8 +95,6 @@ ...@@ -99,8 +95,6 @@
outline: none; outline: none;
} }
// ====================
// UI - depth levels // UI - depth levels
%ui-depth0 { z-index: 0; } %ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; } %ui-depth1 { z-index: 10; }
...@@ -109,8 +103,6 @@ ...@@ -109,8 +103,6 @@
%ui-depth4 { z-index: 10000; } %ui-depth4 { z-index: 10000; }
%ui-depth5 { z-index: 100000; } %ui-depth5 { z-index: 100000; }
// ====================
// UI - transitions // UI - transitions
%trans-size { %trans-size {
@include transition(width 0.25s ease-in-out, height 0.25s ease-in-out); @include transition(width 0.25s ease-in-out, height 0.25s ease-in-out);
...@@ -120,8 +112,6 @@ ...@@ -120,8 +112,6 @@
@include transition(color 0.25s ease-in-out); @include transition(color 0.25s ease-in-out);
} }
// ====================
// UI - cosmetics - shadows // UI - cosmetics - shadows
%ui-shadow-up { %ui-shadow-up {
box-shadow: 0 -2px 2px 0 $shadow-d1; box-shadow: 0 -2px 2px 0 $shadow-d1;
......
lms/static/certificates/sass/utilities/_shame.scss 0 → 100644
// ------------------------------
// Open edX Certificates: Shame Styles
// About: used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (http://csswizardry.com/2013/04/shame-css)
lms/static/certificates/sass/utilities/_variables.scss
// edX: Certificates - Variables // ------------------------------
// ==================== // Open edX Certificates: Variables
// units // units
$baseline-v: 20px; // vertical baseline $baseline-v: 20px; // vertical baseline
$baseline-h: 20px; // horizontal baseline $baseline-h: 20px; // horizontal baseline
// ====================
// colors - basic // colors - basic
$black: rgb(10,10,10); // system black $black: rgb(10,10,10); // system black
$black-t: rgb(0,0,0); $black-t: rgb(0,0,0);
...@@ -97,15 +95,11 @@ $color-basic-achievement: $blue-l2; ...@@ -97,15 +95,11 @@ $color-basic-achievement: $blue-l2;
$color-greater-achievement: $blue; $color-greater-achievement: $blue;
$color-greatest-achievement: $blue-s1; $color-greatest-achievement: $blue-s1;
// ====================
// fonts // fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif; $f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif; $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace; $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ====================
// grid // grid
@import "neat/neat-helpers"; @import "neat/neat-helpers";
...@@ -120,8 +114,6 @@ $bp-ds: new-breakpoint(min-width 500px max-width 759px 6); // small dis ...@@ -120,8 +114,6 @@ $bp-ds: new-breakpoint(min-width 500px max-width 759px 6); // small dis
$bp-dm: new-breakpoint(min-width 760px max-width 899px 12); // medium displays - make grid 12 columns $bp-dm: new-breakpoint(min-width 760px max-width 899px 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width 900px 12); // large displays - make grid 12 columns $bp-dl: new-breakpoint(min-width 900px 12); // large displays - make grid 12 columns
// ====================
// timing - used for animation/transition mixin syncing // timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s; $tmg-s3: 3.0s;
$tmg-s2: 2.0s; $tmg-s2: 2.0s;
...@@ -131,11 +123,6 @@ $tmg-f1: 0.50s; ...@@ -131,11 +123,6 @@ $tmg-f1: 0.50s;
$tmg-f2: 0.25s; $tmg-f2: 0.25s;
$tmg-f3: 0.125s; $tmg-f3: 0.125s;
// animation-based settings
$anim-distance-offviewport: ($baseline-h*100); // for larger/page-level animations
// ====================
// application: general actions // application: general actions
$color-primary: $blue-d1; $color-primary: $blue-d1;
$color-secondary: $blue-l1; $color-secondary: $blue-l1;
...@@ -163,8 +150,6 @@ $bordercolor-action-secondary-focus: saturate($color-secondary, 35%); ...@@ -163,8 +150,6 @@ $bordercolor-action-secondary-focus: saturate($color-secondary, 35%);
$color-action-secondary: tint($color-secondary, 90%); $color-action-secondary: tint($color-secondary, 90%);
$color-action-secondary-focus: tint($color-secondary, 95%); $color-action-secondary-focus: tint($color-secondary, 95%);
// ====================
// application: copy & headings // application: copy & headings
$color-heading: $gray-d3; $color-heading: $gray-d3;
...@@ -175,14 +160,10 @@ $color-copy: $gray-l1; ...@@ -175,14 +160,10 @@ $color-copy: $gray-l1;
$color-copy-lead: $gray-d2; $color-copy-lead: $gray-d2;
$color-copy-supplemental: $gray-l1; $color-copy-supplemental: $gray-l1;
// ====================
// application: states // application: states
$bg-selected: $blue-t1; $bg-selected: $blue-t1;
$color-selected: $blue-s1; $color-selected: $blue-s1;
// ====================
// application: view elements // application: view elements
$bg-view: $gray-l6; $bg-view: $gray-l6;
......
lms/static/certificates/sass/views/_certificate.scss
// ------------------------------
// Open edX Certificates: General Certificate/Achievement View
.view-certificate { .view-certificate {
background: $bg-view; background: $bg-view;
......
lms/static/certificates/sass/views/_invalid.scss
// edX: Certificates - View: Invalid Certificate // ------------------------------
// ==================== // Open edX Certificates: Invalid Certificate/Achievement View
.view-invalid-certificate { .view-invalid-certificate {
// accomplishment // accomplishment
......
lms/static/certificates/sass/views/_valid.scss
// edX: Certificates - View: Valid Certificate // ------------------------------
// ==================== // Open edX Certificates: Valid Certificate/Achievement View
.view-valid-certificate { .view-valid-certificate {
// accomplishment // accomplishment
......
lms/static/certificates/sass/views/_validate.scss
// edX: Certificates - View: DIY Validation // ------------------------------
// ==================== // Open edX Certificates: DIY Validation Instructions View
.view-validate-certificate { .view-validate-certificate {
// general // general
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment