← Back to branch summary

~stephen-stewart/ulysses/gulpify-and-update

« back to all changes in this revision

Viewing changes to test/index.html

  • Committer: Stephen Stewart
  • Date: 2014-09-24 16:24:42 UTC
  • Revision ID: stephen.stewart@canonical.com-20140924162442-ip44pyqchvh89iy8
svg symbols for icons

Show diffs side-by-side

added added

removed removed

Lines of Context:
test/index.html
22
22
 
23
23
</head>
24
24
<body>
25
 
 
 
25
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
26
    <symbol id="navbar-menu" viewBox="0 0 36 34">
 
27
      <title>navbar-menu icon</title>
 
28
      <g fill="#DD4814"><path d="M10 16h16v2H10zM10 21h16v2H10zM10 11h16v2H10z"/></g><path fill="#DD4814" d="M24 1c9.87 0 11 1.115 11 10.85v10.3C35 31.885 33.87 33 24 33H12C2.13 33 1 31.885 1 22.15v-10.3C1 2.115 2.13 1 12 1h12m0-1H12C1.63 0 0 1.48 0 11.85v10.3C0 32.52 1.63 34 12 34h12c10.37 0 12-1.48 12-11.85v-10.3C36 1.48 34.37 0 24 0z"/>
 
29
    </symbol>
 
30
 
 
31
    <symbol id="navbar-search" viewBox="130.82 123.552 36 34">
 
32
      <title>navbar-search icon</title>
 
33
      <path fill="#DD4814" d="M154.82 124.552c9.87 0 11 1.115 11 10.85v10.3c0 9.734-1.13 10.85-11 10.85h-12c-9.87 0-11-1.115-11-10.85v-10.3c0-9.735 1.13-10.85 11-10.85h12m0-1h-12c-10.37 0-12 1.48-12 11.85v10.3c0 10.37 1.63 11.85 12 11.85h12c10.37 0 12-1.48 12-11.85v-10.3c0-10.37-1.63-11.85-12-11.85zM156.143 146.167l-1.803-1.804c-.226-.23-.548-.367-.87-.365-.1 0-.194.02-.288.047l-.743-.743c.897-1.096 1.437-2.497 1.437-4.023 0-3.502-2.843-6.35-6.338-6.35s-6.338 2.848-6.338 6.35c0 3.5 2.843 6.35 6.337 6.35 1.53 0 2.934-.547 4.03-1.454l.745.746c-.096.406.015.86.315 1.152l1.802 1.804c.825.877 1.003.76 1.735.026s.853-.86-.024-1.737zm-8.603-1.538c-2.943 0-5.337-2.4-5.337-5.35s2.394-5.35 5.337-5.35c2.943 0 5.338 2.4 5.338 5.35s-2.395 5.35-5.338 5.35z"/>
 
34
    </symbol>
 
35
 
 
36
    <symbol id="search" viewBox="0 0 34 34">
 
37
      <title>search icon</title>
 
38
      <path fill="#DD4814" d="M32.19 28.564L28.37 24.74c-.48-.492-1.162-.778-1.85-.773-.205 0-.408.045-.607.1l-1.576-1.576c1.906-2.322 3.052-5.293 3.052-8.53C27.386 6.54 21.356.5 13.943.5 6.53.5.5 6.54.5 13.96c0 7.424 6.03 13.464 13.442 13.464 3.244 0 6.225-1.158 8.548-3.082l1.583 1.582c-.202.86.03 1.82.67 2.443l3.822 3.823c1.75 1.86 2.127 1.61 3.68.057 1.554-1.553 1.807-1.822-.054-3.683zm-18.248-3.26c-6.244 0-11.32-5.09-11.32-11.345 0-6.253 5.076-11.34 11.32-11.34 6.243 0 11.322 5.087 11.322 11.34 0 6.254-5.08 11.343-11.322 11.343z"/>
 
39
    </symbol>
 
40
 
 
41
    <symbol id="spinner" viewBox="0 0 50 50">
 
42
      <title>spinner icon</title>
 
43
      <path fill="#DD4814" d="M25 6V4C13.42 4 4 13.42 4 25h2C6 14.523 14.523 6 25 6z"/>
 
44
    </symbol>
 
45
</svg>
26
46
<div class="ues-page">
27
47
  <section>
28
48
  <h1>Icons</h1>
29
 
  <div style="background-color:#dd4814">
30
 
    <i class="ues-icon-menu"></i>
31
 
 
32
 
    <i class="ues-icon-search"></i>
33
 
    <i class="ues-icon-search small"></i>
34
 
    <i class="ues-icon-search smaller"></i>
35
 
 
36
 
    <i class="ues-icon-search-bordered"></i>
37
 
    <i class="ues-icon-spinner"></i>
38
 
    <i class="ues-icon-spinner smaller"></i>
 
49
  <div>
 
50
    <svg role="img" class="ues-icon-navbar-menu">
 
51
    <use xlink:href="#navbar-menu"></use>
 
52
    </svg>
 
53
    <svg role="img" class="ues-icon-navbar-search">
 
54
    <use xlink:href="#navbar-search"></use>
 
55
    </svg>
 
56
    <svg role="img" class="ues-icon-search">
 
57
    <use xlink:href="#search"></use>
 
58
    </svg>
 
59
    <svg role="img" class="ues-icon-spinner">
 
60
    <use xlink:href="#spinner"></use>
 
61
    </svg>
 
62
 
39
63
  </div>
40
 
  <i class="ues-icon-menu orange"></i>
41
 
 
42
 
  <i class="ues-icon-search orange"></i>
43
 
  <i class="ues-icon-search orange small"></i>
44
 
  <i class="ues-icon-search orange smaller"></i>
45
 
 
46
 
  <i class="ues-icon-search-bordered orange"></i>
47
 
  <i class="ues-icon-spinner orange"></i>
48
 
  <i class="ues-icon-spinner smaller orange"></i>
49
64
  </section>
50
65
  <section>
51
66
  <h1>Typography</h1>
514
529
  <h2>Site search input (button)</h2>
515
530
  <div class="ues-site-search">
516
531
    <input class="ues-site-search-input" type="search" placeholder="Placeholder">
517
 
    <button class="ues-button-search"><i class="ues-icon-search orange smaller"></i></button>
 
532
    <button class="ues-button-search">
 
533
      <svg role="img" class="ues-icon-search">
 
534
      <use xlink:href="#search"></use>
 
535
      </svg>
 
536
    </button>
518
537
  </div>
519
538
 
520
539
  <h2>Site search input (indicator)</h2>
521
540
  <div class="ues-site-search">
522
 
    <i class="ues-icon-search orange smaller"></i>
 
541
      <svg role="img" class="ues-icon-search">
 
542
      <use xlink:href="#search"></use>
 
543
      </svg>
523
544
    <input class="ues-site-search-input" type="search" placeholder="Placeholder">
524
545
  </div>
525
546
 
526
547
  <h2>Site search input (both)</h2>
527
548
  <div class="ues-site-search">
528
 
    <i class="ues-icon-search orange smaller"></i>
 
549
    <svg role="img" class="ues-icon-search">
 
550
    <use xlink:href="#search"></use>
 
551
    </svg>
529
552
    <input class="ues-site-search-input" type="search" placeholder="Placeholder">
530
 
    <button class="ues-button-search"><i class="ues-icon-search orange smaller"></i></button>
 
553
    <button class="ues-button-search">
 
554
    <svg role="img" class="ues-icon-search">
 
555
    <use xlink:href="#search"></use>
 
556
    </svg>
 
557
    </button>
531
558
  </div>
532
559
</article>
533
560
<article>