SCSS
////////////////////////////////////////////////////////
// Variables
////////////////////////////////////////////////////////
$scale: 1;
$size-title-bar: 4.5rem * $scale;
$size-sidebar: 20rem;
$size-ui-padding: .5rem;
$size-button-border-radius: .4rem;
$font: Helvetica, Arial, Sans-Serif;
$title-bar-text-shadow: 0px -1px 2px #000;
$colour-title-bar: #424949;
$colour-sidebar: #fff;
$colour-action-button: #444a4a;
$colour-action-button-hover: #586161;
$colour-action-button-selected: #232828;
$colour-text: #454c4c;
$colour-text2: #fff;
$colour-border: rgba(#1c1f1f, 0.75);
////////////////////////////////////////////////////////
// Setup
////////////////////////////////////////////////////////
html {
font-family: $font;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-sfont-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: #929292;
}
body {
margin: 0;
font-size: 1.6rem;
line-height: 1.5;
}
.gnome-window {
width: 90vw;
height: 90vh;
margin-top: 5vh;
margin-left: 5vw;
border-radius: .5rem;
overflow: hidden;
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
border: 1px solid $colour-border;
}
////////////////////////////////////////////////////////
// Reset
////////////////////////////////////////////////////////
// Remove outline on buttons
button {
&:focus {
outline: none;
}
}
////////////////////////////////////////////////////////
// Styles
////////////////////////////////////////////////////////
// Window
.gnome-window {
background: #fff;
color: $colour-text;
display: flex;
flex-direction: column;
}
// Title Bar
.gnome-title-bar {
width: 100%;
height: $size-title-bar;
overflow: hidden;
color: $colour-text2;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: $colour-title-bar;
background: linear-gradient(to bottom, $colour-title-bar, darken($colour-title-bar, 5%));
border-bottom: 1px solid $colour-border;
&__title {
line-height: $size-title-bar;
text-align: center;
text-shadow: $title-bar-text-shadow;
font-weight: bold;
}
&__actions-left {
box-sizing: border-box;
padding: $size-ui-padding;
flex: 1;
}
&__actions-right {
box-sizing: border-box;
padding: $size-ui-padding;
flex: 1;
text-align: right;
}
&__separator {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
width: 2px;
height: calc(#{$size-title-bar} - (#{$size-ui-padding} * 2));
background: rgba(34,34,34,0);
background: linear-gradient(to bottom, rgba(34,34,34,0) 0%, rgba(34,34,34,0.5) 50%, rgba(34,34,34,0) 100%);
border-radius: 100%;
}
}
// Body Wrapper
.gnome-body {
width: 100%;
flex: 1;
display: flex;
}
// Sidebar
.gnome-sidebar {
height: 100%;
width: $size-sidebar;
background: $colour-sidebar;
border-right: 1px solid $colour-border;
padding-top: $size-ui-padding;
overflow-y: auto;
overflow-x: hidden;
&__list {
margin: 0;
padding: 0;
list-style: none;
li {
padding-top: $size-ui-padding;
padding-bottom: $size-ui-padding;
padding-left: $size-ui-padding * 2;
padding-right: $size-ui-padding * 2;
cursor: pointer;
i {
margin-right: $size-ui-padding * 2;
}
}
}
&__group {
border-bottom: 2px solid rgba($colour-border, 0.1);
padding-bottom: $size-ui-padding;
&:last-of-type {
border-bottom: none;
}
}
}
// Content Area
.gnome-content {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
&__wrapper {
flex: 1;
}
&__footer {
height: $size-title-bar;
padding: $size-ui-padding;
box-sizing: border-box;
overflow: hidden;
background: $colour-title-bar;
background: linear-gradient(to bottom, $colour-title-bar, darken($colour-title-bar, 2%));
border-top: 1px solid $colour-border;
}
}
// Actions
.gnome-action {
&__button {
height: calc(#{$size-title-bar} - (#{$size-ui-padding} * 2));
min-width: calc(#{$size-title-bar} - (#{$size-ui-padding} * 2));
background: $colour-action-button;
background: linear-gradient(to bottom, $colour-action-button, darken($colour-action-button, 5%), darken($colour-action-button, 5%));
border: 1px solid $colour-border;
border-radius: $size-button-border-radius;
padding: 0 1rem;
color: inherit;
cursor: pointer;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-shadow: $title-bar-text-shadow;
font-weight: inherit;
position: relative;
overflow: hidden;
& i, span {
position: relative;
z-index: 2;
}
& i + span {
margin-left: $size-ui-padding;
}
&.noborder {
background: none;
border: 1px solid rgba($colour-border, 0);
transition: all .3s ease-in-out;
}
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
background: $colour-action-button-hover;
background: linear-gradient(to bottom, $colour-action-button-hover, darken($colour-action-button-hover, 10%), darken($colour-action-button-hover, 10%));
border-radius: $size-button-border-radius;
transition: all .3s ease-in-out;
}
&:hover {
border: 1px solid $colour-border;
&:after {
opacity: 1;
}
}
&:active:after {
background: grey;
}
&.selected {
background: linear-gradient(to bottom, $colour-action-button-selected, darken($colour-action-button, 5%), darken($colour-action-button, 5%));
&:after {
display: none;
}
}
}
&__button-group {
display: inline-block;
margin-right: 4px;
.gnome-action__button {
border-radius: 0;
margin-right: -5px;
border-right: none;
&:after {
border-radius: 0;
}
&:first-of-type {
border-top-left-radius: $size-button-border-radius;
border-bottom-left-radius: $size-button-border-radius;
&:after {
border-top-left-radius: $size-button-border-radius;
border-bottom-left-radius: $size-button-border-radius;
}
}
&:last-of-type {
border-top-right-radius: $size-button-border-radius;
border-bottom-right-radius: $size-button-border-radius;
border-right: 1px solid $colour-border;
color:$colour-text2;
&:after {
border-top-right-radius: $size-button-border-radius;
border-bottom-right-radius: $size-button-border-radius;
}
}
}
}
}
