core/src/themes/test/steps/index.html - main - githubmirror/ionic

core/src/themes/test/steps/index.html
225 строк6 KB
Liam DeBeasi
lint(eslint): migrate to eslint and prettier (#25046)
04 апр 2022, 18:12
04 апр 2022, 18:125676bab
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Themes - Steps</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />

    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <style>
      .block {
        display: inline-block;
        height: 60px;
        width: 150px;
      }

      .background-step-50 {
        background: var(--ion-color-step-50, #f2f2f2);
      }

      .background-step-100 {
        background: var(--ion-color-step-100, #e6e6e6);
      }

      .background-step-150 {
        background: var(--ion-color-step-150, #d9d9d9);
      }

      .background-step-200 {
        background: var(--ion-color-step-200, #cccccc);
      }

      .background-step-250 {
        background: var(--ion-color-step-250, #bfbfbf);
      }

      .background-step-300 {
        background: var(--ion-color-step-300, #b3b3b3);
      }

      .background-step-350 {
        background: var(--ion-color-step-350, #a6a6a6);
      }

      .background-step-400 {
        background: var(--ion-color-step-400, #999999);
      }

      .background-step-450 {
        background: var(--ion-color-step-450, #8c8c8c);
      }

      .background-step-500 {
        background: var(--ion-color-step-500, gray);
      }

      .background-step-550 {
        background: var(--ion-color-step-550, #737373);
      }

      .background-step-600 {
        background: var(--ion-color-step-600, #666666);
      }

      .background-step-650 {
        background: var(--ion-color-step-650, #595959);
      }

      .background-step-700 {
        background: var(--ion-color-step-700, #4d4d4d);
      }

      .background-step-750 {
        background: var(--ion-color-step-750, #404040);
      }

      .background-step-800 {
        background: var(--ion-color-step-800, #333333);
      }

      .background-step-850 {
        background: var(--ion-color-step-850, #262626);
      }

      .background-step-900 {
        background: var(--ion-color-step-900, #1a1a1a);
      }

      .background-step-950 {
        background: var(--ion-color-step-950, #0d0d0d);
      }

      .text-step-50 {
        color: var(--ion-color-step-950, #0d0d0d);
      }

      .text-step-100 {
        color: var(--ion-color-step-900, #1a1a1a);
      }

      .text-step-150 {
        color: var(--ion-color-step-850, #262626);
      }

      .text-step-200 {
        color: var(--ion-color-step-800, #333333);
      }

      .text-step-250 {
        color: var(--ion-color-step-750, #404040);
      }

      .text-step-300 {
        color: var(--ion-color-step-700, #4d4d4d);
      }

      .text-step-350 {
        color: var(--ion-color-step-650, #595959);
      }

      .text-step-400 {
        color: var(--ion-color-step-600, #666666);
      }

      .text-step-450 {
        color: var(--ion-color-step-550, #737373);
      }

      .text-step-500 {
        color: var(--ion-color-step-500, gray);
      }

      .text-step-550 {
        color: var(--ion-color-step-450, #8c8c8c);
      }

      .text-step-600 {
        color: var(--ion-color-step-400, #999999);
      }

      .text-step-650 {
        color: var(--ion-color-step-350, #a6a6a6);
      }

      .text-step-700 {
        color: var(--ion-color-step-300, #b3b3b3);
      }

      .text-step-750 {
        color: var(--ion-color-step-250, #bfbfbf);
      }

      .text-step-800 {
        color: var(--ion-color-step-200, #cccccc);
      }

      .text-step-850 {
        color: var(--ion-color-step-150, #d9d9d9);
      }

      .text-step-900 {
        color: var(--ion-color-step-100, #e6e6e6);
      }

      .text-step-950 {
        color: var(--ion-color-step-50, #f2f2f2);
      }
    </style>
  </head>

  <body>
    <ion-app>
      <ion-content class="ion-padding">
        <div class="block">Background</div>
        <div class="block background-step-50">Step 50</div>
        <div class="block background-step-100">Step 100</div>
        <div class="block background-step-150">Step 150</div>
        <div class="block background-step-200">Step 200</div>
        <div class="block background-step-250">Step 250</div>
        <div class="block background-step-300">Step 300</div>
        <div class="block background-step-350">Step 350</div>
        <div class="block background-step-400">Step 400</div>
        <div class="block background-step-450">Step 450</div>
        <div class="block background-step-500">Step 500</div>
        <div class="block background-step-550">Step 550</div>
        <div class="block background-step-600">Step 600</div>
        <div class="block background-step-650">Step 650</div>
        <div class="block background-step-700">Step 700</div>
        <div class="block background-step-750">Step 750</div>
        <div class="block background-step-800">Step 800</div>
        <div class="block background-step-850">Step 850</div>
        <div class="block background-step-900">Step 900</div>
        <div class="block background-step-950">Step 950</div>
        <hr />

        <div class="block">Text</div>
        <div class="block text-step-50">Step 50</div>
        <div class="block text-step-100">Step 100</div>
        <div class="block text-step-150">Step 150</div>
        <div class="block text-step-200">Step 200</div>
        <div class="block text-step-250">Step 250</div>
        <div class="block text-step-300">Step 300</div>
        <div class="block text-step-350">Step 350</div>
        <div class="block text-step-400">Step 400</div>
        <div class="block text-step-450">Step 450</div>
        <div class="block text-step-500">Step 500</div>
        <div class="block text-step-550">Step 550</div>
        <div class="block text-step-600">Step 600</div>
        <div class="block text-step-650">Step 650</div>
        <div class="block text-step-700">Step 700</div>
        <div class="block text-step-750">Step 750</div>
        <div class="block text-step-800">Step 800</div>
        <div class="block text-step-850">Step 850</div>
        <div class="block text-step-900">Step 900</div>
        <div class="block text-step-950">Step 950</div>
      </ion-content>
    </ion-app>
  </body>
</html>