app/assets/stylesheets/components/_browser-window.scss
//
// Browser Window
//
.browser-window {
position: relative;
max-width: 100%;
margin: auto;
font-size: 1rem;
box-shadow: 0 7px 23px 0 rgba($shadow, .59);
border-radius: 8px;
@include media-breakpoint-up(xl) {
max-width: 80%;
}
}
.browser-window__header {
position: relative;
padding-left: 8px;
height: 15px;
background: darken(#E0E8F0, 8%);
text-align: left;
border-radius: 8px 8px 0 0;
@include media-breakpoint-up(md) {
padding-left: 10px;
height: 20px;
}
@include media-breakpoint-up(lg) {
height: 30px;
}
}
.browser-window__viewport {
border-radius: 0 !important;
}
.browser-window__button {
position: relative;
top: -8px;
width: 5px;
height: 5px;
margin: 0 2px 0 0;
display: inline-block;
border-radius: 8px;
@include media-breakpoint-up(md) {
top: -3.5px;
width: 7px;
height: 7px;
margin: 0 3px 0 0;
}
@include media-breakpoint-up(lg) {
top: 0;
width: 12px;
height: 12px;
margin: 10px 4px 0 0;
}
}
.green-button {
background: #3BB662;
}
.yellow-button {
background: #E5C30F;
}
.red-button {
background: #E75448;
}