codecombat/app/styles/style-flat.sass

507 lines
11 KiB
Sass
Raw Normal View History

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
@import "app/styles/style-flat-variables"
// TODO: Move flat style into probably several files and Bootstrap variables
body[lang='ru'], body[lang='uk'], body[lang='bg'], body[lang^='mk'], body[lang='sr']
// Google Fonts version of Arvo only has Latin glyphs, not Cyrillic
// TODO: figure out font fallbacks for other languages not covered by Arvo
//$headline-font: 'Open Sans', serif // Doesn't work
h1, .text-h1, h3, .text-h3, h5, .text-h5
font-family: 'Open Sans', serif
.style-flat
background: white
color: black
// Fonts
h1, h2, h3, h4, h5, h6, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6
// Unsetting game styles
font-variant: normal
color: black
margin: 0
h1, .text-h1
font-family: $headline-font
font-weight: normal
font-size: 46px
line-height: 62px
h2, .text-h2
font-family: $body-font
font-weight: lighter
font-size: 30px
line-height: 42px
h3, .text-h3
font-family: $headline-font
font-weight: normal
font-size: 33px
line-height: 45px
h4, .text-h4
font-family: $body-font
font-weight: lighter
font-size: 22px
line-height: 32px
h5, .text-h5
font-family: $headline-font
font-weight: bold
font-size: 20px
line-height: 31px
h6, .text-h6
font-family: $body-font
font-weight: bold
font-size: 14px
line-height: 20px
p
2016-03-30 16:57:19 -04:00
color: black
margin: 0 0 14px
.small
font-weight: normal
font-size: 14px
line-height: 20px
2016-03-30 16:57:19 -04:00
.semibold, .student-name
font-weight: 600
.small-details
font: $headline-font
font-size: 15px
line-height: 26px
font-family: $body-font
font-size: 18px
line-height: 29px
blockquote
border: none
2016-03-25 19:25:51 -04:00
&:before
font-family: "Monaco"
content: "\201C"
position: absolute
left: 0px
top: 20px
font-size: 40px
opacity: 0.5
Game dev levels (#3810) * Tweak API doc behavior and styling * Instead of moving to the left during active dialogues, just move to the top * Allow pointer events * Adjust close button * Re-enable pinning API docs for game-dev and web-dev levels * Make sidebar in PlayGameDevLevelView stretch, better layout columns * Set up content of PlayGameDevLevelView sidebar to scroll * Add rest of PlayGameDevLevelView sidebar content, rework what loading looks like * Finish PlayGameDevLevelView * Add share area below * Cover the brown background, paint it gray * Tweak PlayGameDevLevelView * Have progress bar show everything * Fix Surface resize handling * Fix PlayGameDevLevelView resizing incorrectly when playing * Add GameDevVictoryModal to PlayGameDevLevelView * Don't show missing-doctype annotation in Ace * Hook up GameDevVictoryModal copy button * Fix onChangeAnnotation runtime error * Fix onLevelLoaded runtime error * Have CourseVictoryModal link to /courses when course is done * Trim, update CourseDetailsView * Remove last vestiges of teacherMode * Remove giant navigation buttons at top * Quick switch to flat style * Add analytics for game-dev * Update Analytics events for gamedev * Prefix event names with context * Send to Mixpanel * Include more properties * Mostly set up indefinite play and autocast for game-dev levels * Set up cast buttons and shortcut for game-dev * Add rudimentary instructions when students play game-dev levels * Couple tweaks * fix a bit of code that expects frames to always stick around * have PlayGameDevLevelView render a couple frames on load * API Docs use 'game' instead of 'hero' * Move tags to head without combining * Add HTML comment-start string Fixes missing entry point arrows * Fix some whitespace
2016-07-28 16:39:58 -04:00
hr
border-top: 1px solid gray
// Navbar
2016-03-30 16:57:19 -04:00
#main-nav.navbar
background: white
margin-bottom: 0
white-space: nowrap // prevent home icon from going under brand
a.navbar-brand
#logo-img
width: 230px
height: 65px
margin-right: 10px
color: $burgandy
&:hover
color: white
background: $burgandy
.glyphicon-home
position: relative
top: 3px
.navbar-toggle
color: black
margin: 30px 25px 0
2016-07-29 17:55:42 -04:00
border-color: $navy
.icon-bar
background-color: $navy
@media (min-width: $screen-lg-min)
#navbar-collapse
float: right
#navbar-collapse
max-height: none
.nav > li > a
// TODO: Move this to bootstrap variables for navbars
font-weight: bold
font-family: $body-font
font-size: 16px
2016-03-25 19:25:51 -04:00
line-height: 31px
padding: 32px 15px 0
height: 95px
color: $burgandy
text-shadow: 0 0 0
&:hover
background: $burgandy
color: white
.nav > li.disabled > a
color: black
&:hover
background: white
color: black
cursor: default
#language-dropdown-wrapper
display: inline-block
padding: 30px 10px
width: 100%
@media (max-width: $screen-lg-min)
.nav > li > a
padding: 10px 20px
height: 45px
#language-dropdown-wrapper
display: inline-block
padding: 10px 10px
.language-dropdown
width: 150px
.img-circle
border: $gold 8px solid
width: 98px
height: 98px // Includes the border
2016-03-25 19:25:51 -04:00
.img-circle-small
border: $gold 3px solid
width: 33px
height: 33px
// For teacher avatars
.border-burgandy
border-color: $burgandy
.border-navy
border-color: $navy
.user-level
position: absolute
top: 76px
right: 42px
color: $gold
text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
// Wells
.well
padding: 8px
background-color: transparent
border: thin solid lightgray
border-radius: 0
// Buttons
.btn
border: none
border-radius: 5px
font-family: $body-font
font-weight: normal
background-image: none // overrides legacy buttons
2016-03-30 16:57:19 -04:00
.disabled
opacity: 50%
.btn ~ .btn
margin-left: 12px
.btn-primary, .btn-navy
background-color: $navy
color: white
.btn-primary-alt, .btn-navy-alt
background-color: white
border: 1px solid $navy
color: $navy
.btn-forest
background-color: $forest
color: white
.btn-forest-alt
background-color: white
border: 1px solid $forest
color: $forest
.btn-gold
background-color: $gold
color: white
.btn-gold-alt
background-color: white
border: 1px solid $gold
color: $gold
.btn-purple
background-color: $purple
color: white
.btn-gold-alt
background-color: white
border: 1px solid $purple
color: $purple
2016-03-09 17:40:22 -05:00
.btn-burgandy
background-color: $burgandy
color: white
.btn-burgandy-alt
background-color: white
border: 1px solid $burgandy
color: $burgandy
.btn-lg
font-size: 18px
.btn-gplus
color: white
background-color: #DD4B39
img
height: 22px
.btn-facebook
color: white
background-color: #3B5998
img
height: 22px
2016-03-30 16:57:19 -04:00
// Dropdowns
select
height: 33px
background-color: white
border: 1px solid $navy
color: $navy
// TODO: Font size 18? Inconsistent with buttons on teacher-class-view bulk assign
// Tooltips
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
.tooltip.in
opacity: 1
2016-03-30 16:57:19 -04:00
.tooltip .tooltip-arrow::after
// Create a duplicate tooltip arrow which will cover the main arrow and make it seem like a line rather than filled
content: ' '
position: absolute
width: 0
height: 0
border-color: transparent
border-style: solid
// For each arrow position: make color gray-dark, make arrow larger, and position duplicate arrow
.tooltip.top .tooltip-arrow
margin-left: -10px
border-width: 5px 10px 0
border-top-color: $gray-dark
&::after
top: -6px
left: 50%
margin-left: -10px
border-width: 5px 10px 0
border-top-color: white
.tooltip.right .tooltip-arrow
border-right-color: $gray-dark
border-width: 5px 6px 5px 0
&::after
top: 50%
left: 1px
margin-top: -5px
border-width: 5px 6px 5px 0
border-right-color: white
.tooltip.left .tooltip-arrow
border-right-color: $gray-dark
border-width: 5px 0 5px 6px
&::after
top: 50%
right: 1px
margin-top: -5px
border-width: 5px 0 5px 6px
border-left-color: white
.tooltip.bottom .tooltip-arrow
border-bottom-color: $gray-dark
margin-left: -10px
border-width: 0 10px 5px
&::after
top: 1px
left: 50%
margin-left: -10px
border-width: 0 10px 5px
border-bottom-color: white
.tooltip-inner
padding: 10px 20px
border: 1px solid $gray-dark
color: black
background: white
border-radius: 20px
min-width: 150px
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
max-width: 600px
2016-03-30 16:57:19 -04:00
// Checkboxes
// Note: You have to use this structure in your jade:
// .checkbox-flat
// input(type='checkbox' id='some-id')
// label.checkmark(for='some-id')
.checkbox-flat
position: relative
background: white
border: thin solid #979797
width: 20px
height: 20px
input
visibility: hidden
label
position: absolute
width: 18px
height: 18px
left: 1px
top: 1px
label:after
opacity: 0
content: ''
position: absolute
width: 14px
height: 7px
background: transparent
top: 3px
left: 1px
border: 2px solid black
border-top: none
border-right: none
transform: rotate(-45deg)
label:hover::after
opacity: 0.3
input:checked + label:after
opacity: 1
// Classes
.text-navy
color: $navy
2016-06-30 18:32:58 -04:00
.text-burgandy
color: $burgandy
.text-forest
color: $forest
.bg-navy
background-color: $navy
color: white
h1, h2, h3, h4, h5, h6, a
color: white
a.btn-primary-alt
color: $navy
2016-03-16 20:00:07 -04:00
// Spacing
// Copied spacing classes in bootstrap v4 alpha 2
// http://v4-alpha.getbootstrap.com/components/utilities/#spacing
$spacer: 1rem !default
$spacer-x: $spacer !default
$spacer-y: $spacer !default
$spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ), 4: ( x: ($spacer-x * 4), y: ($spacer-y * 4) ), 5: ( x: ($spacer-x * 5), y: ($spacer-y * 5) ) ) !default
2016-03-16 20:00:07 -04:00
.m-x-auto
margin-right: auto !important
margin-left: auto !important
@each $prop, $abbrev in (margin: m, padding: p)
@each $size, $lengths in $spacers
$length-x: map-get($lengths, x)
$length-y: map-get($lengths, y)
.#{$abbrev}-a-#{$size}
#{$prop}: $length-y $length-x !important // a = All sides
2016-03-25 19:25:51 -04:00
.#{$abbrev}-t-#{$size}
2016-03-16 20:00:07 -04:00
#{$prop}-top: $length-y !important
.#{$abbrev}-r-#{$size}
#{$prop}-right: $length-x !important
.#{$abbrev}-b-#{$size}
#{$prop}-bottom: $length-y !important
.#{$abbrev}-l-#{$size}
#{$prop}-left: $length-x !important
// Axes
.#{$abbrev}-x-#{$size}
#{$prop}-right: $length-x !important
#{$prop}-left: $length-x !important
.#{$abbrev}-y-#{$size}
#{$prop}-top: $length-y !important
#{$prop}-bottom: $length-y !important
2016-02-25 18:15:15 -05:00
// base-flat.jade
#footer
background-image: url("/images/pages/home/footer_background.png")
height: 229px
2016-06-13 17:45:24 -04:00
margin: 65px auto 0
color: white
@media (max-width: $screen-sm-min)
background-color: #201a15
background-image: none
height: auto
ul
margin: 30px
li:first-child
border-bottom: 1px solid white
margin-bottom: 10px
a
color: white
#final-footer
position: absolute
left: 0
right: 0
height: 60px
color: white
background-color: #463a2c
@media (max-width: $screen-sm-min)
position: inherit
padding: 20px
height: auto
a
color: white
img
width: 150px
margin: 0 10px
2016-02-25 18:15:15 -05:00
// modal-base-flat.jade
&.modal-content
padding: 10px
border-radius: 0
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5)
.button.close
position: absolute
top: 10px
2016-06-30 18:32:58 -04:00
right: 10px