react-tray/examples/basic/index.html at master · instructure-react/react-tray · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<meta charset="utf-8"/>
<title>React Tray</title>
<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
<style type="text/css">
  /* Tray styles */
  .ReactTray__Overlay {
    background: rgba(0, 0, 0, 0.65);
  }

  .ReactTray__Content {
    top: 212px;
    bottom: 0;
    padding: 10px;
    width: 250px;
    box-shadow: 1px 0 5px #333;
    width: 0;
    overflow-x: hidden;
    white-space: nowrap;
  }

  .ReactTray__Content--after-open {
    width: 250px;
    transition: width 150ms ease-out;
  }

  .ReactTray__Content--before-close {
    width: 0;
    transition: width 150ms ease-in;
  }

  /* App specific styles */
  .navigation {
    position: absolute;
    top: 212px;
    bottom: 0;
    width: 50px;
    background: rgb(52, 69, 81);
    color: rgb(235, 235, 235);
    margin: 0;
    padding: 0;
    z-index: 100;
  }
  .navigation ul {
    padding: 0;
    margin: 0;
  }
  .navigation li {
    padding: 20px 10px;
    list-style: none;
  }
  .navigation li.active {
    background: #fff;
    color: rgb(21, 148, 218);
  }
  .navigation a {
    cursor: pointer;
  }

  .content {
    margin: 150px auto;
    width: 100px;
  }

  .ReactTray__Content h2 {
    color: rgb(60, 78, 91);
    border-bottom: 1px solid rgb(229, 229, 229);
    margin: 0;
    margin-bottom: 10px;
    padding: 10px 5px;
  }

  .navigation-left { left: 0; }
  .navigation-right { right: 0; }
  .tray-left {
    border-right: 1px solid #333;
    left: 50px;
  }
  .tray-right {
    border-left: 1px solid #333;
    right: 50px;
  }
</style>
<body>
  <header class="branding padbox">
    <h1>react-tray</h1>
    <h2>React tray component</h2>
  </header>
  <div id="example" class="padbox"></div>
  <a target="_blank" href="https://github.com/instructure-react/react-tray"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
	<script src="../__build__/shared.js"></script>
	<script src="../__build__/basic.js"></script>