Page MenuHomePhabricator

No OneTemporary

diff --git a/demo/contextual.demo.html b/demo/contextual.demo.html
new file mode 100644
index 0000000..2cc3a13
--- /dev/null
+++ b/demo/contextual.demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ html, body {
+ padding: 0;
+ margin: 0;;
+ }
+
+ * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ }
+
+ .material {
+ border-radius: .3rem;
+ border: solid 1px #CCC;
+ }
+
+ </style>
+ <link type="text/css" rel="stylesheet" href="../dist/_.css">
+ </head>
+ <body>
+ <div class="spacer huge"></div>
+ <div class="row l2">
+ <div class="span l1">
+ <a class="button">Button</a>
+ <span class="contextual-toggle"></span>
+ </div>
+ </div>
+ <div class="spacer huge"></div>
+ <div class="row l2">
+ <div class="span l1">
+ <a class="button small">Button</a>
+ <span class="contextual-toggle small"></span>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/ui/_contextual.scss b/ui/_contextual.scss
new file mode 100644
index 0000000..a977e21
--- /dev/null
+++ b/ui/_contextual.scss
@@ -0,0 +1,33 @@
+
+$-background : #EEE;
+$-foreground : #CCC;
+$-radius : 3px;
+
+@mixin configure ($background: null, $foreground: null, $radius: null) {
+ @if($background) { $-background: $background !global; }
+ @if($foreground) { $-foreground: $foreground !global; }
+ @if($radius) { $-radius: $radius !global; }
+}
+
+@mixin styles($height: 3.2rem, $width: null, $radius: 3px) {
+
+ @if ($width == null) { $width: $height; }
+
+ &.contextual-toggle {
+
+ display: inline-block;
+ width: $width;
+ height: $height;
+ background-color: $-background;
+ vertical-align: middle;
+
+ border-radius: $-radius;
+ border: solid $width/10 $-background;
+
+ background-image: radial-gradient($-foreground $width/11, transparent $width/12);
+ background-position: center center;
+ background-size: $width/4 $width/4;
+ background-repeat: repeat-x;
+ }
+
+}
diff --git a/ui/_ui.scss b/ui/_ui.scss
index 1d261a4..0d7eb96 100644
--- a/ui/_ui.scss
+++ b/ui/_ui.scss
@@ -8,6 +8,23 @@ and open the template in the editor.
Author : César de la Cal Bretschneider <cesar@magic3w.com>
*/
+@use '_contextual' as contextual;
+
+@include contextual.configure(
+ $foreground: $grey500,
+ $background: $grey100
+);
+
+* {
+ @include contextual.styles();
+}
+
+.small {
+ $height : 3.2rem * .6;
+ $radius : .18rem;
+ @include contextual.styles($height: $height, $radius: $radius);
+}
+
@import 'sidebar/_sidebar.scss';
@import 'buttons/_button.scss';
@import '_dialog.scss';

File Metadata

Mime Type
text/x-diff
Expires
Thu, Apr 15, 10:03 AM (3 w, 5 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
7075
Default Alt Text
(2 KB)

Event Timeline