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
@include keyframes(fadeIn) {
......@@ -21,10 +21,6 @@
@include animation(fadeIn $tmg-f2 linear 1);
}
// ====================
// fade in + up
@include keyframes(fadeInUp) {
0% {
......@@ -43,10 +39,6 @@
@include animation(fadeInUp $tmg-f2 linear 1);
}
// ====================
// fade in + down
@include keyframes(fadeInDown) {
0% {
......@@ -65,10 +57,6 @@
@include animation(fadeInDown $tmg-f2 linear 1);
}
// ====================
// fade out
@include keyframes(fadeOut) {
0% {
......@@ -89,157 +77,11 @@
@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
%anim-slideOutUp {
@include animation(slideOutUp $tmg-f2 linear 1);
}
// ====================
// rotate up
@include keyframes(rotateUp) {
0% {
......@@ -323,9 +165,6 @@
@include animation(rotateCCW $tmg-s1 linear infinite);
}
// ====================
// bounce in
@include keyframes(bounceIn) {
0% {
......@@ -371,10 +210,6 @@
@include animation(bounceOut $tmg-f1 ease-in-out 1);
}
// ====================
// flash
@include keyframes(flash) {
0%, 50%, 100% {opacity: 1.0;}
......@@ -386,10 +221,6 @@
@include animation(flash $tmg-f1 ease-in-out 1);
}
// ====================
// shake
@include keyframes(shake) {
0%, 100% {transform: translateX(0);}
......@@ -402,10 +233,6 @@
@include animation(shake $tmg-f1 ease-in-out 1);
}
// ====================
// bounce
@include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
......@@ -418,10 +245,6 @@
@include animation(shake $tmg-f1 ease-in-out 1);
}
// ====================
// bounce
@include keyframes(bounce) {
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
// (http://www.google.com/fonts/specimen/Open+Sans)
@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 {
height: 100%;
}
......@@ -15,9 +14,6 @@ body {
@extend %t-copy-base;
}
// ====================
// base: layout
[class^="wrapper-"] {
@extend %wrapper !optional;
padding: 0;
......@@ -27,15 +23,10 @@ body {
@extend %ui-text-sr;
}
// ====================
// base: view
.wrapper-view {
background: $bg-view;
}
// ====================
[class^="content-"]{
a {
......@@ -43,9 +34,6 @@ body {
}
}
// ====================
// base: elements
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......
lms/static/certificates/sass/elements/_typography.scss → lms/static/certificates/sass/base/_typography.scss
// edX: Certificates - Typography
// ====================
// (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
// ====================
// ------------------------------
// Open edX Certificates: Typogrpahy
// misc
%t-weight0 {
......@@ -26,8 +22,6 @@
font-weight: 700;
}
// ====================
// 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 {
font-family: $f-sans-serif;
......@@ -88,8 +82,6 @@
@include lh(10);
}
// ====================
// copy
%t-copy {
font-family: $f-sans-serif;
......@@ -137,15 +129,11 @@
@include lh(10);
}
// ====================
// code
%t-code {
font-family: $f-monospace;
}
// ====================
// actions/labels
%t-action1 {
@include font-size(24);
......@@ -172,8 +160,6 @@
@include lh(12);
}
// ====================
// icons
%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
%btn {
......@@ -90,8 +90,6 @@
}
}
// ====================
// links - subtle
%link-subtle {
@include transition(color $tmg-f1 ease-in-out);
......@@ -115,7 +113,3 @@
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 {
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
.wrapper-header {
......
lms/static/certificates/sass/elements/_navigation.scss → lms/static/certificates/sass/components/_navigation.scss
// edX: Certificates - Navigation
// ====================
// ------------------------------
// Open edX Certificates: Navigation
// general
%nav {
......
lms/static/certificates/sass/contexts/_ie.scss
// edX: Certificates - IE-specific styling
// ====================
// ------------------------------
// Open edX Certificates: IE-Specific Styling
// less than IE10
.lt-ie10 {
......
lms/static/certificates/sass/contexts/_print.scss
// edX: Certificates - Print-centric styling
// ====================
// ------------------------------
// Open edX Certificates: Print-Specific Styling
// print - general
@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
@mixin font-size($sizeValue: 16){
......@@ -38,8 +38,6 @@
}
}
// ====================
// UI - wrapper elements
%ui-wrapper {
@include clearfix();
......@@ -47,8 +45,6 @@
width: 100%;
}
// ====================
// UI - lists
%ui-no-list {
list-style: none;
......@@ -99,8 +95,6 @@
outline: none;
}
// ====================
// UI - depth levels
%ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; }
......@@ -109,8 +103,6 @@
%ui-depth4 { z-index: 10000; }
%ui-depth5 { z-index: 100000; }
// ====================
// UI - transitions
%trans-size {
@include transition(width 0.25s ease-in-out, height 0.25s ease-in-out);
......@@ -120,8 +112,6 @@
@include transition(color 0.25s ease-in-out);
}
// ====================
// UI - cosmetics - shadows
%ui-shadow-up {
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
$baseline-v: 20px; // vertical baseline
$baseline-h: 20px; // horizontal baseline
// ====================
// colors - basic
$black: rgb(10,10,10); // system black
$black-t: rgb(0,0,0);
......@@ -97,15 +95,11 @@ $color-basic-achievement: $blue-l2;
$color-greater-achievement: $blue;
$color-greatest-achievement: $blue-s1;
// ====================
// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
// ====================
// grid
@import "neat/neat-helpers";
......@@ -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-dl: new-breakpoint(min-width 900px 12); // large displays - make grid 12 columns
// ====================
// timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
......@@ -131,11 +123,6 @@ $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
// ====================
// application: general actions
$color-primary: $blue-d1;
$color-secondary: $blue-l1;
......@@ -163,8 +150,6 @@ $bordercolor-action-secondary-focus: saturate($color-secondary, 35%);
$color-action-secondary: tint($color-secondary, 90%);
$color-action-secondary-focus: tint($color-secondary, 95%);
// ====================
// application: copy & headings
$color-heading: $gray-d3;
......@@ -175,14 +160,10 @@ $color-copy: $gray-l1;
$color-copy-lead: $gray-d2;
$color-copy-supplemental: $gray-l1;
// ====================
// application: states
$bg-selected: $blue-t1;
$color-selected: $blue-s1;
// ====================
// application: view elements
$bg-view: $gray-l6;
......
lms/static/certificates/sass/views/_certificate.scss
// ------------------------------
// Open edX Certificates: General Certificate/Achievement View
.view-certificate {
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 {
// accomplishment
......
lms/static/certificates/sass/views/_valid.scss
// edX: Certificates - View: Valid Certificate
// ====================
// ------------------------------
// Open edX Certificates: Valid Certificate/Achievement View
.view-valid-certificate {
// accomplishment
......
lms/static/certificates/sass/views/_validate.scss
// edX: Certificates - View: DIY Validation
// ====================
// ------------------------------
// Open edX Certificates: DIY Validation Instructions View
.view-validate-certificate {
// 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