insomnia/app/css/layout/base.scss

174 lines
2.0 KiB
SCSS
Raw Normal View History

2016-03-23 05:26:27 +00:00
@import '../constants/colors';
@import '../constants/dimensions';
2016-03-16 05:49:42 +00:00
2016-03-23 05:58:16 +00:00
html {
font-family: 'Open Sans', sans-serif;
2016-04-10 06:37:22 +00:00
font-size: $font-size;
2016-03-23 05:58:16 +00:00
}
2016-03-16 05:49:42 +00:00
html, body, #root {
width: 100%;
2016-03-21 05:47:49 +00:00
height: 100%;
2016-03-16 05:49:42 +00:00
}
body {
margin: 0;
padding: 0;
}
h1 {
font-size: $font-size-xxl;
}
h2 {
font-size: $font-size-xl;
}
2016-04-15 02:13:49 +00:00
h3 {
font-size: $font-size-lg;
}
h1, h2, h3 {
padding-bottom: 1em;
2016-04-15 02:13:49 +00:00
}
hr {
width: 100%;
height: 1px;
background-color: $hl-md;
border: 0;
margin: $padding-md 0;
}
label {
2016-04-27 23:06:27 +00:00
color: $hl;
text-transform: uppercase;
font-size: 0.8em;
}
2016-04-18 05:58:58 +00:00
.monospace {
font-family: monospace;
}
2016-03-16 23:34:25 +00:00
.text-center {
text-align: center;
2016-03-16 20:02:47 +00:00
}
2016-04-07 03:27:45 +00:00
.text-right {
text-align: right;
}
2016-03-23 17:15:19 +00:00
.text-left {
text-align: left !important;
}
2016-03-21 05:47:49 +00:00
.tall {
height: 100%;
2016-04-06 04:21:42 +00:00
}
.wide {
width: 100%;
}
.relative {
position: relative;
2016-03-21 05:47:49 +00:00
}
2016-04-04 07:15:30 +00:00
/* Make all font awesome icons the same width */
i.fa {
width: 1.1em;
text-align: center;
}
.no-wrap {
white-space: nowrap;
}
2016-04-17 22:46:17 +00:00
.pad {
box-sizing: border-box;
padding: $padding-md;
}
.pad-left-half {
padding-left: $padding-md / 2;
}
.pad-right-half {
padding-right: $padding-md / 2;
}
2016-04-15 02:13:49 +00:00
.no-pad {
padding: 0 !important;
}
2016-03-23 05:26:27 +00:00
.wide {
width: 100%;
}
2016-04-04 07:15:30 +00:00
.block {
display: block !important;
}
.inline-block {
display: inline-block !important;
}
2016-04-07 01:11:16 +00:00
.italic {
font-style: italic;
}
2016-04-10 06:37:22 +00:00
.selectable {
-webkit-user-select: text;
cursor: text;
}
2016-03-21 05:47:49 +00:00
.hide-scrollbars {
&::-webkit-scrollbar {
display: none;
}
}
2016-04-05 20:49:28 +00:00
.scrollable {
2016-04-07 17:06:04 +00:00
overflow: auto;
2016-04-05 20:49:28 +00:00
}
2016-04-05 05:35:21 +00:00
.hover-scrollbars {
&::-webkit-scrollbar {
display: none;
}
&:hover::-webkit-scrollbar {
display: block;
}
}
2016-04-17 22:46:17 +00:00
.section.section--bordered {
2016-04-06 16:50:11 +00:00
.section__header {
2016-04-12 00:39:49 +00:00
border-right: 1px solid #eee;
2016-04-17 22:46:17 +00:00
&.bg-brand {
border-right-color: $bg-brand;
}
2016-04-06 16:50:11 +00:00
}
.section__body {
border-right: 1px solid $hl-sm;
}
}
2016-03-16 23:34:25 +00:00
strong {
font-weight: 600;
2016-03-16 20:02:47 +00:00
}
2016-03-23 05:58:16 +00:00
@media (max-width: $breakpoint-md) {
2016-03-23 17:15:19 +00:00
html {
2016-03-23 05:58:16 +00:00
font-size: $font-size * 0.95;
}
}
@media (max-width: $breakpoint-sm) {
2016-03-23 17:15:19 +00:00
html {
2016-03-23 05:58:16 +00:00
font-size: $font-size * 0.9;
}
}