aboutsummaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/styles.css10
-rw-r--r--assets/styles.scss74
2 files changed, 74 insertions, 10 deletions
diff --git a/assets/styles.css b/assets/styles.css
deleted file mode 100644
index a6888f6..0000000
--- a/assets/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.minidocs-logo {
- max-height: 100px;
- width: inherit !important;
- margin: 0 auto;
- display: block;
-}
-
-.minidocs-content {
- padding-bottom: 50px;
-} \ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
new file mode 100644
index 0000000..58a6113
--- /dev/null
+++ b/assets/styles.scss
@@ -0,0 +1,74 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
+
+// ugly selector needed to overwrite default styles
+body #choo-root.minidocs {
+ @import '~dat-design/scss/variables/colors.scss';
+ @import '~dat-design/scss/variables/transitions.scss';
+ @import '~dat-design/scss/base/links.scss';
+
+ font-family: 'Source Sans Pro', 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif;
+ line-height: 1.5;
+ color: $color-neutral;
+
+ // transitions on interactive elements
+ a,
+ button,
+ input,
+ select,
+ textarea {
+ transition-property: background-color, color;
+ transition-duration: $transition-duration;
+ transition-timing-function: $transition-timing-function;
+ }
+
+ .minidocs-header {
+ margin: 0;
+ }
+
+ .minidocs-logo {
+ max-height: 100px;
+ width: inherit;
+ display: block;
+ }
+
+ .minidocs-content {
+ padding-bottom: 50px;
+ max-width: 48em; // sets a max-width to avoid endless lines on wide screens
+ }
+
+ .minidocs-sidebar {
+ background-color: $color-neutral--10;
+ }
+
+ .minidocs-menu {
+ // overwrite the "#" default style
+ .h1::before {
+ display: none;
+ }
+ .h1, .h2, .h3 {
+ font-weight: 400;
+ }
+ .h1, .h2 {
+ margin-bottom: 8px;
+ }
+ .h2 {
+ font-size: 1.4em;
+ }
+ .content-link {
+ transition-property: background-color, color, border-color, padding-left;
+ color: $color-neutral--80;
+ padding-left: 0;
+ &:hover, &:focus {
+ color: $color-neutral;
+ border-left-color: transparent;
+ padding-left: .65rem;
+ background-color: rgba(0,0,0,.05);
+ }
+ &.active {
+ padding-left: .65rem;
+ border-left-color: $color-green--hover;
+ background-color: #FFF;
+ }
+ }
+ }
+}