From f4ffd261dba91a4594695712bcbc60199c233daf Mon Sep 17 00:00:00 2001 From: Daniel Boles Date: Mon, 2 Oct 2017 20:22:41 +0100 Subject: [PATCH] widget-factory: Demo different Frame border-styles This shows not all, but the interesting/less predictable styles, and the ones that correspond to the :shadow-types that were here before. --- demos/widget-factory/widget-factory.css | 22 ++++++++++++++++++++++ demos/widget-factory/widget-factory.ui | 23 ++++++++++++++++------- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/demos/widget-factory/widget-factory.css b/demos/widget-factory/widget-factory.css index 1782e6db5f..1674f189ac 100644 --- a/demos/widget-factory/widget-factory.css +++ b/demos/widget-factory/widget-factory.css @@ -2,3 +2,25 @@ padding: 0; outline-width: 0; } + +.border-inset { + border-style: inset; +} + +.border-outset { + border-style: outset; +} + +.border-groove { + border-style: groove; +} + +.border-ridge { + border-style: ridge; +} + +/* These effects use 2 lines, so show them */ +.border-groove, +.border-ridge { + border-width: 2px; +} diff --git a/demos/widget-factory/widget-factory.ui b/demos/widget-factory/widget-factory.ui index 253a4aed68..62beb14cd1 100644 --- a/demos/widget-factory/widget-factory.ui +++ b/demos/widget-factory/widget-factory.ui @@ -1157,10 +1157,12 @@ Suspendisse feugiat quam quis dolor accumsan cursus. 1 - in + - <b>In</b> + <b>Inset</b> 1 @@ -1168,10 +1170,12 @@ Suspendisse feugiat quam quis dolor accumsan cursus. - out + - <b>Out</b> + <b>Outset</b> 1 @@ -1182,9 +1186,12 @@ Suspendisse feugiat quam quis dolor accumsan cursus. + - <b>Etched in</b> + <b>Groove</b> 1 @@ -1195,10 +1202,12 @@ Suspendisse feugiat quam quis dolor accumsan cursus. - etched-out + - <b>Etched out</b> + <b>Ridge</b> 1