diff --git a/doc/kss/templates/default/kss-assets/browser_icon.svg b/doc/kss/templates/default/kss-assets/browser_icon.svg
new file mode 100644
index 0000000..5fb81cf
--- /dev/null
+++ b/doc/kss/templates/default/kss-assets/browser_icon.svg
@@ -0,0 +1,85 @@
+
+
+
+
diff --git a/doc/kss/templates/default/kss-assets/kss.css b/doc/kss/templates/default/kss-assets/kss.css
index 706207f..a73b240 100644
--- a/doc/kss/templates/default/kss-assets/kss.css
+++ b/doc/kss/templates/default/kss-assets/kss.css
@@ -449,10 +449,17 @@
border-radius: 6px;
padding-bottom: 50%; }
#kss-node .kss-modifier__example .fullscreen::before {
- background-color: #f3f3f5;
+ background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
+ border-bottom: 2px solid #e7e7e9;
content: '';
display: block;
height: 20px; }
+ #kss-node .kss-modifier__example .fullscreen .embed {
+ height: calc(100% - 30px);
+ left: 5px;
+ position: absolute;
+ top: 25px;
+ width: calc(100% - 10px); }
#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
diff --git a/doc/kss/templates/default/kss-assets/kss.scss b/doc/kss/templates/default/kss-assets/kss.scss
index cce200e..d00193a 100644
--- a/doc/kss/templates/default/kss-assets/kss.scss
+++ b/doc/kss/templates/default/kss-assets/kss.scss
@@ -725,11 +725,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
padding-bottom: 50%;
&::before {
- background-color: $kss-colors-subheader-bg;
+ background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
+ border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
+
+ .embed {
+ height: calc(100% - 30px);
+ left: 5px;
+ position: absolute;
+ top: 25px;
+ width: calc(100% - 10px);
+ }
}
}
diff --git a/doc/styleguide/kss-assets/browser_icon.svg b/doc/styleguide/kss-assets/browser_icon.svg
new file mode 100644
index 0000000..5fb81cf
--- /dev/null
+++ b/doc/styleguide/kss-assets/browser_icon.svg
@@ -0,0 +1,85 @@
+
+
+
+
diff --git a/doc/styleguide/kss-assets/kss.css b/doc/styleguide/kss-assets/kss.css
index 706207f..a73b240 100644
--- a/doc/styleguide/kss-assets/kss.css
+++ b/doc/styleguide/kss-assets/kss.css
@@ -449,10 +449,17 @@
border-radius: 6px;
padding-bottom: 50%; }
#kss-node .kss-modifier__example .fullscreen::before {
- background-color: #f3f3f5;
+ background: url("./browser_icon.svg") no-repeat 5px center #f3f3f5;
+ border-bottom: 2px solid #e7e7e9;
content: '';
display: block;
height: 20px; }
+ #kss-node .kss-modifier__example .fullscreen .embed {
+ height: calc(100% - 30px);
+ left: 5px;
+ position: absolute;
+ top: 25px;
+ width: calc(100% - 10px); }
#kss-node.kss-guides-mode .kss-modifier__example:before, #kss-node.kss-guides-mode .kss-modifier__example:after,
#kss-node.kss-guides-mode .kss-modifier__example-footer:before,
#kss-node.kss-guides-mode .kss-modifier__example-footer:after {
diff --git a/doc/styleguide/kss-assets/kss.scss b/doc/styleguide/kss-assets/kss.scss
index cce200e..d00193a 100644
--- a/doc/styleguide/kss-assets/kss.scss
+++ b/doc/styleguide/kss-assets/kss.scss
@@ -725,11 +725,20 @@ $kss-vertical-rhythm: $kss-font-size * 1.5;
padding-bottom: 50%;
&::before {
- background-color: $kss-colors-subheader-bg;
+ background: url('./browser_icon.svg') no-repeat 5px center $kss-colors-subheader-bg;
+ border-bottom: 2px solid $kss-colors-subheader-border;
content: '';
display: block;
height: 20px;
}
+
+ .embed {
+ height: calc(100% - 30px);
+ left: 5px;
+ position: absolute;
+ top: 25px;
+ width: calc(100% - 10px);
+ }
}
}