add extjs 6.0.1 sources

[extjs.git] / extjs / examples / modern / touchtomatoes / sass / src / view / MoviesListView.scss

.x-toolbar {\r
  background-color: #f7f7f7;\r
\r
  .x-dock .x-button .x-button-icon {\r
    @include st-box-flex(0);\r
    height: 1.7em;\r
  }\r
\r
  .x-button .x-button-icon:before {\r
    line-height: 1.5em;\r
  }\r
  .x-title{\r
    text-align: center;\r
    font-weight: 300;\r
    color: #222;\r
  }\r
\r
\r
  .x-field-textarea,\r
  .x-field-text,\r
  .x-field-number,\r
  .x-field-search {\r
    .x-component-outer {\r
      @include box-shadow($toolbar-input-border-color 0 .1em 0 inset, $toolbar-input-border-color 0 -.1em 0 inset, $toolbar-input-border-color .1em 0 0 inset, $toolbar-input-border-color -.1em 0 0 inset, rgba(#000, .25) 0 .15em .4em inset);\r
    }\r
  }\r
}\r
\r
.moviesearch .x-form {\r
  min-width: 50%;\r
  .x-field-search {\r
    width:100%;\r
\r
    input {\r
      padding-left: 15px\r
    }\r
  }\r
}\r
\r
.movie .img {\r
  background-size: contain;\r
  background-repeat: no-repeat;\r
}\r
\r
.grid .x-list-item {\r
  display: inline-block;\r
  width: 50%;\r
  border: none !important;\r
  @include perspective(300px);\r
\r
  body.x-ios &.x-item-pressed {\r
    .movie {\r
      @include transform(translateZ(20px));\r
    }\r
  }\r
\r
  @include query-small {\r
    width: 50%;\r
  }\r
\r
  @include query-small-landscape {\r
    width: 33%;\r
  }\r
\r
  @include query-medium {\r
    width:33%;\r
  }\r
\r
  @include query-large {\r
    width: 25%\r
  }\r
\r
  .movie {\r
    @include st-box;\r
    @include st-box-orient(vertical);\r
    @include st-box-align(center);\r
    @include transition-duration(.3s);\r
\r
    $width: (320/2) - ($list-item-padding *2);\r
    $height: $width * (266/180);\r
\r
    .title {\r
      white-space: nowrap;\r
      width: $width;\r
      overflow: hidden;\r
      text-overflow: ellipsis;\r
      font-size: .75em;\r
      text-align: center;\r
      padding-bottom: 5px;\r
    }\r
\r
\r
    .img {;\r
      background-color: black;\r
      width: $width;\r
      height: $height;\r
      background-position: 50%;\r
      background-size: cover;\r
      @include box-shadow(10px 10px 38px -8px black);\r
    }\r
    .ratings {\r
      width: $width;\r
      @include st-box;\r
      @include st-box-orient(horizontal);\r
      //@include box-shadow(0px 7px 33px -13px black);\r
      .critics {\r
        border-left: 1px solid lightgray;\r
        text-align: right;\r
      }\r
      .user:not(.unknown) {\r
        //@include inline-icon("user");\r
      }\r
\r
      .critics:not(.unknown) {\r
        //@include inline-icon("pencil");\r
      }\r
      .user, .critics {\r
        position: relative;\r
        &:not(.unknown):before {\r
          text-align: left;\r
          font-size: 0.75em;\r
          line-height: 2.8em;\r
          margin-right: .5em;\r
          color: rgba(0,0,0,.2);\r
        }\r
        @include st-box;\r
        @include st-box-pack(center);\r
        @include st-box-align(center);\r
        padding: 5px;\r
        background-color: rgb(211, 77, 77);\r
        width: 50%;\r
      }\r
      .user.success, .critics.success {\r
        background-color: rgb(94, 177, 94);\r
      }\r
\r
      .user.unknown, .critics.unknown{\r
        background-color: #ddd;\r
      }\r
    }\r
  }\r
}