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 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + 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 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + 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); + } } }