oleg
/
Puppertino
镜像来自 https://github.com/codedgar/Puppertino.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Color Palette - Puppertino Framework</title>
    <link
      href="https://rsms.me/inter/inter.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Icons on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-176821843-1');
    </script>
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="color_palette.html" class="p-btn p-btn-scope">Color Palette</a>
    </div>
    <h1>Color Palette</h1>
    <div class="master">
      <p>
        Colors are amazing, but if you don't know what colors to use or need a
        great palette, Puppertino has you covered. We have taken these beautiful
        colors from
        <a
          href="https://elementary.io/es/docs/human-interface-guidelines#color"
          target="_blank"
          >Elementary guidelines</a
        >. You can use the color palette component using the
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/color_palette.css"
          target="_blank"
          >CSS of color palette</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
          target="_blank"
          >downloading the full CSS</a
        >
        (Not recommended if you are just going to use this component).
      </p>

      <div class="talk-about-it">
        <h2>Official Apple Colors</h2>

        <div class="row pad_15_row center_row">
          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-red">
              <h2 class="col-w">Apple Red</h2>
            </div>
            <div class="color_base h-50 p-apple-red-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-orange">
              <h2 class="col-w">Apple Orange</h2>
            </div>
            <div class="color_base h-50 p-apple-orange-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-yellow">
              <h2 class="col-w">Apple Yellow</h2>
            </div>
            <div class="color_base h-50 p-apple-yellow-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-green">
              <h2 class="col-w">Apple Green</h2>
            </div>
            <div class="color_base h-50 p-apple-green-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-mint">
              <h2 class="col-w">Apple Mint</h2>
            </div>
            <div class="color_base h-50 p-apple-mint-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-teal">
              <h2 class="col-w">Apple Teal</h2>
            </div>
            <div class="color_base h-50 p-apple-teal-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-cyan">
              <h2 class="col-w">Apple Cyan</h2>
            </div>
            <div class="color_base h-50 p-apple-cyan-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-blue">
              <h2 class="col-w">Apple Blue</h2>
            </div>
            <div class="color_base h-50 p-apple-blue-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-indigo">
              <h2 class="col-w">Apple Indigo</h2>
            </div>
            <div class="color_base h-50 p-apple-indigo-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-purple">
              <h2 class="col-w">Apple Purple</h2>
            </div>
            <div class="color_base h-50 p-apple-purple-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-pink">
              <h2 class="col-w">Apple Pink</h2>
            </div>
            <div class="color_base h-50 p-apple-pink-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-brown">
              <h2 class="col-w">Apple Brown</h2>
            </div>
            <div class="color_base h-50 p-apple-brown-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-apple-gray">
              <h2 class="col-w">Apple Gray</h2>
            </div>
            <div class="color_base h-50 p-apple-gray-dark">
              <p class="col-w">Dark</p>
            </div>
          </div>
        </div>
      </div>

      <div class="talk-about-it">
        <h2>General colors</h2>
        <p>
          Currently Puppertino consists of
          <strong>12 color palettes</strong> which you can choose from. To use
          them just click on them and the class for the color will be copied to
          your clipboard! Alternatively, find the color you want to use, add
          <code class="code">p-</code>, the color and, the shade you want to
          use, i.e: <code class="code">p-strawberry-100</code> (Base colors
          don't use shade).<br><br>
          There are also <strong>text colors</strong>, just add <code class="code">-color</code> at the end, i.e <code class="code">p-strawberry-100-color</code>
          <br><br>
          <span class="bit_bit p-lime p-white-color">New!</span>
          We've added colors as variables, so you use them wherever and however you like, just add <code class="code">--</code> before the color in <strong>your CSS</strong> code, i.e <code class="code">--p-strawberry-100</code>. This can be use to create amazing gradients and theming.
        </p>

        <div class="row pad_15_row center_row">
          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-strawberry">
              <h2 class="col-w">Strawberry</h2>
            </div>
            <div class="color_base h-50 p-strawberry-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-strawberry-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-strawberry-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-strawberry-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-strawberry-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-orange">
              <h2 class="col-w">Orange</h2>
            </div>
            <div class="color_base h-50 p-orange-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-orange-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-orange-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-orange-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-orange-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-banana">
              <h2 class="col-w">Banana</h2>
            </div>
            <div class="color_base h-50 p-banana-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-banana-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-banana-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-banana-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-banana-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-lime">
              <h2 class="col-w">Lime</h2>
            </div>
            <div class="color_base h-50 p-lime-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-lime-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-lime-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-lime-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-lime-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-mint">
              <h2 class="col-w">Mint</h2>
            </div>
            <div class="color_base h-50 p-mint-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-mint-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-mint-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-mint-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-mint-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-blueberry">
              <h2 class="col-w">Blueberry</h2>
            </div>
            <div class="color_base h-50 p-blueberry-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-blueberry-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-blueberry-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-blueberry-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-blueberry-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-grape">
              <h2 class="col-w">Grape</h2>
            </div>
            <div class="color_base h-50 p-grape-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-grape-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-grape-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-grape-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-grape-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-bubblegum">
              <h2 class="col-w">Bubblegum</h2>
            </div>
            <div class="color_base h-50 p-bubblegum-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-bubblegum-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-bubblegum-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-bubblegum-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-bubblegum-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-cocoa">
              <h2 class="col-w">Cocoa</h2>
            </div>
            <div class="color_base h-50 p-cocoa-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-cocoa-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-cocoa-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-cocoa-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-cocoa-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-silver">
              <h2 class="col-w">Silver</h2>
            </div>
            <div class="color_base h-50 p-silver-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-silver-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-silver-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-silver-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-silver-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-slate">
              <h2 class="col-w">Slate</h2>
            </div>
            <div class="color_base h-50 p-slate-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-slate-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-slate-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-slate-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-slate-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-dark">
              <h2 class="col-w">Dark</h2>
            </div>
            <div class="color_base h-50 p-dark-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-dark-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-dark-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-dark-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-dark-100">
              <p class="col-b">100</p>
            </div>
          </div>
        </div>
      </div>

      <input id="textarea_color" />
    </div>


    <div class="copy_correct">
      <p class="p-caption">Color <span id="color_talk"></span> copied!</p>
    </div>
 
</body>

  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
  <script type="text/javascript">
    var color_base = document.querySelectorAll(".color_base");
    for (var item of color_base) {
      item.addEventListener("click", function (event) {
        event.preventDefault();
        var color_actual = this.classList[this.classList.length - 1];
        console.log(color_actual);
        document.getElementById("textarea_color").value = "";
        document.getElementById("textarea_color").value = color_actual;
        document.querySelector("#textarea_color").select();
        document.execCommand("copy");
        document.querySelector("#color_talk").classList.add(color_actual);
        document.querySelector("#color_talk").textContent = color_actual;
        document.querySelector(".copy_correct").classList.add("active");
        setTimeout(function () {
          document.querySelector(".copy_correct").classList.remove("active");
          setTimeout(function () {
            document.querySelector("#color_talk").className = "";
          }, 200);
        }, 700);
      });
    }
  </script>

  
</html>