.homeworkPage
	width: 100%
	height: 100%

	.col-md-3
		height: 100%

	.todayContainer
		display: flex
		flex-direction: column

Fix issue where HW view columns appear too tall on smaller screens

.homeworkPage
	width: 100%
	height: 100%

	.todayContainer
		display: flex
		flex-direction: column


.form-group
    // global rules
    button, input, optgroup, select, textarea
        font inherit
        letter-spacing .01rem
        &:focus
            outline: 0

    // all inputs that are within a standard box
    input[type=date], input[type=datetime], input[type=datetime-local], input[type=email],
    input[type=month], input[type=number], input[type=password], input[type=tel],
    input[type=text], input[type=time], input[type=url], input[type=week]
        border 1px solid #aaaaaa
        border-radius 1px
        padding .75rem 1rem

    // button
    button, input[type=button], input[type=submit], input[type=reset]
        padding .75rem 1rem
        border-radius 1px
        border 0
        background-color $base-color
        color #eee
        transition background-color .25s ease-out

        &:hover
            background-color $base-color-dark
            cursor pointer

    // checkbox
    // color
    // date
    // datetime
    // datetime-local
    // email
    // file
    // hidden
    // image
    // month
    // number
    // password
    // radio
    // range
    // reset
    // search
    // submit
    // tel
    // text
    // time
    // url
    // week

Add transparent border to match size of inputs

.form-group
    // global rules
    button, input, optgroup, select, textarea
        font inherit
        letter-spacing .01rem
        &:focus
            outline: 0

    // all inputs that are within a standard box
    input[type=date], input[type=datetime], input[type=datetime-local], input[type=email],
    input[type=month], input[type=number], input[type=password], input[type=tel],
    input[type=text], input[type=time], input[type=url], input[type=week]
        border 1px solid #aaaaaa
        border-radius 1px
        padding .75rem 1rem

    // button
    button, input[type=button], input[type=submit], input[type=reset]
        padding .75rem 1rem
        border-radius 1px
        border solid 1px transparent
        background-color $base-color
        color #eee
        transition background-color .25s ease-out

        &:hover
            background-color $base-color-dark
            cursor pointer

    // checkbox
    // color
    // date
    // datetime
    // datetime-local
    // email
    // file
    // hidden
    // image
    // month
    // number
    // password
    // radio
    // range
    // reset
    // search
    // submit
    // tel
    // text
    // time
    // url
    // week


.skinny-footer
  position: fixed
  z-index: 10
  width: 100%
  bottom: 0
  background-color darken(dark-blue, 10%)

.share-controls
  text-align: center
  padding: 14px 10px 5px 10px

.top-band
  position: relative
  z-index: 10
  width: 100%

.stripe
  height: 5px
  display: block
  float: left
  width: 25%
  list-style-type: none

.credit
  right:          10px
  position:       absolute
  font-size:      15px
  font-weight:    bold
  a
    color: rgba(255, 255, 255, 0.48)
    text-decoration: none

Add hover state Remove bold weight from .credit - (was forcing bold)

.skinny-footer
  position: fixed
  z-index: 10
  width: 100%
  bottom: 0
  background-color darken(dark-blue, 10%)

.share-controls
  text-align: center
  padding: 14px 10px 5px 10px

.top-band
  position: relative
  z-index: 10
  width: 100%

.stripe
  height: 5px
  display: block
  float: left
  width: 25%
  list-style-type: none

.credit
  right:          10px
  position:       absolute
  font-size:      15px
  a
    color: lighten(dark-blue, 25%)
    text-decoration: none
    transition: color 200ms ease-in
    &:hover
      color: green


/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */

jeet = {
  gutter ?= 3,
  parent-first ?= false,
  layout-direction ?= LTR,
  max-width ?= 1440px
}

Revert settings back to objects

/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */

jeet = {
  gutter: 3,
  parent-first: false,
  layout-direction: LTR,
  max-width: 1440px
}


html
body
  padding: 0
  margin: 0

body
  -webkit-font-smoothing: antialiased
  position: relative

img
  border: 0

Add osx font smoothing for firefox too

html
body
  padding: 0
  margin: 0

body
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  position: relative

img
  border: 0


@import "nib"

@require '../node_modules/codemirror/lib/codemirror.css'
@require '../node_modules/codemirror/addon/dialog/dialog.css'
@require '../node_modules/codemirror/addon/hint/show-hint.css'
@require '../node_modules/codemirror/addon/lint/lint.css'
@require '../node_modules/codemirror/addon/fold/foldgutter.css'

.text-editor-container
  position relative
  flex 1

  textarea
    opacity 0

.text-editor + .CodeMirror
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  height auto
  font-size 14px

.text-editor + .CodeMirror, .CodeMirror-hints
  font-family "Consolas", monospace

.CodeMirror-lint-markers
  width 10px

Make the fold markers bigger.

@import "nib"

@require '../node_modules/codemirror/lib/codemirror.css'
@require '../node_modules/codemirror/addon/dialog/dialog.css'
@require '../node_modules/codemirror/addon/hint/show-hint.css'
@require '../node_modules/codemirror/addon/lint/lint.css'
@require '../node_modules/codemirror/addon/fold/foldgutter.css'

.text-editor-container
  position relative
  flex 1

  textarea
    opacity 0

.text-editor + .CodeMirror
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  height auto
  font-size 14px

.text-editor + .CodeMirror, .CodeMirror-hints
  font-family "Consolas", monospace

.CodeMirror-lint-markers
  width 10px

.CodeMirror-foldgutter-open:after {
  // content: "\25BE";
  content: "\25BC";
}
.CodeMirror-foldgutter-folded:after {
  // content: "\25B8";
  content: "\25B6";
}


.search-container
	text-align: center
	.input-container
		margin-top: 45px
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		margin: 45px auto
		width: fit-content
		.btn
			text-align: center

Update style for search container

.search-container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-evenly
	.input-container
		margin-top: 45px
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		margin: 45px auto
		width: fit-content
		.btn
			text-align: center


.day
  border 1px solid #eee
  display flex

  ul
    padding .5em

.day-date
  border-right 1px solid #ddd
  font-size .8em
  min-width 2.5em
  padding .5em
  text-align right

.day-weekend
  background #eee !important

.event-list
  flex-grow 1
  list-style none
  margin 0
  padding 0

.event
  display flex
  position relative
  &:hover
    background #ddd
    cursor pointer

.event-snippet
  flex-grow 1

.event-location, .event-tags
  font-size .8em

.event-gravatar
  display inline-block
  img
    display block
    vertical-align middle

.event-bars
  width 20px
  margin -1px 0
  display flex
  .event-bar
    flex-basis 12%
    flex-grow 1

// pop over

.event-pop-over
  background #eee
  border 1px solid #ccc
  box-shadow 0px 5px 5px rgba(0, 0, 0, .1)
  display none
  left 100%
  min-width 15em
  padding 1em
  position absolute
  z-index 1

  .event-title
    font-size 1.2em
    font-weight bold
    margin-bottom 1em
  .event-dates, .event-location, .event-tags
    font-size 1em
    margin .5em 0

.event:hover
  .event-pop-over
    display block

Add more space for popup

.day
  border 1px solid #eee
  display flex

  ul
    padding .5em

.day-date
  border-right 1px solid #ddd
  font-size .8em
  min-width 2.5em
  padding .5em
  text-align right

.day-weekend
  background #eee !important

.event-list
  flex-grow 1
  list-style none
  margin 0
  padding 0

.event
  display flex
  position relative
  &:hover
    background #ddd
    cursor pointer

.event-snippet
  flex-grow 1

.event-location, .event-tags
  font-size .8em

.event-gravatar
  display inline-block
  img
    display block
    vertical-align middle

.event-bars
  width 20px
  margin -1px 0
  display flex
  .event-bar
    flex-basis 12%
    flex-grow 1

// pop over

.event-pop-over
  background #eee
  border 1px solid #ccc
  box-shadow 0px 5px 5px rgba(0, 0, 0, .1)
  display none
  left calc(100% + 1em)
  min-width 15em
  padding 1em
  position absolute
  z-index 1

  .event-title
    font-size 1.2em
    font-weight bold
    margin-bottom 1em
  .event-dates, .event-location, .event-tags
    font-size 1em
    margin .5em 0

.event:hover
  .event-pop-over
    display block


.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh

Set margin to country in current weather

.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
		.country
			margin-bottom: 10px

	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh


.middle
  text-align center
  margin 0 auto
  width 50%

.file-upload
  margin-top 50px

.cy
  height 1000px

Set the width so scrolling works

.middle
  text-align center
  margin 0 auto
  width 50%

.file-upload
  margin-top 50px

.cy
  height 1000px
  width 90%
  margin 0 auto


.comment-avatar-list
	@extend .clearfix
	margin-left: -10px
	margin-right: -10px

	.btn
		vertical-align: top

	&-item
		display: inline-block
		width: 56px
		height: 56px
		margin: 0 10px 10px 10px
		vertical-align: middle

	&-comment

		&-title
			@extend .h5
			margin-top: 0
			margin-bottom: $font-size-base * 0.5
			font-weight: bold

		&-time
			display: inline-block
			margin-left: 5px
			font-family: $font-family-tiny
			color: $gray-light
			font-size: $font-size-tiny
			font-weight: normal
			vertical-align: middle

		&-owner
			margin-left: 5px
			margin-top: -2px

		&-content
			font-size: $font-size-small

Fix spacing for avatar list.

.comment-avatar-list
	@extend .clearfix
	margin-left: -10px
	margin-right: -10px

	.btn
		vertical-align: top
		margin: 0 10px 10px 10px

	&-item
		display: inline-block
		width: 56px
		height: 56px
		margin: 0 10px 10px 10px
		vertical-align: middle

	&-comment

		&-title
			@extend .h5
			margin-top: 0
			margin-bottom: $font-size-base * 0.5
			font-weight: bold

		&-time
			display: inline-block
			margin-left: 5px
			font-family: $font-family-tiny
			color: $gray-light
			font-size: $font-size-tiny
			font-weight: normal
			vertical-align: middle

		&-owner
			margin-left: 5px
			margin-top: -2px

		&-content
			font-size: $font-size-small


// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Unordered list with dashes as bullets

// Place bullets inside container (by default bullets are outside).
list_inside ?= false

.list
	> li
		position: relative
		padding-left: 1.3em
		margin-left: -1.3em unless list_inside
	> li:before
		position: absolute
		left: 0
		content: "\2014\a0"

	ul
		margin-left: 1.3em

	li > ul,
	li > ol
		margin-bottom: 0

.text
	ul
		@extend .list

if not list_inside and max_width
	+below(max_width)
		.list > li,
		.text ul > li
			margin-left: 0

Fix lists on narrow screens when content_max_width used instead of max_width.

// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Unordered list with dashes as bullets

// Place bullets inside container (by default bullets are outside).
list_inside ?= false

.list
	> li
		position: relative
		padding-left: 1.3em
		margin-left: -1.3em unless list_inside
	> li:before
		position: absolute
		left: 0
		content: "\2014\a0"

	ul
		margin-left: 1.3em

	li > ul,
	li > ol
		margin-bottom: 0

.text
	ul
		@extend .list

list_max_width ?= max_width or content_max_width

if not list_inside and list_max_width
	+below(list_max_width)
		.list > li,
		.text ul > li
			margin-left: 0


content-margin = 20px
.isic-study-users-content
.isic-study-featureset-content
.isic-study-segmentations-content
  margin-left content-margin

.isic-study-users-content
.isic-study-segmentations-content
  max-height 200px
  overflow-y auto

.isic-study-users-content
  ul
    margin-bottom 0px

.isic-study-segmentations-content
  .isic-study-segmentations-content-name
    width 110px
  .isic-study-segmentations-content-segmentationid
    width 210px
  .isic-study-segmentations-content-imageid
    width 210px

Tweak Study detail table layout

content-margin = 20px
.isic-study-users-content
.isic-study-featureset-content
.isic-study-segmentations-content
  margin-left content-margin

.isic-study-users-content
.isic-study-segmentations-content
  display inline-block
  max-height 200px
  overflow-y auto

.isic-study-users-content
  ul
    margin-bottom 0px

.isic-study-segmentations-content
  .isic-study-segmentations-content-name
    width 110px
  .isic-study-segmentations-content-segmentationid
  .isic-study-segmentations-content-imageid
    width 220px
  td.isic-study-segmentations-content-segmentationid
  td.isic-study-segmentations-content-imageid
    font-family monospace


.NcoNotifier
    position absolute
    top 48px
    left 0
    z-index 10

    width 100%
    height 400px
    overflow hidden

    pointer-events none

    &_item
        //animation-name NcoNotifierSlidein
        display none
        height 100px
        padding 8px 16px

        color black
        background rgba(#fff, .95)
        transform translateY(-100%)
        transform-origin top right
        // background rgba($color_accent, .8)

        pointer-events auto

        &:hover
            display block
            transform translateY(0) !important
            animation-name NcoNotifierLock !important
            animation-iteration-count infinite !important

        &.show
            display block
            animation NcoNotifierSlidein 6s ease-in-out

        &.lock
            display block
            transform translateY(0)
            animation-name none !important

        &.warn
            color #fff
            background hsla(0, 80%, 70%, .95)

        &.info
            color #fff
            background rgba($color_static, .95)

            a
                color #fff

Add border in between notify

.NcoNotifier
    position absolute
    top 48px
    left 0
    z-index 10

    width 100%
    height 400px
    overflow hidden

    pointer-events none

    &_item
        //animation-name NcoNotifierSlidein
        display none
        // height 100px
        padding 8px 16px

        color black
        background rgba(#fff, .95)
        transform translateY(-100%)
        transform-origin top right
        // background rgba($color_accent, .8)

        pointer-events auto

        & + .NcoNotifier_item
            border-top 1px solid #fff

        // &:hover
        //     display block
        //     transform translateY(0) !important
        //     animation-name NcoNotifierLock !important
        //     animation-iteration-count infinite !important

        &.show
            display block
            animation NcoNotifierSlidein 6s ease-in-out

        &.lock
            display block
            transform translateY(0)
            animation-name none !important

        &.warn
            color #fff
            background hsla(0, 80%, 70%, .95)

        &.info
            color #fff
            background rgba($color_static, .95)

            a
                color #fff

        &_header
            margin-bottom 8px

        &_detailBox
            position relative
            display table-cell
            vertical-align middle


.comment-widget

	&-thread
		margin-bottom: $line-height-computed * 2

	&-translate-btn
		margin-bottom: $line-height-computed * 2
		margin-left: 100px

	&-translating &-comments
		opacity: 0.5

.translate-button-branding
	font-weight: normal
	font-size: $font-size-tiny
	text-transform: none
	display: block

	@media $media-sm-up
		display: inline
		margin-left: 20px

Fix styling of comment translation button for mobile.

.comment-widget

	&-thread
		margin-bottom: $line-height-computed * 2

	&-translate-btn
		margin-bottom: $line-height-computed * 2

		@media $media-sm-up
			margin-left: 100px

	&-translating &-comments
		opacity: 0.5

.translate-button-branding
	font-weight: normal
	font-size: $font-size-tiny
	text-transform: none
	display: block

	@media $media-sm-up
		display: inline
		margin-left: 20px


.one-col {
    .document-content {
        min-width: 300px
        min-height: 100%
        max-width: 600px

        & > section {
            padding: h(2)
        }

        & > section + section {
            border-top: 1px solid $blue-bg-dark
        }

        pre code {
            background: $blue-bg
        }
    }

    .anchor {
        float: left
    }

    &.with-nav {
        .document-content {
            margin-left: 248px
        }
    }
}

Fix spacing in one column layout

.one-col {
    .document-content {
        min-width: 300px
        min-height: 100%
        max-width: 600px

        & > section {
            padding: h(2)
        }

        & > section + section {
            border-top: 1px solid $blue-bg-dark
        }

        .left, .full {
            margin: h(2) 0;
        }

        .right {
            margin: h(-1) 0 h(2)
        }

        pre code {
            background: $blue-bg
        }
    }

    .anchor {
        float: left
    }

    &.with-nav {
        .document-content {
            margin-left: 248px
        }
    }
}


generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// for small screens/default size
generateFlexGrid()

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md')

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg')

Add helper classes for flexbox grid layouts

generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// pull content to the right
.flex-pull-row-right
    justify-content flex-end

// pull content to the center
.flex-pull-row-center
    align-items center
    justify-content center

// TODO: Add column layouts

// for small screens/default size
generateFlexGrid()

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md')

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg')


@import '../plus-app/global'

:host
	width: 100%
	height: 100%

#headerPane
	background: #E9E9E9
	background: navyBase

	.button
		color: #6B6B6B
		color: pinkAccent

	h1
		text-align: center
		line-height: 60px
		font-family: "Montserrat"
		font-weight: bold
		font-size: 32px
		color: #6B6B6B
		color: pinkAccent

#columnPane
	width: 100%
	height: calc(100% - 64px)
	float: left
	background: lightgray

#postButton
	position: absolute
	bottom: 56px
	right: 56px
	background: pinkAccent

Add minor changes to dash styling

@import '../../styles/global'

:host
	width: 100%
	height: 100%

#headerPane
	background: #E9E9E9
	background: navyBase

	.button
		color: #6B6B6B
		color: white

	h1
		text-align: center
		line-height: 60px
		font-family: "Montserrat"
		font-weight: bold
		font-size: 32px
		color: #6B6B6B
		color: pinkAccent

#columnPane
	width: 100%
	height: calc(100% - 64px)
	float: left
	background: lightgray

#postButton
	position: absolute
	bottom: 56px
	right: 56px
	background: pinkAccent


@require '../../../style/colors.styl';

#overlay
  .starting-screen
    .login-links
      position absolute
      top 1.5em
      right 4em

    #new-project-buttons
      flex-wrap nowrap
      flex-direction column

    .h1-logo
      height 40px
      margin-top 21.440px
      margin-bottom 21.440px

    .welcome-section
      margin-top 2em

      .text-chunk
        position: relative;

        img
          position absolute;
          top calc(50% - 1.5em)
          width 3em
          height 3em

        p
          max-width 30em

      .text-chunk:nth-child(odd) img
        left 31em

      .text-chunk:nth-child(even) p
        position relative;
        left 4em;

    img.line-height
      position relative
      top 6px
      height 24px

Reduce severe margin for welcome text

@require '../../../style/colors.styl';

#overlay
  .starting-screen
    .login-links
      position absolute
      top 1.5em
      right 4em

    #new-project-buttons
      flex-wrap nowrap
      flex-direction column

    .h1-logo
      height 40px
      margin-top 21.440px
      margin-bottom 21.440px

    .welcome-section
      margin-top 0.5em

      .text-chunk
        position: relative;

        img
          position absolute;
          top calc(50% - 1.5em)
          width 3em
          height 3em

        p
          max-width 30em

      .text-chunk:nth-child(odd) img
        left 31em

      .text-chunk:nth-child(even) p
        position relative;
        left 4em;

    img.line-height
      position relative
      top 6px
      height 24px


@import 'cozy-ui'

.pho-create-album-form
    @extend $form
    @extend $form-text
    @extend $form-button

    .coz-create-album-label
        display        block
        margin-bottom  .5em

        text-transform uppercase
        color          #92a0b2
        font-size      .75em
        padding        .55em 0

    .coz-inline-form
        display     flex
        align-items stretch
        width       100%

        .coz-input-text
            flex-grow    1

        .coz-input-text,
        .coz-btn
            font-size  1em
            height     4em
            align-self stretch

        .coz-btn
            margin-right 0
            padding-left 2.5em
            padding-right 2.5em

Fix create album input UI

@import 'cozy-ui'

.pho-create-album-form
    @extend $form-text

    .coz-create-album-label
        display        block
        margin-bottom  .5em

        text-transform uppercase
        color          #92a0b2
        font-size      .75em
        padding        .55em 0

    .coz-inline-form
        display     flex
        align-items stretch
        width       100%

        .coz-input-text
            flex-grow    1

        .coz-input-text,
        .coz-btn
            font-size  1em
            height     4em
            align-self stretch

        .coz-btn
            margin-right 0
            padding-left 2.5em
            padding-right 2.5em


@require '../stylus_lib'

reminder-width = 500px
reminder-height = 120px

.auction-reminders
  position fixed
  bottom 40px
  right 40px
  z-index zindex-modal

.auction-reminder
  position relative
  display flex
  width reminder-width
  height reminder-height
  block-margins(15px)
  padding 15px 90px 15px 15px
  align-items center
  justify-content space-between
  background-color white
  border 1px solid gray-lighter-color
  text-decoration none
  transition opacity 0.25s, transform 0.5s

  &[data-state='open']
    opacity 1
    transform translateY(0)

  &, &[data-state='closed']
    opacity 0
    transform translateY(reminder-height / 2)

.auction-reminder-metadata
  margin 0 20px
  > h4
    avant-garde-size('s-headline')
  > h3
    margin 3px 0
    garamond-size('s-body')

.auction-reminder-clock
  white-space nowrap
  // Hide some bits of the clock
  .clock-header
  .clock-days
  .clock-days + li
    display none

.auction-reminder-close
  position absolute
  top 0
  right 0
  padding 20px
  color gray-color
  &:hover
    color gray-lighter-color
  > .icon-close
    font-size 26px
    line-height @font-size

Fix the live auction preview image width in Safari

@require '../stylus_lib'

reminder-width = 500px
reminder-height = 120px

.auction-reminders
  position fixed
  bottom 40px
  right 40px
  z-index zindex-modal

.auction-reminder
  position relative
  display flex
  width reminder-width
  height reminder-height
  block-margins(15px)
  padding 15px 90px 15px 15px
  align-items center
  justify-content space-between
  background-color white
  border 1px solid gray-lighter-color
  text-decoration none
  transition opacity 0.25s, transform 0.5s

  &[data-state='open']
    opacity 1
    transform translateY(0)

  &, &[data-state='closed']
    opacity 0
    transform translateY(reminder-height / 2)

.auction-reminder-image
  min-width:90px

.auction-reminder-metadata
  margin 0 20px
  > h4
    avant-garde-size('s-headline')
  > h3
    margin 3px 0
    garamond-size('s-body')

.auction-reminder-clock
  white-space nowrap
  // Hide some bits of the clock
  .clock-header
  .clock-days
  .clock-days + li
    display none

.auction-reminder-close
  position absolute
  top 0
  right 0
  padding 20px
  color gray-color
  &:hover
    color gray-lighter-color
  > .icon-close
    font-size 26px
    line-height @font-size


global-reset()

@import variables

html
  height 100%

body
  height 100%
  font-size 18px
  font-family Lato, sans-serif
  font-weight 300
  margin 0

a
  color link-color

h1, h2, h3, h4, h5
  font-weight 400

@import layout
@import helpers
@import buttons
@import alerts
@import builds
@import projects

Add box-sizing: border box on all elements

@import variables
global-reset()

*
  box-sizing border-box

html
  height 100%

body
  height 100%
  font-size 18px
  font-family Lato, sans-serif
  font-weight 300
  margin 0

a
  color link-color

h1, h2, h3, h4, h5
  font-weight 400

@import layout
@import helpers
@import buttons
@import alerts
@import builds
@import projects


.ion-input-text {
    background: input.bg;
    border: 1px solid #eee;
    border-radius: 3px;
    box-sizing: border-box;
    display: block;
    font-family: inherit;
    margin: 15px 0 15px 0;
    max-width: 100%;
    padding: 8px;
    transition: border 300ms cubic-bezier(0.165, 0.84, 0.44, 1);

    &:focus {
        border: 1px solid #0091ea;
        outline: 0;
    }
}

Change default width to 100%

.ion-input-text {
    background: input.bg;
    border: 1px solid #eee;
    border-radius: 3px;
    box-sizing: border-box;
    display: block;
    font-family: inherit;
    margin: 15px 0 15px 0;
    width: 100%;
    padding: 8px;
    transition: border 300ms cubic-bezier(0.165, 0.84, 0.44, 1);

    &:focus {
        border: 1px solid #0091ea;
        outline: 0;
    }
}


.loading
  margin-top 30px
  text-align center
  &.centered
    position absolute
    margin-top 0
    top 50%
    left 50%
    transform translate(-50%, -50%)
  img
    height 80px
    width 80px
  &.small
    img
      height 40px
      width 40px
    p
      font-size 1em
  p
    text-align center
    text-transform uppercase
    color $primary
    font-size 1.1em
    font-weight 300
    margin 10px 0 0 0

Fix margins of static unpositioned loading animation

.loading
  margin 30px 0
  text-align center
  &.centered
    position absolute
    margin 0
    top 50%
    left 50%
    transform translate(-50%, -50%)
  img
    height 80px
    width 80px
  &.small
    img
      height 40px
      width 40px
    p
      font-size 1em
  p
    text-align center
    text-transform uppercase
    color $primary
    font-size 1.1em
    font-weight 300
    margin 10px 0 0 0


.ChannelBlockGroup
  width 100%
  &__inner
    margin 0 auto
    display flex
    justify-content flex-start
  &__divider
    border-top 1px solid bordergray
    margin 2em auto
    height 0

  for i in (1..5)
    @media (min-width:(block_width_mar * i) + 20) and (max-width:(block_width_mar * (i + 1)) + 20)
      &__inner
        width (block_width_mar * i)
      &__divider
        width (block_width_mar * i) - 20
      .Block:nth-of-type(1n+{i+1})
        display none

  +mobile()
    border-color transparent

Hide new border on mobile size

.ChannelBlockGroup
  width 100%
  &__inner
    margin 0 auto
    display flex
    justify-content flex-start
  &__divider
    border-top 1px solid bordergray
    margin 2em auto
    height 0

  for i in (1..5)
    @media (min-width:(block_width_mar * i) + 20) and (max-width:(block_width_mar * (i + 1)) + 20)
      &__inner
        width (block_width_mar * i)
      &__divider
        width (block_width_mar * i) - 20
      .Block:nth-of-type(1n+{i+1})
        display none

  +mobile()
    &__divider
      border-color transparent
      margin 0.5em auto


@import '~app/assets/stylus'

.root
  background: $themeColor
  color: $backgroundColor

  padding: $minPadding 0

  +from($sml)
    padding: $smlPadding 0

  +from($med)
    padding: $medPadding 0

  +from($lge)
    padding: $lgePadding 0

  +from($xlg)
    padding: $xlgPadding 0

.column
  composes: column from 'app/assets/stylus/common.styl'

.wrapper
  display: flex
  flex-direction: row
  flex-wrap: wrap

.info
  flex: 0 0 100%

  +from($med)
    flex-basis: calc((100% - 2 * $medGutter) / 3)
    margin-right: $medGutter

    &:nth-child(3n)
      margin-right: 0

  +from($lge)
    flex-basis: calc((100% - 3 * $lgeGutter) / 4)
    margin-right: $lgeGutter

    &:nth-child(n)
      margin-right: $lgeGutter

    &:nth-child(4n)
      margin-right: 0

  +from($xlg)
    flex-basis: calc((100% - 3 * $xlgGutter) / 4)
    margin-right: $xlgGutter

    &:nth-child(n)
      margin-right: $xlgGutter

Fix stylus bug with variables inside calc

@import '~app/assets/stylus'

.root
  background: $themeColor
  color: $backgroundColor

  padding: $minPadding 0

  +from($sml)
    padding: $smlPadding 0

  +from($med)
    padding: $medPadding 0

  +from($lge)
    padding: $lgePadding 0

  +from($xlg)
    padding: $xlgPadding 0

.column
  composes: column from 'app/assets/stylus/common.styl'

.wrapper
  display: flex
  flex-direction: row
  flex-wrap: wrap

.info
  flex: 0 0 100%

  +from($med)
    flex-basis: "calc((100% - %s) / 3)" % (2 * $medGutter)
    margin-right: $medGutter

    &:nth-child(3n)
      margin-right: 0

  +from($lge)
    flex-basis: "calc((100% - %s) / 4)" % (3 * $lgeGutter)
    margin-right: $lgeGutter

    &:nth-child(n)
      margin-right: $lgeGutter

    &:nth-child(4n)
      margin-right: 0

  +from($xlg)
    flex-basis: "calc((100% - %s) / 4)" % (3 * $xlgGutter)
    margin-right: $xlgGutter

    &:nth-child(n)
      margin-right: $xlgGutter


@import '_vars.styl'

:global
	@import 'normalize.css/normalize.css'
	html
		font-family "futura-pt", sans-serif
		&.wf-loading
			color transparent
			*
				color transparent !important
				text-shadow none !important

	::selection
		background selection-color
		color lighten(selection-color, 75%)

	a
		color accentColor
		text-decoration none
		&:hover, &:focus
			text-decoration underline

	body
		min-height 100vh
		background-color splashDark
		color mainColor

Load normalize from node_modules using webpack's resolver

@import '_vars.styl'

:global
	@import '~normalize.css/normalize.css'
	html
		font-family "futura-pt", sans-serif
		&.wf-loading
			color transparent
			*
				color transparent !important
				text-shadow none !important

	::selection
		background selection-color
		color lighten(selection-color, 75%)

	a
		color accentColor
		text-decoration none
		&:hover, &:focus
			text-decoration underline

	body
		min-height 100vh
		background-color splashDark
		color mainColor


/*! baremetal v0.1.0 | MIT License | github.com/ryennelsen/baremetal */

@require globals
@require variables
@require grid
@require forms

Add extra exclamation mark to preserve buffered/important comment structure

/*!! baremetal v0.1.0 | MIT License | github.com/ryennelsen/baremetal */

@require globals
@require variables
@require grid
@require forms


clearfix()
  zoom 1
  &:before, &:after
    content '.'
    display block
    height: 0
    overflow hidden
  &:after
    clear both

invisible()
  height 0
  line-height 0
  font-size 0
  color transparent
  overflow hidden

vertical-gradient(from, to)
  background-image -webkit-gradient(linear, left top, left bottom, color-stop(0, from), color-stop(1, to))
  background-image -webkit-linear-gradient(top, from 0%, to 100%)
  background-image -moz-linear-gradient(top, from 0%, to 100%)
  background-image linear-gradient(top, from 0%, to 100%)

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

Add drop shadow to menu.

clearfix()
  zoom 1
  &:before, &:after
    content '.'
    display block
    height: 0
    overflow hidden
  &:after
    clear both

invisible()
  height 0
  line-height 0
  font-size 0
  color transparent
  overflow hidden

vertical-gradient(from, to)
  background-image -webkit-gradient(linear, left top, left bottom, color-stop(0, from), color-stop(1, to))
  background-image -webkit-linear-gradient(top, from 0%, to 100%)
  background-image -moz-linear-gradient(top, from 0%, to 100%)
  background-image linear-gradient(top, from 0%, to 100%)

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  box-shadow arguments

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments


// base styles

body {
  max-width: 960px;
  margin: 0 auto;

  font-family: 'Lato', Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-weight: bold;
  font-size: 32px
}

h2 {
  font-weight: bold;
  font-size: 24px;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-bottom: 0.5em;
}

code {
  font-family: Monaco, monospace;
  background: #eee;
}

form {
  width: 400px;

  label, input {
    display: block;
  }

  input {
    width: 100%;
  }

  button {
    float: right;
  }
}

Make forms a little nicer

// base styles

body {
  max-width: 960px;
  margin: 0 auto;

  font-family: 'Lato', Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-weight: bold;
  font-size: 32px
}

h2 {
  font-weight: bold;
  font-size: 24px;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-bottom: 0.5em;
}

code {
  font-family: Monaco, monospace;
  background: #eee;
}

form {
  width: 600px;
  margin: 0 auto;

  label, input {
    display: block;
  }

  input, textarea {
    width: 100%;
  }

  textarea {
    height: 400px;
  }

  button {
    float: right;
  }
}


.cf-popular_artists
  &__row
    margin-top 15px
    &:hover
      i
        color black
    img
      display inline-block
      border-radius 15px
      margin-right 10px
      vertical-align middle
    a
      text-decoration none
    i
      color gray-lighter-color
      vertical-align middle
      float right
    div
      display inline-block
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      max-width 175px
      vertical-align middle
  border-left 1px solid gray-lighter-color
  padding-left 30px
  margin-bottom 40px

Add color transition and change font size of chevron on popular artists on /collect

.cf-popular_artists
  &__row
    margin-top 15px
    &:hover
      i
        color black
    img
      display inline-block
      border-radius 15px
      margin-right 10px
      vertical-align middle
    a
      text-decoration none
    i
      color gray-lighter-color
      vertical-align middle
      float right
      font-size 25px
      transition color 0.25s
    div
      display inline-block
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      max-width 175px
      vertical-align middle
  border-left 1px solid gray-lighter-color
  padding-left 30px
  margin-bottom 40px


// Page header block (under breadcrubmbs): title + description
//

@import "nodeca.core/client/common/_variables"

.page-head
  margin-top 1.5rem // For pages without breadcrumbs
  margin-bottom 1.5rem

.page-head__title
  margin 0
  font-weight normal
  font-size $font-size-h2
  color $brand-primary

.page-head__descr
  font-size $font-size-xs
  color $body-color-secondary
  margin .2em 0 0 0

Increase page header bottom margin

// Page header block (under breadcrubmbs): title + description
//

@import "nodeca.core/client/common/_variables"

.page-head
  margin-top 1.5rem // For pages without breadcrumbs
  margin-bottom 2rem

.page-head__title
  margin 0
  font-weight normal
  font-size $font-size-h2
  color $brand-primary

.page-head__descr
  font-size $font-size-xs
  color $body-color-secondary
  margin .2em 0 0 0


/*
  Variables
*/

blue = #125688
red = #bd0610
offwhite = #fafafa
lightgrey  = #EDEEED
lightgray = lightgrey

html
  font-size 10px
  font-family sans-serif

p
  font-size 1.6rem
  line-height 1.5

h1
  font-family merriweather, 'merriweatheritalic'
  text-align center
  font-weight 100
  font-size 8rem
  margin 2rem 0
  letter-spacing -1px
  text-shadow 0px 4px 0 rgba(18, 86, 136, 0.11)
  a
    color red
    text-decoration none
    &:focus
      outline 0

@font-face {
    font-family: 'merriweatheritalic';
    src: url('/fonts/ttf/Merriweather-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Change font size for mobile heading

/*
  Variables
*/

blue = #125688
red = #bd0610
offwhite = #fafafa
lightgrey  = #EDEEED
lightgray = lightgrey

html
  font-size 10px
  font-family sans-serif

p
  font-size 1.6rem
  line-height 1.5

h1
  font-family merriweather, 'merriweatheritalic'
  text-align center
  font-weight 100
  font-size 8rem
  margin 2rem 0
  letter-spacing -1px
  text-shadow 0px 4px 0 rgba(18, 86, 136, 0.11)
  a
    color red
    text-decoration none
    &:focus
      outline 0

@font-face {
    font-family: 'merriweatheritalic';
    src: url('/fonts/ttf/Merriweather-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media (max-width: 500px)
  h1
    font-size 5rem


.Connection
  display block
  collapsed-margins(0.5em)
  border 2px solid
  cursor pointer

  title-width = 65%

  > span
    display flex
    align-items center
    justify-content space-between
    padding button-padding

  &__title
    max-width title-width
    font-size font-size-base
    line-height line-height-base
    ellipsis(title-width)

    > span
      font-size font-size-xs

  &__author
    font-size font-size-xs
    line-height line-height-base
    ellipsis(100% - title-width)

  for visibility in 'public' 'closed' 'private'
    &[data-visibility=\'{visibility}\']
      color lookup('colors-channel-' + visibility)
      border-color rgba(@color, colors-border-alpha)
      &:hover
        border-color @color

  &[data-visibility='placeholder']
    cursor default
    color colors-gray-light
    border-color rgba(@color, colors-border-alpha)
    &:hover
      border-color @color

Make better use of space in connection representation

.Connection
  display block
  collapsed-margins(0.5em)
  border 2px solid
  cursor pointer

  > span
    display flex
    align-items center
    justify-content space-between
    padding button-padding

  &__title
  &__author
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    max-width 75%

  &__title
    flex 1
    font-size font-size-base
    line-height line-height-base
    margin-right 0.5em

    > span
      font-size font-size-xs

  &__author
    font-size font-size-xs
    line-height line-height-base

  for visibility in 'public' 'closed' 'private'
    &[data-visibility=\'{visibility}\']
      color lookup('colors-channel-' + visibility)
      border-color rgba(@color, colors-border-alpha)
      &:hover
        border-color @color

  &[data-visibility='placeholder']
    cursor default
    color colors-gray-light
    border-color rgba(@color, colors-border-alpha)
    &:hover
      border-color @color


@import 'animations'

/*!
 * ICONS
 * ================
 *
 * This file contains icons coded in data:uri
 */

$icon
    content ''
    display inline-block
    vertical-align middle
    background-position center
    background-repeat no-repeat
    background-size cover

// icon's sizes
// ========================================================
$icon-12
    width em(12px)
    height em(12px)

$icon-16
    width em(16px)
    height em(16px)

$icon-24
    width em(24px)
    height em(24px)

$icon-36
    width em(36px)
    height em(36px)

// icon's properties
// ========================================================
$icon-centered
    position absolute
    top 50%
    left 50%
    transform translateX(-50%) translateY(-50%)

$spin-anim
    // arguments' order is important: the animation name must stay first
    // so that scoping works
    animation spin 1s linear infinite

$icon-spinner-grey
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-grey.svg')

$icon-spinner-white
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-white.svg')

$icon-spinner-small-blue
    @extend $icon
    @extend $icon-16
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-blue.svg')

Fix 'Path must be a string. Received undefined' embed ⟹ embedurl

@import 'animations'

/*!
 * ICONS
 * ================
 *
 * This file contains icons coded in data:uri
 */

$icon
    content ''
    display inline-block
    vertical-align middle
    background-position center
    background-repeat no-repeat
    background-size cover

// icon's sizes
// ========================================================
$icon-12
    width em(12px)
    height em(12px)

$icon-16
    width em(16px)
    height em(16px)

$icon-24
    width em(24px)
    height em(24px)

$icon-36
    width em(36px)
    height em(36px)

// icon's properties
// ========================================================
$icon-centered
    position absolute
    top 50%
    left 50%
    transform translateX(-50%) translateY(-50%)

$spin-anim
    // arguments' order is important: the animation name must stay first
    // so that scoping works
    animation spin 1s linear infinite

$icon-spinner-grey
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-grey.svg')

$icon-spinner-white
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-white.svg')

$icon-spinner-small-blue
    @extend $icon
    @extend $icon-16
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-blue.svg')


// maintain aspect ratio of 4:3 for the map, see
// https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
//
.location-show-dlg__map-container
  width 100%
  padding-bottom 75%
  position relative

  // same background as for .leaflet-container,
  // in case styles for leaflet aren't loaded yet
  background #ddd

.location-show-dlg__map
  position absolute
  top 0
  bottom 0
  left 0
  right 0

Increase map height on narrow screens

@import "nodeca.core/client/common/_variables"

// maintain aspect ratio of 4:3 for the map, see
// https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
//
.location-show-dlg__map-container
  width 100%
  padding-bottom 75%
  position relative

  // same background as for .leaflet-container,
  // in case styles for leaflet aren't loaded yet
  background #ddd

.location-show-dlg__map
  position absolute
  top 0
  bottom 0
  left 0
  right 0

@media (max-width: $grid-breakpoints.sm - 1)
  .location-show-dlg__map-container
    padding-bottom 100%


body
	padding-top 70px

.mangas, .mangas-cover
	display inline-block
	padding 0 10px 0 10px

@media (max-width: 767px)
	.mangas.grid-item
		width 33%
	.mangas-cover.grid-item
		width 50%
@media (min-width: 768px)
	.mangas.grid-item
		width 25%
	.mangas-cover.grid-item
		width 33%
@media (min-width: 992px)
	.mangas.grid-item
		width 20%
	.mangas-cover.grid-item
		width 25%
@media (min-width: 1200px)
	.mangas.grid-item
		width 16%
	.mangas-cover.grid-item
		width 20%

Update display on small devices

body
	padding-top 70px

.mangas, .mangas-cover
	display inline-block
	padding 0 10px 0 10px

@media (max-width: 767px)
	.mangas.grid-item
		width 50%
	.mangas-cover.grid-item
		width 50%
@media (min-width: 768px)
	.mangas.grid-item
		width 33%
	.mangas-cover.grid-item
		width 33%
@media (min-width: 992px)
	.mangas.grid-item
		width 20%
	.mangas-cover.grid-item
		width 25%
@media (min-width: 1200px)
	.mangas.grid-item
		width 16%
	.mangas-cover.grid-item
		width 20%


.main-page
  h1
    font-weight 300
    margin-bottom 0

.stat-display
  display inline-block
  width 100%
  margin 40px 0 20px 0
  display flex
  justify-content space-between
  flex-flow wrap

  .stat-display__stat
    margin 0 20px 20px 20px
    text-align center
    width calc(50% - 40px)

    +above(desktop)
      margin 0 0 20px 0
      width (1/7*100)%

    .stat-display__value
      font-family inherit
      color $brand_primary
      font-size 38px
      margin 0
      font-weight 300

    small
      color #666
      font-size 1em
      line-height 1

  .tooltip
    left -15%
    width 130%
    &:before
      left 50%

Tweak alignment of stats tooltips

.main-page
  h1
    font-weight 300
    margin-bottom 0

.stat-display
  display inline-block
  width 100%
  margin 40px 0 20px 0
  display flex
  justify-content space-between
  flex-flow wrap

  .stat-display__stat
    margin 0 20px 20px 20px
    text-align center
    width calc(50% - 40px)

    +above(desktop)
      margin 0 0 20px 0
      width (1/7*100)%

    .stat-display__value
      font-family inherit
      color $brand_primary
      font-size 38px
      margin 0
      font-weight 300

    small
      color #666
      font-size 1em
      line-height 1

  .tooltip
    width 100%
    &:before
      left 50%


gs( col-width = ks-grid-col-width, gut-width = ks-grid-gut-width, cols = ks-grid-columns, total = ks-grid-total-width )
    ks-grid-config[ "columns" ] = cols
    ks-grid-config[ "column-width" ] = col-width
    ks-grid-config[ "gutter-width" ] = gut-width
    ks-grid-config[ "computed-total-width" ] = ( col-width + gut-width ) * cols
    ks-grid-config[ "total-width" ] = ( col-width + gut-width ) * cols
    if unit( total ) == "%"
        ks-grid-config[ "total-width" ] = total
    if selector() != "&"
        width: ks-grid-config[ "total-width" ]
        margin 0 auto
        overflow hidden

Remove fluid layout code (temporary)

gs( col-width = ks-grid-col-width, gut-width = ks-grid-gut-width, cols = ks-grid-columns, total = ks-grid-total-width )
    ks-grid-config[ "columns" ] = cols
    ks-grid-config[ "column-width" ] = col-width
    ks-grid-config[ "gutter-width" ] = gut-width
    ks-grid-config[ "computed-total-width" ] = ( col-width + gut-width ) * cols
    ks-grid-config[ "total-width" ] = ( col-width + gut-width ) * cols
    if selector() != "&"
        width: ks-grid-config[ "total-width" ]
        margin 0 auto
        overflow hidden


@keyframes loading-indicator-bounce
  0%
    transform: translateY(-0.3em)

  100%
    transform: translateY(0.3em)

.loading-indicator
  letter-spacing: 0.1em

  > *
    TIME = 500ms

    animation: loading-indicator-bounce TIME ease-in-out infinite alternate

    &:nth-child(3n-1)
      animation-delay: unit(TIME / 3, unit(TIME))

    &:nth-child(3n)
      animation-delay: unit(TIME / 1.5, unit(TIME))

Fix loading indicator in Firefox and Safari

@keyframes loading-indicator-bounce
  0%
    transform: translateY(-0.3em)

  100%
    transform: translateY(0.3em)

.loading-indicator
  letter-spacing: 0.1em

  > *
    TIME = 500ms

    animation: loading-indicator-bounce TIME ease-in-out infinite alternate
    display: inline-block

    &:nth-child(3n-1)
      animation-delay: unit(TIME / 3, unit(TIME))

    &:nth-child(3n-2)
      animation-delay: unit(TIME / 1.5, unit(TIME))


[qi-spark-line]
  & path
    stroke: SteelBlue
    stroke-width: 2
    fill: none
  & .guide
    stroke DarkSlateGray
    stroke-dasharray 3, 3

[qi-scatter-plot]
  & .trendline
    stroke DarkSlateGray
    stroke-dasharray: 4, 4
  & .r-squared
    font-size smaller
    fill DarkSlateGray

Make the r-squared bold to stand out.

[qi-spark-line]
  & path
    stroke: SteelBlue
    stroke-width: 2
    fill: none
  & .guide
    stroke DarkSlateGray
    stroke-dasharray 3, 3

[qi-scatter-plot]
  & .trendline
    stroke DarkSlateGray
    stroke-dasharray: 4, 4
  & .r-squared
    font-size smaller
    font-weight bold
    fill DarkSlateGray


// Common markup styles for all messages

@import "nodeca.core/client/common/_variables"

.markup
  // Avoid layout width break by long strings
  overflow auto

  // Fix for overflow to not cut attachments shadows
  padding-left 3px
  margin-left -3px
  padding-right 3px
  margin-right -3px

  // External images
  .image
    max-width 100%
    display inline-block
    border-radius 2px
    position relative
    // protect from hidden images
    min-width 10px
    min-height 10px
    background-color #ccc

    & > img
      max-width 100%
      border-radius 2px
      position absolute

  .image__spacer
    display block

  // Attachments in text
  .thumb__image
    border-radius 2px

  a.link
  a.ez-inline
    color #744
    border-bottom 1px dotted
    text-decoration none
    &:hover
      border-bottom 1px solid
    &:focus
      border-bottom none
      outline thin dotted
      outline-offset -1px

  pre code
    white-space unset

  .ez-block
    margin-bottom (baseLineHeight / 2)
    border-radius 2px

  .emoji
    font-size 120%
    line-height 100%
    vertical-align middle
    color #990

.markup-tail
  // Attachments thumbnails
  .thumb__image
    border-radius 2px

Use wider font for messages

// Common markup styles for all messages

@import "nodeca.core/client/common/_variables"

.markup
  // Avoid layout width break by long strings
  overflow auto

  // Fix for overflow to not cut attachments shadows
  padding-left 3px
  margin-left -3px
  padding-right 3px
  margin-right -3px

  font-family $font-family-sans-serif-wide

  // External images
  .image
    max-width 100%
    display inline-block
    border-radius 2px
    position relative
    // protect from hidden images
    min-width 10px
    min-height 10px
    background-color #ccc

    & > img
      max-width 100%
      border-radius 2px
      position absolute

  .image__spacer
    display block

  // Attachments in text
  .thumb__image
    border-radius 2px

  a.link
  a.ez-inline
    color #744
    border-bottom 1px dotted
    text-decoration none
    &:hover
      border-bottom 1px solid
    &:focus
      border-bottom none
      outline thin dotted
      outline-offset -1px

  pre code
    white-space unset

  .ez-block
    margin-bottom (baseLineHeight / 2)
    border-radius 2px

  .emoji
    font-size 120%
    line-height 100%
    vertical-align middle
    color #990

.markup-tail
  // Attachments thumbnails
  .thumb__image
    border-radius 2px


.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: flex
		padding: 50px
		font-size: 1.6rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			flex: 1
			padding: 10px 5px
			margin-right: 20px
			background: rgba(160, 158, 151, 0.7)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
		span
			display: block
		.city-name
			margin-bottom: 8px
			font-size: 1.4rem
		.condition-text
			margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Update style to Forecast weather elements

.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: flex
		padding: 50px
		font-size: 1.2rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			flex: 1
			padding: 13px 5px 10px 5px
			margin-right: 20px
			background: rgba(160, 158, 151, 0.7)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
			span
				margin-bottom: 8px
			.date
				font-size: 1rem
			.city-name
				margin-bottom: 8px
				font-size: 1.4rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex


.calendarNowLine
	border-bottom: dashed 2px red
	width: 100%
	height: 0
	position: absolute
	left: 0
	pointer-events: none
	z-index: 2

Make now line on calendar easier to see

.calendarNowLine
	border-bottom: solid 2px red
	width: 100%
	height: 0
	position: absolute
	left: 0
	pointer-events: none
	z-index: 2


.menu nav
  > ul
    list-style none
    display flex

  .menu-icon
    cursor pointer
    color $mediumTextColor

  > ul > li
    position relative
    display -webkit-flex
    display flex
    align-items center
    margin-right 20px

    &:last-child
      margin-right 0

    .octicon
      cursor pointer

      &:hover
        color $hoverLinkColor

  .new-button
    margin-right 30px

  .profile-link

    a
      font-weight bold

    img
      border-radius 3px
      vertical-align middle
      margin-right 2px

  .dropdown-mask
    display none
    z-index 2000
    position fixed
    height 100%
    width 100%
    left 0
    top 0

    &.show
      display block

  .dropdown-menu
    display none
    z-index 3000
    background #fff
    border-radius 3px
    position absolute
    bottom -80px
    right 0px
    border 1px solid $borderColor
    width 170px
    padding 5px 0
    box-shadow 1px 2px 3px rgba(0, 0, 0, .15);

    &.show
      display block

    li
      height 40px
      line-height 40px
      display block

      &:hover
        background $lightBackground

      a
        color #000
        box-sizing border-box
        padding-left 15px
        display block
        height 100%
        width 100%
        line-height 40px

Set explicit width on profile photo in top menu.

.menu nav
  > ul
    list-style none
    display flex

  .menu-icon
    cursor pointer
    color $mediumTextColor

  > ul > li
    position relative
    display -webkit-flex
    display flex
    align-items center
    margin-right 20px

    &:last-child
      margin-right 0

    .octicon
      cursor pointer

      &:hover
        color $hoverLinkColor

  .new-button
    margin-right 30px

  .profile-link

    a
      font-weight bold

    img
      width 20px
      height 20px
      border-radius 3px
      vertical-align middle
      margin-right 2px

  .dropdown-mask
    display none
    z-index 2000
    position fixed
    height 100%
    width 100%
    left 0
    top 0

    &.show
      display block

  .dropdown-menu
    display none
    z-index 3000
    background #fff
    border-radius 3px
    position absolute
    bottom -80px
    right 0px
    border 1px solid $borderColor
    width 170px
    padding 5px 0
    box-shadow 1px 2px 3px rgba(0, 0, 0, .15);

    &.show
      display block

    li
      height 40px
      line-height 40px
      display block

      &:hover
        background $lightBackground

      a
        color #000
        box-sizing border-box
        padding-left 15px
        display block
        height 100%
        width 100%
        line-height 40px


@import "nodeca.core/client/common/_variables"

// if subforums exist - add space before control bar
.forum-section-root .forum-sections
  margin-bottom 30px

.forum-topiclist
  margin-bottom 5px

.forum-section__notopics
  margin-top 10px
  text-align center

// display subsections only if first page is visible
.forum-section-root .forum-sections
  display none

.forum-section-root__m-first-page .forum-sections
  display block

// disable pager if we have prefetch
.js .forum-section__page-links
  display none

// TODO: move to separate block when menu complete
.forum-section__tracking
  margin-top baseLineHeight
  shortable()

.forum-section__tracking-btn
  margin-right .5em

Hide topic bookmarks markers for deteted topics

@import "nodeca.core/client/common/_variables"

// if subforums exist - add space before control bar
.forum-section-root .forum-sections
  margin-bottom 30px

.forum-topiclist
  margin-bottom 5px

.forum-section__notopics
  margin-top 10px
  text-align center

// display subsections only if first page is visible
.forum-section-root .forum-sections
  display none

.forum-section-root__m-first-page .forum-sections
  display block

// disable pager if we have prefetch
.js .forum-section__page-links
  display none

// TODO: move to separate block when menu complete
.forum-section__tracking
  margin-top baseLineHeight
  shortable()

.forum-section__tracking-btn
  margin-right .5em

.forum-topicline__m-deleted
.forum-topicline__m-deleted-hard
  .forum-topicline__bookmarked-marker
    display none


@import '../../variables'

.module-build-history
  padding 20px

  h5
    font-weight bold
    font-size 16px
    margin-bottom 20px

.module-build-history__pagination
  margin 0

.module-build-history__list
  padding-left 0
  box-shadow 0 3px 6px rgba(0,0,0,0.20)

  li
    display block

.module-build-history-item
  display flex
  align-items center
  height 30px
  margin-bottom -1px
  border 1px solid $color-battleship
  position relative

.module-build-history-item__build-number
  width 50px

.module-build-history-item__status
  margin 0
  padding-left 20px
  flex-grow 1

.module-build-history-item__users-for-build-wrapper
  width 30%
  margin-right 50px

.module-build-history-item__build-trigger-label
  font-size 12px
  position absolute
  right 30px

.module-build-history-item__commit-info
  margin-right 6px

.module-build-history-item--clickable
  cursor pointer

  &:hover
    background-color $color-gypsum

Fix alignment of users in module build history table

@import '../../variables'

.module-build-history
  padding 20px

  h5
    font-weight bold
    font-size 16px
    margin-bottom 20px

.module-build-history__pagination
  margin 0

.module-build-history__list
  padding-left 0
  box-shadow 0 3px 6px rgba(0,0,0,0.20)

  li
    display block

.module-build-history-item
  display flex
  align-items center
  height 30px
  margin-bottom -1px
  border 1px solid $color-battleship
  position relative

.module-build-history-item__build-number
  width 50px

.module-build-history-item__status
  margin 0
  padding-left 20px
  flex-grow 1

.module-build-history-item__users-for-build-wrapper
  width 30%
  margin-right 50px

.module-build-history-item__build-trigger-label
  font-size 12px
  position absolute
  right 30px

.module-build-history-item__commit-info
  margin 5px
  width 20px
  text-align center

.module-build-history-item--clickable
  cursor pointer

  &:hover
    background-color $color-gypsum


.modal-form.tutorial-dialog
  border-radius: 8px
  max-width: 400px
  padding: 0 0 1.5em

.tutorial-steps
  display: flex
  flex-direction: column
  max-height: 85vh
  max-width: 95vw
  width: 50ch

  > .step-through-content
    // TODO: I'd rather the header media not scroll.
    overflow-y: auto !important // Override swipe library setting.

  > .step-through-controls
    text-align: center

.media-card.tutorial-step
  > .media-card-content
    @extends .content-container

.media-card-media
  display: block
  max-width: 100%

.step-through-direction
  @extends $reset-button
  vertical-align: middle

.step-through-pips
  margin: 0 0.4em

.step-through-pip
  cursor: pointer
  padding: 0.2em 0.4em

.step-through-pip-input
  cursor: pointer
  position: absolute
  opacity: 0

.step-through-pip-number
  border: 0.2em solid
  border-radius: 50%
  cursor: pointer
  display: inline-block
  height: 0.5em
  overflow: hidden
  text-indent: 2em
  vertical-align: middle
  width: 0.5em

  :focus + &
    box-shadow: 0 0 1px 1px MAIN_HIGHLIGHT

  :checked + &
    background: currentColor

Adjust Margins on Tutorial Modal

.modal-form.tutorial-dialog
  border-radius: 8px
  max-width: 400px
  padding: 0 0 1.5em
  margin-left: 0px !important
  margin-top: 28px !important

.tutorial-steps
  display: flex
  flex-direction: column
  max-height: 85vh
  max-width: 95vw
  width: 50ch

  > .step-through-content
    // TODO: I'd rather the header media not scroll.
    overflow-y: auto !important // Override swipe library setting.

  > .step-through-controls
    text-align: center

.media-card.tutorial-step
  > .media-card-content
    @extends .content-container

.media-card-media
  display: block
  max-width: 100%

.step-through-direction
  @extends $reset-button
  vertical-align: middle

.step-through-pips
  margin: 0 0.4em

.step-through-pip
  cursor: pointer
  padding: 0.2em 0.4em

.step-through-pip-input
  cursor: pointer
  position: absolute
  opacity: 0

.step-through-pip-number
  border: 0.2em solid
  border-radius: 50%
  cursor: pointer
  display: inline-block
  height: 0.5em
  overflow: hidden
  text-indent: 2em
  vertical-align: middle
  width: 0.5em

  :focus + &
    box-shadow: 0 0 1px 1px MAIN_HIGHLIGHT

  :checked + &
    background: currentColor


.editable-text
  padding-right 0px
  +above(md)
    padding-right 30px
  textarea.invisible-input
    display block
    width 100%

.character-limit
  position absolute
  top -8px
  right 5px
  font-size 12px
  color rgba(black, .5)
  +above(md)
    top -5px
.edit-icon
  position absolute
  top 3%
  right 0
  +above(md)
    right -30px

input.invisible-input,
textarea.invisible-input
  border none
  border-bottom 2px solid rgba(black, .5)
  background none
  padding 4px
  height auto
  color white
  resize none
  border-radius 0
  &:focus
    outline 0

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color rgba(black, .5)
}
::-moz-placeholder { /* Firefox 19+ */
  color rgba(black, .5)
}
:-ms-input-placeholder { /* IE 10+ */
  color rgba(black, .5)
}
:-moz-placeholder { /* Firefox 18- */
  color rgba(black, .5)
}

Fix scrollbars on textareas in IE10

.editable-text
  padding-right 0px
  +above(md)
    padding-right 30px
  textarea.invisible-input
    display block
    width 100%

  textarea
    overflow hidden

.character-limit
  position absolute
  top -8px
  right 5px
  font-size 12px
  color rgba(black, .5)
  +above(md)
    top -5px
.edit-icon
  position absolute
  top 3%
  right 0
  +above(md)
    right -30px

input.invisible-input,
textarea.invisible-input
  border none
  border-bottom 2px solid rgba(black, .5)
  background none
  padding 4px
  height auto
  color white
  resize none
  border-radius 0
  &:focus
    outline 0

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color rgba(black, .5)
}
::-moz-placeholder { /* Firefox 19+ */
  color rgba(black, .5)
}
:-ms-input-placeholder { /* IE 10+ */
  color rgba(black, .5)
}
:-moz-placeholder { /* Firefox 18- */
  color rgba(black, .5)
}


@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        height   em(300px)
        background-color grey-10

        a
          vertical-align middle

    .pho-photo-item
        height       em(300px)
        margin       0 .5em .5em 0
        background   grey-01
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index 2
        opacity  0
        height 3em
        width 3em
        padding 1em
        cursor pointer

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width 100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1

Improve margins and align stylus properties

@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        height   em(300px)
        background-color grey-10
        margin   0 1em 1em 0

        a
          vertical-align middle

    .pho-photo-item
        height       em(300px)
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index  2
        opacity  0
        height   3em
        width    3em
        padding  1em
        cursor   pointer

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width  100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1


// Mixins
// --------------------------------------------------
vendors = official

percentage($n)
  if $n == 0
    0
  else
    unit($n * 100, "%")

// Utilities

@import "mixins/hide-text"
@import "mixins/opacity"
@import "mixins/image"
@import "mixins/labels"
@import "mixins/reset-filter"
@import "mixins/resize"
@import "mixins/responsive-visibility"
@import "mixins/size"
@import "mixins/tab-focus"
@import "mixins/text-emphasis"
@import "mixins/text-overflow"
@import "mixins/vendor-prefixes"

// Components
@import "mixins/alerts"
@import "mixins/buttons"
@import "mixins/panels"
@import "mixins/pagination"
@import "mixins/list-group"
@import "mixins/nav-divider"
@import "mixins/forms"
@import "mixins/progress-bar"
@import "mixins/table-row"

// Skins
@import "mixins/background-variant"
@import "mixins/border-radius"
@import "mixins/gradients"

// Layout
@import "mixins/clearfix"
@import "mixins/center-block"
@import "mixins/nav-vertical-align"
@import "mixins/grid-framework"
@import "mixins/grid"

Make the "vendors" variable overridable

// Mixins
// --------------------------------------------------
vendors ?= official

percentage($n)
  if $n == 0
    0
  else
    unit($n * 100, "%")

// Utilities

@import "mixins/hide-text"
@import "mixins/opacity"
@import "mixins/image"
@import "mixins/labels"
@import "mixins/reset-filter"
@import "mixins/resize"
@import "mixins/responsive-visibility"
@import "mixins/size"
@import "mixins/tab-focus"
@import "mixins/text-emphasis"
@import "mixins/text-overflow"
@import "mixins/vendor-prefixes"

// Components
@import "mixins/alerts"
@import "mixins/buttons"
@import "mixins/panels"
@import "mixins/pagination"
@import "mixins/list-group"
@import "mixins/nav-divider"
@import "mixins/forms"
@import "mixins/progress-bar"
@import "mixins/table-row"

// Skins
@import "mixins/background-variant"
@import "mixins/border-radius"
@import "mixins/gradients"

// Layout
@import "mixins/clearfix"
@import "mixins/center-block"
@import "mixins/nav-vertical-align"
@import "mixins/grid-framework"
@import "mixins/grid"


.resource-list-item
  content-padding()
  font-size 16px
  border-bottom 1px solid #eee
  height 40px
  line-height 40px
  transition height 0.25s
  overflow hidden
  display flex
  align-items center

  +respond-above($md-screen)
    padding 0

  &.resource-list-item-enter,
  &.resource-list-item-leave.resource-list-item-leave-active
    height 0

  &.resource-list-item-enter.resource-list-item-enter-active,
  &.resource-list-item-leave
    height 40px

  &:first-child
    border-top 1px solid #eee

.resource-list-item-delete
  font-size 15px
  color #b5b5b5
  cursor pointer
  margin-left auto

  &:hover
    color #888

  &:active,
  &:focus
    outline none
    color #555

  +respond-above($md-screen)
    margin-right 0

  &[disabled]
    color #dfdfdf

Update animation for resource items being deleted

.resource-list-item
  content-padding()
  font-size 16px
  border-bottom 1px solid #eee
  height 40px
  line-height 40px
  transition height 0.25s, opacity 0.25s
  overflow hidden
  display flex
  opacity 1
  align-items center

  +respond-above($md-screen)
    padding 0

  &.resource-list-item-enter,
  &.resource-list-item-leave.resource-list-item-leave-active
    height 0

  &.resource-list-item-leave.resource-list-item-leave-active
    opacity 0

  &.resource-list-item-enter.resource-list-item-enter-active,
  &.resource-list-item-leave
    height 40px

  &:first-child
    border-top 1px solid #eee

.resource-list-item-delete
  font-size 15px
  color #b5b5b5
  cursor pointer
  margin-left auto

  &:hover
    color #888

  &:active,
  &:focus
    outline none
    color #555

  +respond-above($md-screen)
    margin-right 0

  &[disabled]
    color #dfdfdf


// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes#classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease

Remove hash from bespoke-classes link

// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease


@require '../components/buyers_premium'
@require '../components/view_in_room'

.modalize-body
  padding 30px

Fix CSS in client side routing app context

@require '../components/buyers_premium'
@require '../components/view_in_room'
@require '../components/inquiry_questionnaire/stylesheets'

.modalize-body
  padding 30px


.project-card-list
  @extends $owned-card-list

.project-card
  @extends $owned-card

.project-card
  border-radius: 1em
  height: 270px
  position: relative
  text-align: center

  svg
    height: 215px

  .details
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 60px
    justify-content: space-between
    transition: height 0.5s ease

    .name
      text-transform: uppercase
      letter-spacing: 1px
      font-weight: 700
      font-size: 11px
      color: COPY

      span
        display: inline-block
        line-height: normal
        vertical-align: middle

    .description
      color: COPY
      font-size: 0.9em
      height: 150px
      margin: 0.8em 0
      overflow: hidden
      text-align: center

  .card-button
    display: none

  :hover > &,
  :focus > &
    .details
      height: 175px

Remove border radius from Project Cards.

.project-card-list
  @extends $owned-card-list

.project-card
  @extends $owned-card

.project-card
  background-color: white
  height: 270px
  position: relative
  text-align: center

  svg
    height: 215px

  .details
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 60px
    justify-content: space-between
    transition: height 0.5s ease

    .name
      text-transform: uppercase
      letter-spacing: 1px
      font-weight: 700
      font-size: 11px
      color: COPY

      span
        display: inline-block
        line-height: normal
        vertical-align: middle

    .description
      color: COPY
      font-size: 0.9em
      height: 150px
      margin: 0.8em 0
      overflow: hidden
      text-align: center

  .card-button
    display: none

  :hover > &,
  :focus > &
    .details
      height: 175px


.box-horizontal {
	box-horizontal();
}

.box-vertical {
	box-vertical();
}

.box-center {
	box-center();
}

.box-center-main {
	box-center-main();
}

.box-center-cross {
	box-center-cross();
}

.flex-none {
	flex: none !important;
}

// Bug in stylus "cannot coerce !important to unit" when using !important on numbers
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-4 {
	flex: 4;
}
.flex-5 {
	flex: 5;
}
.flex-6 {
	flex: 6;
}
.flex-7 {
	flex: 7;
}
.flex-8 {
	flex: 8;
}
.flex-9 {
	flex: 9;
}
.flex-10 {
	flex: 10;
}

Fix .flex-none for iOS 6.1~

.box-horizontal {
	box-horizontal();
}

.box-vertical {
	box-vertical();
}

.box-center {
	box-center();
}

.box-center-main {
	box-center-main();
}

.box-center-cross {
	box-center-cross();
}

.flex-none {
	flex: none !important;
	box-flex: 0 !important;
}

// Bug in stylus "cannot coerce !important to unit" when using !important on numbers
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-4 {
	flex: 4;
}
.flex-5 {
	flex: 5;
}
.flex-6 {
	flex: 6;
}
.flex-7 {
	flex: 7;
}
.flex-8 {
	flex: 8;
}
.flex-9 {
	flex: 9;
}
.flex-10 {
	flex: 10;
}


// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Helper classes

// Element is hidden.
.is-hidden
	display: none

/// Element is in transit between hidden (.is-hidden) and visible.
.is-transit
	display: block

// Disabled form element.
.is-disabled
	cursor: default
	pointer-events: none
	opacity: .4
	text-shadow: none

// Image replacement.
.ir
	background-color: transparent
	border: 0
	overflow: hidden
	&:before
		content: ""
		display: block
		width: 0
		height: 150%

// Clearfix.
.group
	clearfix()

Fix .l-center appearing and disappearing.

// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Helper classes

// Element is hidden.
.is-hidden
	display: none

/// Element is in transit between hidden (.is-hidden) and visible.
.is-transit
	display: block
	&.l-center
		display: table

// Disabled form element.
.is-disabled
	cursor: default
	pointer-events: none
	opacity: .4
	text-shadow: none

// Image replacement.
.ir
	background-color: transparent
	border: 0
	overflow: hidden
	&:before
		content: ""
		display: block
		width: 0
		height: 150%

// Clearfix.
.group
	clearfix()


.widget-content {
    position: relative;
    padding: 10px;

    &.hidden {
        display: none;
    }

    .dro-display {
        border: 1px solid #ccc;
        text-align: right;
        padding: 5px 10px;
        font-size: 18px;
        font-weight: bold;
        margin-right: 5px;
    }
    .dro-btn-group {
        margin-left: 5px;
    }
}

Set default height to 32px

.widget-content {
    position: relative;
    padding: 10px;

    &.hidden {
        display: none;
    }

    .dro-display {
        border: 1px solid #ccc;
        text-align: right;
        padding: 5px 10px;
        height: 32px;
        font-size: 18px;
        font-weight: bold;
        margin-right: 5px;
    }
    .dro-btn-group {
        margin-left: 5px;
    }
}


mobile_breakpoint = 1024px

.HomeHowItWorks.HomeSection__content
  padding 0 0 4em

.HomeHowItWorks
  border-top 1px solid colors-gray-border
  border-bottom @border-top

  &__carousel
    height 600px
    width 100%

+below(mobile_breakpoint)
  .HomeHowItWorks
    &__carousel
      height 400px

Update how it works padding

mobile_breakpoint = 1024px

.HomeHowItWorks.HomeSection__content
  padding 2em 0 3em

.HomeHowItWorks
  border-top 1px solid colors-gray-border
  border-bottom @border-top

  &__carousel
    height 600px
    width 100%

+below(mobile_breakpoint)
  .HomeHowItWorks
    &__carousel
      height 400px


.posts
  ul
    display table
    width 100%

  li
    display table-row
    left 0

    @media not all and (max-width bp-small)
      &:not(:last-child)
        a, small
          border-bottom 1px solid invisiblegrey

  a, small
    display table-cell

  small
    color midgrey
    text-align right

    @media all and (max-width bp-small)
      display none

Use flex for posts list

.posts
  li
    display flex

    // Unset general `li` styling.
    left 0
    padding-right 0

    justify-content space-between

    @media all and (max-width bp-small)
      margin-bottom .5em
      flex-direction column-reverse

  li:not(:last-child)
    border-bottom 1px solid invisiblegrey

  small
    color midgrey

    @media not all and (max-width bp-small)
      text-align right


mobile_breakpoint = 1024px

.HomeQuotes
  margin-bottom 1em

  &__cta&__cta
    margin-top 1em

  &__quote
    display flex
    flex-direction row
    width 100%
    margin 3em 0
    &:hover
      color colors-gray-text

  &__icon
    width 100px
    margin-right 1em
    text-align center

    > img
      width 70%

  &__copy
    font-family 'Courier New', Courier, monospace
    font-weight bold
    font-size font-size-base
    line-height line-height-tall
    max-width 475px
    > span
      background-color colors-state-highlighted

+below(mobile_breakpoint)
  .HomeQuotes
    &__quote
      padding 0 2em
    &__copy
      font-size font-size-base

Add hover state to quote copy

mobile_breakpoint = 1024px

.HomeQuotes
  margin-bottom 1em

  &__cta&__cta
    margin-top 1em

  &__quote
    display flex
    flex-direction row
    width 100%
    margin 3em 0
    &:hover .HomeQuotes__copy
      color colors-gray-text
      opacity 0.8

  &__icon
    width 100px
    margin-right 1em
    text-align center

    > img
      width 70%

  &__copy
    font-family 'Courier New', Courier, monospace
    font-weight bold
    font-size font-size-base
    line-height line-height-tall
    max-width 475px
    > span
      background-color colors-state-highlighted

+below(mobile_breakpoint)
  .HomeQuotes
    &__quote
      padding 0 2em
    &__copy
      font-size font-size-base


html, body, #game
  width: 100%
  height: 100%
  overflow: hidden

#game
  background: #111

#interface
  position: fixed
  top: 0
  width: 100%
  height: 100%

  .toggle-states
    position: absolute
    top: 0
    width: 100%
    height: 100px

    text-align: right
    padding: 10px

  .reticle
    position: absolute
    width: 30px
    height: @width

    left: 50%
    top: 50%
    -webkit-transform: translate3d(-50%, -50%, 0)
    transform: translate3d(-50%, -50%, 0)

    border: 2px solid #ddd
    border-radius: 999px

    opacity: 0
    -webkit-transition: opacity .3s ease
    transition: opacity .3s ease

    &.active
      opacity: 1

Add nib for css autoprefixing.

@import 'nib'

html, body, #game
  width: 100%
  height: 100%
  overflow: hidden

#game
  background: #111

#interface
  position: fixed
  top: 0
  width: 100%
  height: 100%

  .toggle-states
    position: absolute
    top: 0
    width: 100%
    height: 100px

    text-align: right
    padding: 10px

  .reticle
    position: absolute
    width: 30px
    height: @width

    left: 50%
    top: 50%
    transform: translate3d(-50%, -50%, 0)

    border: 2px solid #ddd
    border-radius: 999px

    opacity: 0
    transition: opacity .3s ease

    &.active
      opacity: 1


.search-container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-evenly
	.input-container
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		width: fit-content
		.btn
			text-align: center

	@media (max-width: 400px)
		.input-container
			margin: 15px 0
		.button-container
			margin: 12px 0

Fix size of input for mobile

.search-container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-evenly
	.input-container
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		width: fit-content
		.btn
			text-align: center

	@media (max-width: 400px)
		.input-container
			margin: 20px 0
			input[type=text]
				max-width: 250px
		.button-container
			    margin-bottom: 20px


.tabbed-panel
  enable-flex(justify:flex-start, alignContent:stretch, alignItems:stretch)
  width 636px
  border-radius 5px
  .workspace-tabs
    width 30%
    width dialog-tab-width
    padding 20px 0
    margin 0px
    background-color: white
    ul
      margin 0
      margin-right -1px
      list-style none
      padding-left 10px
      max-height 300px
      overflow-x hidden
      overflow-y auto
      li
        blenderbox-modal-labels()
        font-size 15px
        -webkit-border-radius tab-border-radius
        -moz-border-radius tab-border-radius
        border-radius: tab-border-radius
        margin 10px 16px 10px 6px
        padding 10px
        color #000
        background-color #c8e7de
        cursor pointer
        &.tab-selected
          color #fff
          background-color #72bca6
        &.tab-link-defined
          -webkit-border-top-right-radius 0
          -webkit-border-bottom-right-radius 0
          -moz-border-radius-topright 0
          -moz-border-radius-bottomright 0
          border-top-right-radius 0
          border-bottom-right-radius 0
          margin-right 0
        &.tab-divider
          background-color #72bca6
          padding 1px
          cursor default

  .workspace-tab-component
    margin 0px
    width 70%
    border-left 5px solid #72bca6
    padding 10px
    padding-bottom 20px

Make left tab panel as tall as model panel

.tabbed-panel
  enable-flex(justify:flex-start, alignContent:stretch, alignItems:stretch)
  width 636px
  border-radius 5px
  .workspace-tabs
    width 30%
    width dialog-tab-width
    padding 20px 0
    margin 0px
    background-color: white
    ul
      margin 0
      margin-right -1px
      list-style none
      padding-left 10px
      overflow-x hidden
      overflow-y auto
      li
        blenderbox-modal-labels()
        font-size 15px
        -webkit-border-radius tab-border-radius
        -moz-border-radius tab-border-radius
        border-radius: tab-border-radius
        margin 10px 16px 10px 6px
        padding 10px
        color #000
        background-color #c8e7de
        cursor pointer
        &.tab-selected
          color #fff
          background-color #72bca6
        &.tab-link-defined
          -webkit-border-top-right-radius 0
          -webkit-border-bottom-right-radius 0
          -moz-border-radius-topright 0
          -moz-border-radius-bottomright 0
          border-top-right-radius 0
          border-bottom-right-radius 0
          margin-right 0
        &.tab-divider
          background-color #72bca6
          padding 1px
          cursor default

  .workspace-tab-component
    margin 0px
    width 70%
    border-left 5px solid #72bca6
    padding 10px
    padding-bottom 20px


*, *:before, *:after
  box-sizing border-box

body
  font-family Arial, Helvetica, sans-serif
  color #333
  background-color #fff
  margin 0
  padding 0

header
  color #fff
  background #0066bb url(../images/reactjs.png) no-repeat right 10px
  background-size contain
  h1
    display inline-block
    padding 0 20px
  a
    display inline-block
    margin 10px
    padding 10px
    color #fff
    text-decoration none
    border-radius 3px
    &.active,
    &:hover
      background-color #0085F3

section
 padding 20px

Fix indentation on section in default stylesheet


.devlog-post

	// This is hardcoded.
	// If any spacing is changed, this may be invalid.
	$devlog-post-game-thumb-width = 120px

	&-game
		position: absolute
		right: 10px
		top: 10px
		width: $devlog-post-game-thumb-width
		border: 2px solid $gray-light

		&:hover
			border-color: $white

	.devlog-post-header-content
		padding-right: $devlog-post-game-thumb-width + 20px

Fix mobile devlog post titles being too small

.devlog-post

	// This is hardcoded.
	// If any spacing is changed, this may be invalid.
	$devlog-post-game-thumb-width = 120px

	&-game
		display: none
		position: absolute
		right: 10px
		top: 10px
		width: $devlog-post-game-thumb-width
		border: 2px solid $gray-light

		@media $media-sm-up
			display: block

		&:hover
			border-color: $white

	@media $screen-sm-up
		.devlog-post-header-content
			padding-right: $devlog-post-game-thumb-width + 20px


.devlog-post

	&-game
		position: absolute
		right: 10px
		top: 10px
		border: 2px solid $gray-light

		// This is hardcoded.
		// If any spacing is changed, this may be invalid. =\
		width: 120px

		&:hover
			border-color: $white

	.devlog-post-header-content
		padding-right: 120px + 20px

Fix for real. Amazingly the smiley was breaking stylus in the comment... =\

.devlog-post

	// This is hardcoded.
	// If any spacing is changed, this may be invalid.
	$devlog-post-game-thumb-width = 120px

	&-game
		position: absolute
		right: 10px
		top: 10px
		width: $devlog-post-game-thumb-width
		border: 2px solid $gray-light

		&:hover
			border-color: $white

	.devlog-post-header-content
		padding-right: $devlog-post-game-thumb-width + 20px


.svg-center-x {
	position: relative;
  	display: block;
	margin-left: auto;
	margin-right: auto;
  	padding-left: 50%;
}

.svg-padding-top {
	padding-top: 1em;
}
.svg-padding-left {
	padding-left: 1em;
}

pattern rect.background {
    fill: none;
}
pattern rect.foreground {
    fill: grey;
}

.reusable {
    path {
        fill: none;
        stroke: black;
        stroke-width: 1.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    path.bgstroke {
        stroke: white;
        stroke-width: 3px;
    }
}

@import 'd3-legend.import'

Remove patterns styles these are handled directly.

.svg-center-x {
	position: relative;
  	display: block;
	margin-left: auto;
	margin-right: auto;
  	padding-left: 50%;
}

.svg-padding-top {
	padding-top: 1em;
}
.svg-padding-left {
	padding-left: 1em;
}

.reusable {
    path {
        fill: none;
        stroke: black;
        stroke-width: 1.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    path.bgstroke {
        stroke: white;
        stroke-width: 3px;
    }
}

@import 'd3-legend.import'


/*
session
====================================================================== */

.session {
    padding: $grid-gutter-width;
    margin-bottom: 5px;
    clearfix()

    theme({
        background-color: $theme-background
    })

}

.session_summary {
    display: none;
}

.session:target .session_summary {
    display: block;
}

.session_speakers a {
    display: block;
}

.session_pic {
    display: flex;
    margin-bottom: 10px;

    img {
        width: 100px;
    }
}

@media $media-query-320-and-up {
    .session_pic {
        width: 60px;
        float: right;
        flex-direction: column;
        margin-top: -2.1em;
        margin-left: $grid-gutter-width;
    }
}

@media $media-query-480-and-up {

    .session_speakers a {
        display: inline;

        &::before {
            content: "• ";
        }

        &:first-child::before {
            content: "";
        }
    }

    .session_pic {
        width: auto;
    }
}

@media $media-query-680-and-up {
    .session_pic {
        float: none;
        flex-direction: row;
        margin: 0;

        img {
            width: auto;
        }
    }
}

@media $media-query-960-and-up {
    .session {
        padding: $grid-gutter-width;
    }
}

Fix bug on schedule page.

/*
session
====================================================================== */

.session {
    padding: $grid-gutter-width;
    margin-bottom: 5px;
    clearfix()

    theme({
        background-color: $theme-background
    })

}

.session_summary {
    display: none;
}

.session:target .session_summary {
    display: block;
}

.session_speakers a {
    display: block;
}

.session_pic {
    display: flex;
    margin-bottom: 10px;

    img {
        width: 100px;
    }
}

@media $media-query-320-and-up {
    .session_pic {
        width: 60px;
        float: right;
        flex-direction: column;
        margin-top: -2.1em;
        margin-left: $grid-gutter-width;
    }
}

@media $media-query-480-and-up {

    .session_speakers a {
        display: inline;

        &::before {
            content: "• ";
        }

        &:first-child::before {
            content: "";
        }
    }

    .session_pic {
        width: 100%;
    }
}

@media $media-query-680-and-up {
    .session_pic {
        float: none;
        flex-direction: row;
        margin: 0;

        img {
            width: auto;
        }
    }
}

@media $media-query-960-and-up {
    .session {
        padding: $grid-gutter-width;
    }
}


@import '../../layouts/variables.styl'
@import '../../layouts/mixins.styl'

main
  ol
    li
      pad-inline $default-padding
      pad-block 0.5em
      &:hover
        background-color: $secondary-grey
      table
        width: 50%
        tr
          &:hover
            background-color: $tertiary-grey
          td
            font-size: 80%
            line-height: 1.5em
            pad-block 0.25em
            &:first-child
              pad-inline-st 1em
            &:not(:first-child)
              color: $primary-red
              font-weight: 700
main
  > ol
    > li
      &:first-child
        pad-block-st $default-padding
      &:last-child
        pad-block-end $default-padding

Add some spacing between table cells to avoid problems in small viewports.

@import '../../layouts/variables.styl'
@import '../../layouts/mixins.styl'

main
  ol
    li
      pad-inline $default-padding
      pad-block 0.5em
      &:hover
        background-color: $secondary-grey
      table
        width: 50%
        tr
          &:hover
            background-color: $tertiary-grey
          td
            font-size: 80%
            line-height: 1.5em
            pad-block 0.25em
            pad-inline 1em
            &:first-child
              white-space: nowrap
            &:not(:first-child)
              color: $primary-red
              font-weight: 700
main
  > ol
    > li
      &:first-child
        pad-block-st $default-padding
      &:last-child
        pad-block-end $default-padding


.container {
  position: relative;
  width: 60%;
  height: 1100px;
}

.livePreviewWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;

  iframe {
    width: 100%;
    height: 100%;
  }
}

Make preview area's height dynamic

.container {
  position: relative;
  width: 60%;
}

.livePreviewWrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;

  iframe {
    width: 100%;
    height: 100%;
  }
}


mobile_breakpoint = 1024px

.HomeQuotes
  margin-bottom 6em

  &__cta
    margin-bottom 2em

  &__quote
    display flex
    flex-direction row
    width 100%
    margin 3em 0

  &__icon
    width 120px
    margin-right 1em
    text-align center

    > img
      width 50%

  &__copy
    font-family 'Courier New', Courier, monospace
    font-weight bold
    font-size font-size-sm
    line-height line-height-tall
    max-width 475px
    > span
      background-color colors-state-highlighted

+below(mobile_breakpoint)
  .HomeQuotes
    &__quote
      padding 0 2em

Increase quote size on mobile

mobile_breakpoint = 1024px

.HomeQuotes
  margin-bottom 6em

  &__cta
    margin-bottom 2em

  &__quote
    display flex
    flex-direction row
    width 100%
    margin 3em 0

  &__icon
    width 120px
    margin-right 1em
    text-align center

    > img
      width 50%

  &__copy
    font-family 'Courier New', Courier, monospace
    font-weight bold
    font-size font-size-sm
    line-height line-height-tall
    max-width 475px
    > span
      background-color colors-state-highlighted

+below(mobile_breakpoint)
  .HomeQuotes
    &__quote
      padding 0 2em
    &__copy
      font-size font-size-base


header
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        position relative

    nav
        a,
        a:link,
        a:active
            padding 0 8px
            text-transform uppercase
            font-size 14px
            color #ccc !important

        a:hover
            background-color transparent
            text-decoration underline

@media screen and (min-width: 481px)
    header
        li
            $border-width = 14px
            padding-bottom 12px;

            &.active:after
                top 100%
                left 50%
                border solid rgba(0, 0, 0, 0)
                content " "
                height 0
                width 0
                position absolute
                pointer-events none
                border-color rgba(3, 3, 0, 0)
                border-top-color $node-gray
                border-width $border-width
                margin-left -($border-width/2)px

            &.active:first-child:after
                margin-left -($border-width)px

        a,
        a:link,
        a:active
            padding 0 8px

@media screen and (max-width: 480px)
    header
        li
            width 50%
            float left
            padding 0
            margin 0
        a,
        a:link,
        a:active
            padding 0

#logo
    display block
    border none

    &:hover
        background-color transparent
        text-decoration underline

    img
        display block
        margin .5em auto 1em auto
        width 9em
        height auto
        border none

Remove logo dimensions in CSS

header
    background-color $node-gray
    text-align center

    > .container
        overflow visible

    li
        position relative

    nav
        a,
        a:link,
        a:active
            padding 0 8px
            text-transform uppercase
            font-size 14px
            color #ccc !important

        a:hover
            background-color transparent
            text-decoration underline

@media screen and (min-width: 481px)
    header
        li
            $border-width = 14px
            padding-bottom 12px;

            &.active:after
                top 100%
                left 50%
                border solid rgba(0, 0, 0, 0)
                content " "
                height 0
                width 0
                position absolute
                pointer-events none
                border-color rgba(3, 3, 0, 0)
                border-top-color $node-gray
                border-width $border-width
                margin-left -($border-width/2)px

            &.active:first-child:after
                margin-left -($border-width)px

        a,
        a:link,
        a:active
            padding 0 8px

@media screen and (max-width: 480px)
    header
        li
            width 50%
            float left
            padding 0
            margin 0
        a,
        a:link,
        a:active
            padding 0

#logo
    display block
    border none

    &:hover
        background-color transparent
        text-decoration underline

    img
        display block
        margin .5em auto 1em auto
        border none


//
// COLUMN SPAN WIDTH
// =================
// Returns the width of a specified column span
//

$base--col-total ?= 12
$grid--gutter ?= 20px
$base--max-width ?= 1180px

col-span-width($col-span, $col-total = $base--col-total, $col-gutter = $grid--gutter, $max-width = $base--max-width)

  if (unit($col-gutter) != unit($max-width))
    error('Mismatched unit types for provided for col-span-width: ' + $col-gutter + ', ' + $max-width)

  ($max-width + $col-gutter) * $col-span / $col-total - $col-gutter

Allow `0` as a valid gutter width

//
// COLUMN SPAN WIDTH
// =================
// Returns the width of a specified column span
//

$base--col-total ?= 12
$grid--gutter ?= 20px
$base--max-width ?= 1180px

col-span-width($col-span, $col-total = $base--col-total, $col-gutter = $grid--gutter, $max-width = $base--max-width)

  // Check gutter and max-width units match, but allow $col-gutter to be `0`
  if (unit($col-gutter) != '' && unit($col-gutter) != unit($max-width))
    error('Mismatched unit types for provided for col-span-width: ' + $col-gutter + ', ' + $max-width)

  ($max-width + $col-gutter) * $col-span / $col-total - $col-gutter