...
 
Commits (4)
Sun 4 Feb 2018 Yasuhiro Asaka <[email protected]>
* Bump version 0.0.32
* Create modal popup window component
Sat 3 Feb 2018 Yasuhiro Asaka <[email protected]>
* Bump version 0.0.31
* Arrange document (Add Components section)
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item active" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item active" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item active" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styr</title>
<link rel="stylesheet" href="css/styr.css">
<link rel="stylesheet" href="css/docs.css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<h2 class="item">Documents</h2>
<a class="item" href="index.html">Home</a>
<hr>
<h6 class="item">Styles</h6>
<a class="item" href="button.html">Button</a>
<a class="item" href="form.html">Form</a>
<a class="item" href="grid.html">Grid</a>
<a class="item" href="label.html">Label</a>
<a class="item" href="table.html">Table</a>
<a class="item" href="text.html">Text</a>
<a class="item" href="typography.html">Typography</a>
<hr>
<h6 class="item">Components</h6>
<a class="item" href="box.html">Box</a>
<a class="item" href="breadcrumb.html">Breadcrumb</a>
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item active" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
<div class="primary message">
<h4 class="header">Styr</h4>
<p><a class="link" href="https://gitlab.com/grauwoelfchen/styr">gitlab.com:grauwoelfchen/styr</a></p>
</div>
</div>
</div>
<div class="content">
<div class="breadcrumb">
<a class="item" href="index.html">Home</a>
<span class="divider">/</span>
<span class="item active" href="dropdown.html">Dropdown</span>
</div>
<h2 class="title">Modal</h2>
<section>
<h3 class="title">Modal Popup Window</h3>
<p class="description">Click a button below.</p>
<div class="flat box">
<a class="secondary flat button" href="#modal_message">Message for You!</a>
<div id="modal_message" class="modal-container">
<div class="modal">
<a class="close button" href="#">&times;</a>
<div class="modal-content">
<h5 class="header">Welcome!</h5>
<p class="description">You have successfully signed up!</p>
</div>
</div>
</div>
</div>
<pre>
&lt;a class="button" href="#modal_message"&gt;Message for You!&lt;/a&gt;
&lt;div id="modal_message" class="modal-container"&gt;
&lt;div class="modal"&gt;
&lt;a class="close button" href="#"&gt;&amp;times;&lt;/a&gt;
&lt;div class="modal-content"&gt;
&lt;h5 class="header"&gt;&lt;/h5&gt;
&lt;p class="description"&gt;You have successfully signed up!&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</section>
<section>
<h3 class="title">Form + Modal Popup Window</h3>
<p class="description">You can embed anything, for example like a form.</p>
<div class="flat box">
<a class="primary flat button" href="#modal_form">Signup</a>
<div id="modal_form" class="modal-container">
<div class="modal">
<a class="close button" href="#">&times;</a>
<div class="modal-content">
<form class="form">
<div class="field">
<label for="name_0" class="label">Name</label>
<input type="text" id="name_0" name="name" placeholder="Name">
</div>
<div class="field">
<label for="code_0" class="label">Code-Name</label>
<input type="text" id="code_0" name="code" placeholder="Code-Name">
</div>
<div class="field">
<div class="checkbox">
<input tabindex=0 id="robot_check_0" type="checkbox" checked="checked">
<label for="robot_check_0" class="label">To tell the truth, I'm a robot</label>
</div>
</div>
<button class="negative flat button" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<pre>
&lt;a class="button" href="#modal_form"&gt;&lt;/a&gt;
&lt;div id="modal_form" class="modal-container"&gt;
&lt;div class="modal"&gt;
&lt;a class="close button" href="#"&gt;&amp;times;&lt;/a&gt;
&lt;div class="modal-content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</section>
</div>
</div>
</body>
</html>
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item active" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item active" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......@@ -76,6 +77,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item active" href="sidebar.html">Sidebar</a>
</div>
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -28,6 +28,7 @@
<a class="item" href="dropdown.html">Dropdown</a>
<a class="item" href="menu.html">Menu</a>
<a class="item" href="message.html">Message</a>
<a class="item" href="modal.html">Modal</a>
<a class="item" href="pagination.html">Pagination</a>
<a class="item" href="sidebar.html">Sidebar</a>
<div class="bottom item">
......
......@@ -4725,6 +4725,68 @@ blockquote.blockquote {
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1pc2Muc3R5bCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLFlBQStCLFFBQS9CO0VBQ0EsT0FBTSxRQUFOOztBQUVGO0VBQ0UsWUFBK0IsUUFBL0I7RUFDQSxPQUFNLFFBQU47O0FBR0Y7QUFBUztBQUNTO0FBQ1E7QUFDVztFQUVuQyxTQUFRLGFBQVI7RUFDQSxRQUFPLEVBQVA7RUFDQSxvQkFBbUIsS0FBbkI7O0FBRUY7QUFBdUM7RUFFckMsY0FBYSxLQUFiO0VBQ0EsUUFBTyxhQUFQO0VBQ0EsU0FBUSxhQUFSOztBQUVGO0FBQU87RUFFTCxTQUFRLGFBQVI7O0FBRUY7RUFDRSxPQUFNLFlBQU47RUFDQSxhQUFZLGdCQUFaOztBQUVGO0FBQ0U7SUFDRSxPQUFNLFlBQU47SUFDQSxhQUFZLGNBQVo7SUFDQSxTQUFRLEVBQVI7O0FBQ0E7QUFBUztJQUVQLE9BQU0sdUJBQU47SUFDQSxhQUFZLHlCQUFaO0lBQ0EsU0FBUSxhQUFSOzs7QUFJTjtFQUNFLE9BQU0sUUFBTjtFQUNBLGlCQUFnQixLQUFoQjs7QUFDQTtFQUNFLE9BQStCLFFBQS9COztBQUNGO0VBQ0UsT0FBTSxRQUFOOztBQUNGO0VBQ0UsT0FBdUMsUUFBdkM7O0FBQ0Y7QUFBUTtFQUVOLGlCQUFnQixVQUFoQjs7QUFJSjtFQUNFLFFBQU8sc0JBQVA7RUFDQSxTQUFRLGVBQVI7O0FBQ0E7RUFDRSxRQUFPLEVBQVA7RUFDQSxTQUFRLDRCQUFSOztBQUlKO0VBQ0UsUUFBTyxFQUFQO0VBQ0EsUUFBTyxLQUFQO0VBQ0EsZUFBYyxrQkFBZDtFQUNBLFNBQVEsTUFBUjtFQUNBLFFBQU8sV0FBUDs7QUFHRjtBQUFlO0VBRWIsU0FBUSxhQUFSOztBQUNBO0FBQWE7QUFDYTs7OztFQUV4QixTQUFRLGFBQVI7RUFDQSxXQUFVLFFBQVY7RUFDQSxTQUFRLEVBQVI7RUFDQSxRQUFPLFVBQVA7RUFDQSxPQUFNLFFBQU47O0FBQ0Y7QUFBTztBQUNXO0FBQ1U7Ozs7O0VBRTFCLFNBQVEsYUFBUjtFQUNBLFdBQVUsUUFBVjtFQUNBLFFBQU8sRUFBUDtFQUNBLFNBQVEsRUFBUjs7QUFDQTs7Ozs7Ozs7RUFDRSxnQkFBZSxLQUFmO0VBQ0EsUUFBTyxRQUFQO0VBQ0EsYUFBWSxLQUFaO0VBQ0EsT0FBTSxRQUFOOztBQUNBOzs7Ozs7OztFQUNFLE9BQU0sUUFBTjtFQUNBLGlCQUFnQixLQUFoQjs7QUFFUjtBQUNBO0VBQ0UsWUFBNEIsUUFBNUI7RUFDQSxTQUFRLGlCQUFSO0VBQ0EsT0FBTSxRQUFOOztBQUNBO0VBQ0UsWUFBK0IsUUFBL0I7RUFDQSxPQUF5QixRQUF6Qjs7QUFFSjtFQUNJLE9BQTBCLFFBQTFCO0VBQ0EsWUFBVyxRQUFYOztBQUVKO0VBQ0ksT0FBMEIsUUFBMUI7RUFDQSxZQUE4QixRQUE5Qjs7QUFFSjtFQUNFLFNBQVEsYUFBUjtFQUNBLGdCQUFlLFNBQWY7RUFDQSxhQUFZLE9BQVo7RUFDQSxRQUFPLFVBQVA7RUFDQSxTQUFRLGtDQUFSO0VBQ0EsUUFBTyxrQkFBUDtFQUNBLGVBQWMsU0FBZDtFQUNBLE9BQXdCLFFBQXhCOztBQUNBO0VBQ0UsUUFBTyxrQkFBUDtFQUNBLFlBQStCLFFBQS9CO0VBQ0EsT0FBeUIsUUFBekI7O0FBRUo7RUFDRSxTQUFRLE1BQVI7RUFDQSxhQUFZLE9BQVo7RUFDQSxhQUFZLGtCQUFaO0VBQ0EsU0FBUSxnQ0FBUjtFQUNBLFFBQU8sVUFBUDs7QUFFRjtBQUNBO0VBQ0UsU0FBUSxNQUFSO0VBQ0EsUUFBTyxRQUFQOztBQUVGO0VBQ0UsWUFBVyxNQUFYIiwiZmlsZSI6Im1pc2MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQHJlcXVpcmUgJy4vX2NvbG91ci5zdHlsJ1xuXG4vLyAtc2VsZWN0aW9uXG4qOjpzZWxlY3Rpb25cbiAgYmFja2dyb3VuZCBsaWdodGVuKCRibGFjazIsIDExJSlcbiAgY29sb3IgJGdyYXkwXG5cbio6Oi1tb3otc2VsZWN0aW9uXG4gIGJhY2tncm91bmQgbGlnaHRlbigkYmxhY2syLCAxMSUpXG4gIGNvbG9yICRncmF5MFxuXG4vLyAtZm9jdXMtaW5uZXJcbio6YWN0aXZlLFxuKjpmb2N1cyxcbio6bGluayxcbio6dmlzaXRlZCxcbio6Oi1tb3otZm9jdXMtaW5uZXJcbiAgb3V0bGluZSAwICFpbXBvcnRhbnRcbiAgYm9yZGVyIDBcbiAgLW1vei1vdXRsaW5lLXN0eWxlIG5vbmVcbi8vIHRoaXMgMiBibG9ja3MgYmVsb3cgYXJlIG5lZWRlZCB0byBvdmVyd3JpdGUgZG90dGVkIGluIG5vcm1hbGl6ZS5jc3NcbmlucHV0W3R5cGU9XCJzdWJtaXRcIl06Oi1tb3otZm9jdXMtaW5uZXIsXG5idXR0b246Oi1tb3otZm9jdXMtaW5uZXJcbiAgYm9yZGVyLXN0eWxlIG5vbmVcbiAgYm9yZGVyIDAgIWltcG9ydGFudFxuICBvdXRsaW5lIDAgIWltcG9ydGFudFxuXG5zZWxlY3QsXG5zZWxlY3Qgb3B0aW9uXG4gIG91dGxpbmUgMCAhaW1wb3J0YW50XG5cbnNlbGVjdDotbW96LWZvY3VzcmluZ1xuICBjb2xvciB0cmFuc3BhcmVudFxuICB0ZXh0LXNoYWRvdyBub25lICFpbXBvcnRhbnRcblxuQC1tb3otZG9jdW1lbnQgdXJsLXByZWZpeCgpXG4gIHNlbGVjdFxuICAgIGNvbG9yIHRyYW5zcGFyZW50XG4gICAgdGV4dC1zaGFkb3cgMCAwIDAgJGJsYWNrMFxuICAgIG91dGxpbmUgMFxuICAgICY6YWN0aXZlLFxuICAgICY6Zm9jdXNcbiAgICAgIGNvbG9yIHRyYW5zcGFyZW50ICFpbXBvcnRhbnRcbiAgICAgIHRleHQtc2hhZG93IDAgMCAwICRibGFjazAgIWltcG9ydGFudFxuICAgICAgb3V0bGluZSAwICFpbXBvcnRhbnRcblxuXG4vLyBsaW5rXG5hXG4gIGNvbG9yICRsaW5rLWNvbG91clxuICB0ZXh0LWRlY29yYXRpb24gbm9uZVxuICAmOmhvdmVyXG4gICAgY29sb3IgbGlnaHRlbigkbGluay1jb2xvdXIsIDI2JSlcbiAgJjp2aXNpdGVkXG4gICAgY29sb3IgJGxpbmstdmlzaXRlZC1jb2xvdXJcbiAgJjp2aXNpdGVkOmhvdmVyXG4gICAgY29sb3IgbGlnaHRlbigkbGluay12aXNpdGVkLWNvbG91ciwgMzglKVxuICAmOmhvdmVyLFxuICAmOnZpc2l0ZWQ6aG92ZXJcbiAgICB0ZXh0LWRlY29yYXRpb24gdW5kZXJsaW5lXG5cblxuLy8gbGlzdFxudWxcbiAgbWFyZ2luIDAuMTgycmVtIDAgMC4wOTZyZW0gMFxuICBwYWRkaW5nIDAgMCAwIDAuODk4cmVtXG4gIGxpXG4gICAgbWFyZ2luIDBcbiAgICBwYWRkaW5nIDAuMDExcmVtIDAgMC4wMTFyZW0gMC4yOXJlbVxuXG5cbi8vIGxpbmVcbmhyXG4gIGhlaWdodCAwXG4gIGJvcmRlciBub25lXG4gIGJvcmRlci1ib3R0b20gMXB4IHNvbGlkIGxpZ2h0ZW4oJGxpbmUtY29sb3VyLCA0NCUpXG4gIGRpc3BsYXkgYmxvY2tcbiAgbWFyZ2luIDAuNzg2cmVtIDBcblxuLy8gYnJlYWRjcnVtYlxuZGl2LmJyZWFkY3J1bWIsXG51bC5icmVhZGNydW1iXG4gIGRpc3BsYXkgaW5saW5lLWJsb2NrXG4gIHNwYW4uZGl2aWRlcixcbiAgZGl2LmRpdmlkZXIsXG4gIGxpLmRpdmlkZXJcbiAgICBkaXNwbGF5IGlubGluZS1ibG9ja1xuICAgIGZvbnQtc2l6ZSAwLjc3NmVtXG4gICAgcGFkZGluZyAwXG4gICAgbWFyZ2luIDAgMC4wNjZlbVxuICAgIGNvbG9yICRncmF5MVxuICBhLml0ZW0sXG4gIHNwYW4uaXRlbSxcbiAgZGl2Lml0ZW0sXG4gIGxpLml0ZW1cbiAgICBkaXNwbGF5IGlubGluZS1ibG9ja1xuICAgIGZvbnQtc2l6ZSAwLjg4NmVtXG4gICAgbWFyZ2luIDBcbiAgICBwYWRkaW5nIDBcbiAgICAmLmFjdGl2ZVxuICAgICAgcG9pbnRlci1ldmVudHMgbm9uZVxuICAgICAgY3Vyc29yIGRlZmF1bHRcbiAgICAgIGZvbnQtd2VpZ2h0IGJvbGRcbiAgICAgIGNvbG9yICRibGFjazBcbiAgICAgICY6aG92ZXJcbiAgICAgICAgY29sb3IgJGJsYWNrMFxuICAgICAgICB0ZXh0LWRlY29yYXRpb24gbm9uZVxuXG4vKiBwcmUsY29kZSAqL1xucHJlXG4gIGJhY2tncm91bmQgZGFya2VuKCRncmF5MCwgMyUpXG4gIHBhZGRpbmcgMC42MTlyZW0gMS4wMnJlbVxuICBjb2xvciAkYmxhY2swXG4gICYuaW52ZXJ0ZWRcbiAgICBiYWNrZ3JvdW5kIGxpZ2h0ZW4oJGJsYWNrMiwgMTElKVxuICAgIGNvbG9yIGRhcmtlbigkd2hpdGUyLCAxOCUpXG5cbnByZS5pbnZlcnRlZDo6c2VsZWN0aW9uXG4gICAgY29sb3IgbGlnaHRlbigkYmxhY2syLCAxMSUpXG4gICAgYmFja2dyb3VuZCAkd2hpdGUxXG5cbnByZS5pbnZlcnRlZDo6LW1vei1zZWxlY3Rpb25cbiAgICBjb2xvciBsaWdodGVuKCRibGFjazIsIDExJSlcbiAgICBiYWNrZ3JvdW5kIGxpZ2h0ZW4oJHdoaXRlMSwgMyUpXG5cbmNvZGVcbiAgZGlzcGxheSBpbmxpbmUtYmxvY2tcbiAgdmVydGljYWwtYWxpZ24gYmFzZWxpbmVcbiAgbGluZS1oZWlnaHQgMS4xNmVtXG4gIG1hcmdpbiAwIDAuMTlyZW1cbiAgcGFkZGluZyAwLjAwNHJlbSAwLjU2cmVtIDAuMDA0cmVtIDAuNTZyZW1cbiAgYm9yZGVyIDFweCBzb2xpZCBsaWdodGVuKCRncmF5MSwgNTUlKVxuICBib3JkZXItcmFkaXVzIDAuMTMzcmVtXG4gIGNvbG9yIGRhcmtlbigkZ3JheTIsIDU4JSlcbiAgJi5pbnZlcnRlZFxuICAgIGJvcmRlciAxcHggc29saWQgbGlnaHRlbigkYmxhY2syLCAxMSUpXG4gICAgYmFja2dyb3VuZCBsaWdodGVuKCRibGFjazIsIDExJSlcbiAgICBjb2xvciBkYXJrZW4oJHdoaXRlMiwgMTglKVxuXG5ibG9ja3F1b3RlLmJsb2NrcXVvdGVcbiAgZGlzcGxheSBibG9ja1xuICBsaW5lLWhlaWdodCAxLjIxZW1cbiAgYm9yZGVyLWxlZnQgNHB4IHNvbGlkIGRhcmtlbigkZ3JheTEsIDE5JSlcbiAgcGFkZGluZyAwLjYycmVtIDEuMDNyZW0gMC41NnJlbSAxLjAzcmVtXG4gIG1hcmdpbiAwLjM2cmVtIDBcblxuLyogZ2VuZXJhbCAqL1xuLmJsb2NrXG4gIGRpc3BsYXkgYmxvY2tcbiAgbWFyZ2luIDAuMzNyZW1cblxuLnJpZ2h0XG4gIHRleHQtYWxpZ24gcmlnaHRcbiJdfQ== */
.modal-container {
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
transition: opacity 300ms;
z-index: 2147483647;
}
.modal-container:target {
visibility: visible;
opacity: 1;
}
.modal-container .modal {
margin-top: 9rem;
margin-left: auto;
margin-right: auto;
position: relative;
width: 30%;
min-width: 28%;
height: auto;
}
.modal-container .modal .close.button {
position: absolute;
display: block;
top: 0.11rem;
right: 0.89rem;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
font-size: 1.66em;
font-weight: bold;
color: #696e5d;
transition: all 250ms all;
margin: 0.55rem 0 0 0;
padding: 0.12rem 0.86rem;
z-index: 2147483647;
}
.modal-container .modal .close.button:hover {
color: #10100e;
}
.modal-container .modal .modal-content {
position: absolute;
top: 0.11rem;
width: 100%;
height: auto;
padding: 3.18rem 1.6rem 2.12rem 1.6rem;
background: #fdfdfd;
border-radius: 0.18rem;
transition: all 3.82s ease-in-out;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZGFsLnN0eWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUE7RUFDRSxZQUFXLE9BQVg7RUFDQSxTQUFRLEVBQVI7RUFDQSxVQUFTLE1BQVQ7RUFDQSxLQUFJLEVBQUo7RUFDQSxRQUFPLEVBQVA7RUFDQSxNQUFLLEVBQUw7RUFDQSxPQUFNLEVBQU47RUFDQSxZQUE0QixnQkFBNUI7RUFDQSxZQUFXLGNBQVg7RUFDQSxTQUFRLFdBQVI7O0FBQ0E7RUFDRSxZQUFXLFFBQVg7RUFDQSxTQUFRLEVBQVI7O0FBRUY7RUFDRSxZQUFXLEtBQVg7RUFDQSxhQUFZLEtBQVo7RUFDQSxjQUFhLEtBQWI7RUFDQSxVQUFTLFNBQVQ7RUFDQSxPQUFNLElBQU47RUFDQSxXQUFVLElBQVY7RUFDQSxRQUFPLEtBQVA7O0FBRUE7RUFDRSxVQUFTLFNBQVQ7RUFDQSxTQUFRLE1BQVI7RUFDQSxLQUFJLFFBQUo7RUFDQSxPQUFNLFFBQU47RUFDQSxRQUFPLEVBQVA7RUFDQSxlQUFjLEVBQWQ7RUFDQSxZQUFXLEtBQVg7RUFDQSxZQUFXLFlBQVg7RUFDQSxXQUFVLE9BQVY7RUFDQSxhQUFZLEtBQVo7RUFDQSxPQUEwQixRQUExQjtFQUNBLFlBQVcsY0FBWDtFQUNBLFFBQU8sY0FBUDtFQUNBLFNBQVEsZ0JBQVI7RUFDQSxTQUFRLFdBQVI7O0FBQ0E7RUFDRSxPQUF3QixRQUF4Qjs7QUFFSjtFQUNFLFVBQVMsU0FBVDtFQUNBLEtBQUksUUFBSjtFQUNBLE9BQU0sS0FBTjtFQUNBLFFBQU8sS0FBUDtFQUNBLFNBQVEsOEJBQVI7RUFDQSxZQUFXLFFBQVg7RUFDQSxlQUFjLFFBQWQ7RUFDQSxZQUFXLHNCQUFYIiwiZmlsZSI6Im1vZGFsLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkByZXF1aXJlICcuL19jb2xvdXIuc3R5bCdcblxuLm1vZGFsLWNvbnRhaW5lclxuICB2aXNpYmlsaXR5IGhpZGRlblxuICBvcGFjaXR5IDBcbiAgcG9zaXRpb24gZml4ZWRcbiAgdG9wIDBcbiAgYm90dG9tIDBcbiAgbGVmdCAwXG4gIHJpZ2h0IDBcbiAgYmFja2dyb3VuZCByZ2JhKDAsIDAsIDAsIDAuNylcbiAgdHJhbnNpdGlvbiBvcGFjaXR5IDMwMG1zXG4gIHotaW5kZXggMjE0NzQ4MzY0N1xuICAmOnRhcmdldFxuICAgIHZpc2liaWxpdHkgdmlzaWJsZVxuICAgIG9wYWNpdHkgMS4wXG5cbiAgLm1vZGFsXG4gICAgbWFyZ2luLXRvcCA5cmVtXG4gICAgbWFyZ2luLWxlZnQgYXV0b1xuICAgIG1hcmdpbi1yaWdodCBhdXRvXG4gICAgcG9zaXRpb24gcmVsYXRpdmVcbiAgICB3aWR0aCAzMCVcbiAgICBtaW4td2lkdGggMjglXG4gICAgaGVpZ2h0IGF1dG9cblxuICAgIC5jbG9zZS5idXR0b25cbiAgICAgIHBvc2l0aW9uIGFic29sdXRlXG4gICAgICBkaXNwbGF5IGJsb2NrXG4gICAgICB0b3AgMC4xMXJlbVxuICAgICAgcmlnaHQgMC44OXJlbVxuICAgICAgYm9yZGVyIDBcbiAgICAgIGJvcmRlci1yYWRpdXMgMFxuICAgICAgYm94LXNoYWRvdyBub25lXG4gICAgICBiYWNrZ3JvdW5kIHRyYW5zcGFyZW50XG4gICAgICBmb250LXNpemUgMS42NmVtXG4gICAgICBmb250LXdlaWdodCBib2xkXG4gICAgICBjb2xvciBsaWdodGVuKCRibGFjazAsIDI4JSlcbiAgICAgIHRyYW5zaXRpb24gYWxsIDI1MG1zIGFsbFxuICAgICAgbWFyZ2luIDAuNTVyZW0gMCAwIDBcbiAgICAgIHBhZGRpbmcgMC4xMnJlbSAwLjg2cmVtXG4gICAgICB6LWluZGV4IDIxNDc0ODM2NDdcbiAgICAgICY6aG92ZXJcbiAgICAgICAgY29sb3IgZGFya2VuKCRibGFjazIsIDMlKVxuXG4gICAgLm1vZGFsLWNvbnRlbnRcbiAgICAgIHBvc2l0aW9uIGFic29sdXRlXG4gICAgICB0b3AgMC4xMXJlbVxuICAgICAgd2lkdGggMTAwJVxuICAgICAgaGVpZ2h0IGF1dG9cbiAgICAgIHBhZGRpbmcgMy4xOHJlbSAxLjZyZW0gMi4xMnJlbSAxLjZyZW1cbiAgICAgIGJhY2tncm91bmQgJHdoaXRlMVxuICAgICAgYm9yZGVyLXJhZGl1cyAwLjE4cmVtXG4gICAgICB0cmFuc2l0aW9uIGFsbCAzLjgycyBlYXNlLWluLW91dFxuIl19 */
ul.pagination,
div.pagination {
padding: 1.2rem 0;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "styr",
"version": "0.0.31",
"version": "0.0.32",
"description": "STYlish css libRary",
"main": "dst/styr.min.css",
"author": "Yasuhiro Asaka <[email protected]>",
......
@require './_colour.styl'
.modal-container
visibility hidden
opacity 0
position fixed
top 0
bottom 0
left 0
right 0
background rgba(0, 0, 0, 0.7)
transition opacity 300ms
z-index 2147483647
&:target
visibility visible
opacity 1.0
.modal
margin-top 9rem
margin-left auto
margin-right auto
position relative
width 30%
min-width 28%
height auto
.close.button
position absolute
display block
top 0.11rem
right 0.89rem
border 0
border-radius 0
box-shadow none
background transparent
font-size 1.66em
font-weight bold
color lighten($black0, 28%)
transition all 250ms all
margin 0.55rem 0 0 0
padding 0.12rem 0.86rem
z-index 2147483647
&:hover
color darken($black2, 3%)
.modal-content
position absolute
top 0.11rem
width 100%
height auto
padding 3.18rem 1.6rem 2.12rem 1.6rem
background $white1
border-radius 0.18rem
transition all 3.82s ease-in-out