sky/examples/flights/index.sky

<app>
  <style>
    * { box-sizing: border-box; }

    t, span {
      display: inline;
    }

    app {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: #494949;
      font-family: sans-serif;
      font-size: 16px;
      color: #2B2B2B;
    }

    app-header {
      display: flex;
      background: linear-gradient(#3E77B7, #6C98C4);
      padding: 8px;
      color: white;
      border-bottom: 1px solid #3E77B7;
    }

    app-title {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-left: 8px;
    }

    app-menu-button {
      display: flex;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
    }

    .menu-icon {
      width: 18px;
    }

    .menu-icon-inner {
      width: 14px;
    }

    app-scrollable {
      flex: 1;
      box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
      overflow: scroll;
    }

    app-panel {
      display: flex;
      flex-direction: column;
      background-color: white;
    }

    app-panel-header {
      background-color: #DEDEDE;
      padding: 8px;
      display: flex;
      align-items: center;
    }

    app-panel-content {
      display: flex;
    }

    app-toolbar {
      background-color: #F6F6F6;
      padding: 0 8px;
    }

    app-search-input {
      background-color: #F6F6F6;
      padding: 4px;
      display: flex;
      align-items: center;
      font-size: 1.2em;
    }

    app-toast {
      position: absolute;
      bottom: 32px;
      right: 32px;
      max-width: 55%;
      box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
      background-color: #b0281a;
      background-image: linear-gradient(#E5D658, #DFCF43);
      border: 1px solid #AEA477;
      padding: 6px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      font-size: 0.8em;
    }

    app-toast-header {
      flex-shrink: 0;
      margin-right: 6px;
    }

    .tip-icon {
      font-weight: bold;
      font-size: 24px;
      border-radius: 16px;
      width: 32px;
      height: 32px;
      border: 2px solid black;
      line-height: 30px;
      text-align: center;
    }

    .tip-price {
      font-weight: bold;
    }

    .input-text {
      margin-left: 8px;
    }

    .route-result {
      margin: 16px 16px 0 16px;
    }

    .route-title {
      flex: 1;
    }

    .airline {
      border-radius: 2px;
      align-items: center;
      padding: 8px;
    }

    .airline-name {
      flex: 1;
    }

    .airline-logo-image {
      width: 50px;
      flex-shrink: 0;
    }

    .airline-best-price {
      color: #ABB4B6;
    }

    .airline-name,
    .airline-best-price {
      padding: 8px;
    }

    a {
      text-decoration: none;
      color: #1155CC;
    }
  </style>
  <app-header>
    <app-title>
      <t>Search</t>
    </app-title>
    <app-menu-button>
      <img src="images/menu-white.png" class="menu-icon">
    </app-menu-button>
  </app-header>
  <app-toolbar>
    <app-search-input>
      <span class="input-icon">
        <img src="/sky/examples/flights/images/magnifying-glass.png" style="width: 16px">
      </span>
      <span class="input-text"><t>flights today to dc by price</t></span>
    </app-search-input>
  </app-toolbar>
  <app-scrollable>
    <app-panel class="route-result">
      <app-panel-header>
        <div class="route-title">
          <t>SFO to DCA</t>
        </div>
        <app-menu-button>
          <img src="images/menu-enabled.png" class="menu-icon-inner">
        </app-menu-button>
      </app-panel-header>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/virgin-america.jpg">
        </div>
        <div class="airline-name">
          <t>Virgin America</t>
        </div>
        <div class="airline-best-price">
          <t><a>$800</a></t>
        </div>
      </app-panel-content>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/ba.jpg">
        </div>
        <div class="airline-name">
          <t>British Airways</t>
        </div>
        <div class="airline-best-price">
          <t><a>$700</a></t>
        </div>
      </app-panel-content>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/united.jpg">
        </div>
        <div class="airline-name">
          <t>United</t>
        </div>
        <div class="airline-best-price">
          <t><a>$667</a></t>
        </div>
      </app-panel-content>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/delta.jpg">
        </div>
        <div class="airline-name">
          <t>Delta</t>
        </div>
        <div class="airline-best-price">
          <t><a>$450</a></t>
        </div>
      </app-panel-content>
    </app-panel>
    <app-panel class="route-result">
      <app-panel-header>
        <div class="route-title">
          <t>SJC to DCA</t>
        </div>
        <app-menu-button>
          <img src="images/menu-enabled.png" class="menu-icon-inner">
        </app-menu-button>
      </app-panel-header>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/virgin-america.jpg">
        </div>
        <div class="airline-name">
          <t>Virgin America</t>
        </div>
        <div class="airline-best-price">
          <t><a>$1500</a></t>
        </div>
      </app-panel-content>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/jetblue.jpg">
        </div>
        <div class="airline-name">
          <t>jetBlue</t>
        </div>
        <div class="airline-best-price">
          <t><a>$650</a></t>
        </div>
      </app-panel-content>
      <app-panel-content class="airline">
        <div class="airline-logo">
          <img class="airline-logo-image" src="images/united.jpg">
        </div>
        <div class="airline-name">
          <t>United</t>
        </div>
        <div class="airline-best-price">
          <t><a>$367</a></t>
        </div>
      </app-panel-content>
    </app-panel>
  </app-scrollable>
  <app-toast>
    <app-toast-header>
      <div class="tip-icon">
        <t>?</t>
      </div>
    </app-toast-header>
    <app-toast-content>
      <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
    </app-toast-content>
  </app-toast>
</app>