VideoPage.jade

//- .b-video-upload
//- общее ощущение: с синтаксисом и структурированием разобрался, но ведь
//- есть еще и идеология повторного использования
//- Самая важная идея БЭМ - то что верстка это такое же программирование и здесь должны соблюдаться те же 
//- принципы. Уж повторное использование наработок точно.
//- блок .video_page
.video_page 
  //- по идее это тоже може быть блоком так как это необязательная част страницы
 .video_page--promo
   .video_page--promo-img(data-js-promo-img)
   a.video_page--promo-link(data-js-promo-link).
     участвуй в конкурсе
  //-  блок .b-page
 .video_page--content.b-page.__reset_defaults.b-content(data-js-r-content)
    //- блок b-video-upload
   .b-video-upload.view-mixin
     .b-video-upload--main-bg
     .b-video-upload--top-bg
       button.b-video-upload--back-btn(data-js-back-btn)
         span Назад в галерею
       .b-video-upload--title Загрузка видео
     
      //-  наверно было бы разумно выделить форму в отдельный блок и облегчить повторное использование
     .b-video-upload--form-wrap
       p.b-video-upload--descr.
         Загрузить видео и получить звёзды на нашем сайте очень просто! Просто сними классное видео про бластеры NERF размести его на youtube или Вконтакте, ссылку на него скопируй в поле на этой странице ниже!
     
        //-  блок для b-video-upload--form что-то типа .form.__role_upload
       .b-video-upload--form.b-upload-form
         .b-upload-form--row.__name(data-js-input-row)
            //-  чем больше есть низкоуровневых блокок, тем легче жить в последствии
            //- для label и input можно иметь по блоку
           .b-upload-form--title Название:
           input.b-upload-form--input(type='text' name='title')
     
         .b-upload-form--row.__video(data-js-input-row)
           .b-upload-form--title Ссылка на видео:
           //- input(type='hidden' name='videoid')
           input.b-upload-form--input(type='text' placeholder='Youtube, Vk' name='videourl')
           .b-upload-form--error(data-js-error='video') Неверная ссылка
     
         button.b-upload-form--upload-btn.b-upload-btn(data-js-upload-btn)
           span.b-upload-btn--title Загрузить видео
            //-  блок для кнопки
           span.b-upload-btn--loader
     
     .b-video-upload--success-wrap
       table: tr: td
         .b-video-upload--success-title.
           Видео отправлено на модерацию
         p.b-video-upload--success-text.
           После прохождения модерации вы увидите его в списке видеороликов
         .b-video-upload--success-btns
           a.b-upload-btn.b-video-upload--success-btn.__my-videos-btn(data-js-my-video-btn) мои видео
           a.b-upload-btn.b-video-upload--success-btn.__go-to-gallery-btn(href='video/all') перейти в галерею

VideoPage.sass

.video_page
  
  &.b-page.__reset_defaults
    width: 930px
    margin: 0 auto 85px auto
    background-color: transparent

  &:after
    content: ''
    display: block
    background: url(/images/video_gallery/bottom-bg.png) 0 0 no-repeat
    background-size: contain
    width: 99%
    height: 30px
    position: relative
    margin-left: 10px

  // promo
  &--promo
    position: relative
    width: 755px
    margin: 0 auto
  &--promo-img
    position: relative
    width: 755px
    height: 362px
    margin: 0 0 0 22px
    background:
      repeat: no-repeat
      size: contain
      position: center
      color: transparent
      image: url(/images/video_gallery/video-promo.png)
  &--promo-link
    display: block
    position: absolute
    font: 17px $f-bender
    color: #fff
    text-transform: uppercase
    background-color: #5f7db8
    text-shadow: -2px -1px 0 #3c5991
    box-shadow: 1px 1px 0 #3c5991
    padding: 15px 20px 10px 15px
    top: 222px
    left: 74px
    letter-spacing: 1.4px
    cursor: pointer
    &:after
      content: ''
      display: inline-block
      vertical-align: middle
      width: 31px
      height: 11px
      background: url(/images/video_gallery/arrow.png) 0 0 no-repeat
      background-size: contain
      margin: -5px 0 0 11px

  // content
  &--content
    position: relative
    &.b-page.__reset_defaults
      box-sizing: border-box
      border: none
      padding: 0
      background-color: transparent
      margin: -80px 0 0 10px
      width: 920px

VideoUploadWidget.sass

.b-video-upload
  $c-orange: #ff6a19
  min-height: 790px
  &.__success
    .b-video-upload--success-wrap
      display: block
    .b-video-upload--form-wrap
      display: none

  &--main-bg
    background-color: #000
    opacity: 0.6
    position: absolute
    top: 40px
    bottom: 0
    width: 100%
  &--top-bg
    content: ''
    display: block
    background: url(/images/video_gallery/upload-top-bg.png) 0 0 no-repeat
    background-size: contain
    width: 1882/2 + px
    height: 252/2 + px
    position: relative
    overflow: hidden
    margin-left: -18px

  &--back-btn
    position: relative
    width: 167px
    height: 33px
    border: 1px solid #fcbd32
    background: none
    outline: none
    float: left
    margin: 57px 0 0 56px
    padding: 0
    font-size: 0
    text-align: left
    cursor: pointer
    box-shadow: inset 2px 2px 7px -5px #000
    span
      position: relative
      color: #fff
      text-transform: uppercase
      text-shadow: 1px 1px 2px #c06e08
      font: 13px $f-bender
      z-index: 1
      margin: 0 0 0 10px
      letter-spacing: 0.5px
    &:before
      content: ''
      position: relative
      background: url(/images/video_gallery/arrow-back.png) 0 0 no-repeat
      background-size: contain
      display: inline-block
      width: 13px
      height: 10px
      margin: 3px 0 0 12px
      z-index: 1
    &:after
      content: ''
      position: absolute
      background-color: #212334
      opacity: 0.2
      width: 100%
      height: 100%
      top: 0
      left: 0

  &--title
    font: 25px $f-bender-black
    color: #fff
    text-transform: uppercase
    text-shadow: 1px 1px 2px #c06e08
    margin: 64px 38px 0 0
    letter-spacing: 0.5px
    float: right

  &--descr
    font: 14px/15px $f-bender-bold
    text-align: center
    position: relative
    color: #fff
    width: 47%
    margin: 41px auto 0 auto
    letter-spacing: 0.3px
    padding-left: 6px

  // FORM
  &--form
    width: 400px
    position: relative
    margin: 53px auto 0 auto
    padding-bottom: 72px
  .b-upload-form
    &--row
      text-align: center
      margin-bottom: 38px
      position: relative
      &.__error
        .b-upload-form--input
          border:
            color: #d92e00
            width: 2px
        .b-upload-form--error
          display: block
      &.__video
        margin-bottom: 41px
      &.__comment
        textarea
          resize: none
          width: 100%
          height: 135px
          box-sizing: border-box
          padding: 10px
    &--title
      font: 13px $f-bender
      color: $c-orange
      text-transform: uppercase
      margin-bottom: 7px
    &--input
      outline: none
      border: 1px solid $c-orange
      width: 100%
      height: 35px
      font: 14px $f-bender-bold
      color: #fff
      background: url(/images/video_gallery/input-bg.png) 0 0 repeat
      text-align: center
      border-radius: 4px
      text-align: center
      box-sizing: border-box
      box-shadow: inset 2px 1px 6px -3px #000
      transition: border 0.3s ease
      +placeholder
        color: #924628
    &--error
      position: absolute
      width: 110px
      top: 32px
      right: -124px
      font: 13px $f-bender
      color: #d92e00
      display: none
    &--upload-btn
      padding: 12px 14px 8px 14px
      margin: 70px auto 0 auto
  .b-upload-btn
    color: #fff
    font: 14px $f-bender-bold
    text-align: center
    text-transform: uppercase
    background-color: #fa5a14
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.34)
    border: none
    border-radius: 4px
    display: block
    outline: none
    cursor: pointer
    &--title
      display: inline-block
    &--loader
      display: none
      position: relative
      width: 18px
      height: 18px
      border: 2px solid #fff
      border-radius: 18px
      display: none
      margin: 0 auto
      animation: upload-rotation 1s linear infinite
      &:after
        content: ''
        display: block
        width: 9px
        height: 9px
        background: #FA5A14 
        position: absolute
        right: -1px
        top: -3px
    &.__loading
      width: 43px
      padding-left: 0
      padding-right: 0
      cursor: default
      .b-upload-btn--title
        display: none
      .b-upload-btn--loader
        display: inline-block

  // SUCCESS BLOCK
  &--success-wrap
    display: none
    position: absolute
    width: 100%
    height: 100%
    top: 0
    bottom: 0
    left: 17px
    table
      width: 100%
      height: 100%
      text-align: center
      font-family: $f-bender-bold 
    td
      height: 100%
      vertical-align: top
  &--success-title
    font-size: 25px
    color: #ff6a19
    text-transform: uppercase
    margin-top: 425px
    padding-left: 7px
    letter-spacing: 0.6px
  &--success-text
    font-size: 14px
    color: white
    width: 365px
    margin: 10px auto 0 auto
    letter-spacing: 0.3px
    padding-left: 11px
 
  &--success-btns
    width: 285px
    margin: 53px auto
    text-align: left
  &--success-btn.b-upload-btn
    display: inline-block
    border: 1px solid #ff6a19
    border-radius: 2px
    text-decoration: none
  .b-upload-btn.__my-videos-btn
    padding: 12px 14px 8px 14px
    margin-left: 8px
  .b-upload-btn.__go-to-gallery-btn
    padding: 12px 11px 8px 11px
    background: none
    margin-left: 6px


@keyframes upload-rotation
  0
    transform: rotate(0)
  100%
    transform: rotate(360deg)