diff options
Diffstat (limited to 'design/sass')
| -rw-r--r-- | design/sass/_forms.scss | 34 | ||||
| -rw-r--r-- | design/sass/_global.scss | 17 | ||||
| -rw-r--r-- | design/sass/_header.scss | 44 | ||||
| -rw-r--r-- | design/sass/_notes.scss | 269 |
4 files changed, 328 insertions, 36 deletions
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index d6b0931..5923e1f 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -101,6 +101,40 @@ table { color: $link_color !important; } } +.btn-hollow { + @include fontsize(17); + padding: 6px 8px; + border: none; //1px solid $body_font_light; + color: $link_color !important; + outline: $link_color !important; + background: white; + border: 1px solid $link_color; + &:hover { + background: white; + color: $link_color !important; + } +} +.btn-link { + @include fontsize(15); + padding: 0; + border: none; //1px solid $body_font_light; + color: lighten($body_font_color, 15) !important; + background: white; + border: none; + &:hover { + background: white; + color: $body_font_color !important; + } +} +.save { + color: white !important; + background: $link_color !important; + &:hover { + background: $link_color; + color: white !important; + } + +} .btn-accent { padding: 3px 5px; border: 1px solid $text_accent; diff --git a/design/sass/_global.scss b/design/sass/_global.scss index d394042..c242ace 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -152,7 +152,7 @@ h3 { } } .wrapper { - @include constrain_wide; + @include constrain(1440px); //margin-top: 5rem; } //************** Universals ************************ @@ -186,6 +186,21 @@ h3 { .left-margin-2 { margin-left: 2px; } +.right-padding-0 { + padding-right: 0 !important; +} +.center { + text-align: center; + margin-right: auto; + margin-left: auto; +} +.list-style-none { + list-style-type: none; + padding: 0; +} +.vertical li { + display: block; +} //************** other global classes ************************ .sans { @include generic_sans; diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 7f98419..487f1fc 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -54,3 +54,47 @@ nav { } } } +.dropmenu { + outline: white; + position: absolute; + z-index: 10; + margin-top: 4px; + margin-left: 2rem; + background: #fff; + color: #60516E; + padding: 10px; + border-radius: 4px; + border: 1px solid rgba(0,0,0,0.05); + filter: drop-shadow(0 0px 4px rgba(0,0,0,0.08)); + &:after { + top: unset; + left: unset; + margin-left: unset; + border-top-color: unset; + content: ""; + position: absolute; + border: 10px solid transparent; + bottom: 100%; + left: 50%; + margin-left: -10px; + border-bottom-color: white; + } + a, a:visited { + color: lighten($body_font_color, 15); + } + a:hover { + color: $body_font_color; + } + .menu-divider { + border-top: 1px solid #e7e2ee; + padding: 8px 16px 0; + margin: 8px -10px 0; + } + li { + margin-top: 4px; + margin-bottom: 4px; + } +} +#user-menu { + margin-left: 4rem; +} diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss index 09d234a..cd10e39 100644 --- a/design/sass/_notes.scss +++ b/design/sass/_notes.scss @@ -1,25 +1,163 @@ +main { + width: 100%; + display: flex ; + align-items: stretch ; + flex-flow: row wrap ; + margin: 0; +} +.svg-icon-arrow { + display: block; + z-index: 2; + width: 18px; + height: 18px; + &:hover { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; + transition: 0.5s; + } +} +.note-list-container, .balance-container { + position: relative; + order: 1; + z-index: 1; + visibility: hidden; + //background: #fbfafa; + padding: 4px; + border-left: 1px #f9f9f9 solid; + max-width: 320px; + .list-note-preview { + li { + height: 4.5rem; + } + h4 { + @include fontsize(15); + } + } + .note-preview { + overflow: hidden; + white-space: nowrap; + } +} +.balance-container { + order: 3; + min-width: 320px; +} +.list-notebook { + +} +.icon-notebook { + display: inline-block; + content: " "; + width: 24px; + height: 24px; + background: url('/media/moleskine.svg'); +} +.list-note-preview { + padding: 0; + margin: 0; + list-style-type: none; + li { + @include fontsize(13); + min-height: 4.5rem; + box-shadow: 0 -1px 0 #e7e2ee inset; + margin: 0; + padding: 6px 12px; + &:hover { + background: #f1f1f1; + } + a { + color: lighten($body_font_color, 15); + text-decoration: none; + } + } + h4 { + @include fontsize(16); + margin: 0; + padding: 8px 0 8px 6px; + font-weight: normal; + overflow: hidden; + white-space: nowrap; + } + .note-preview { + padding-left: 6px; + margin-bottom: 16px; + margin-right: 6px; + } +} .note-title { - @include fontsize(22); + @include fontsize(26); } .note-header { @extend %clearfix; } -.note-header-float { - width: 30%; - float: right; +.note-header-right { text-align: right; + float: right; + width: 50%; } .note-time, .note-url { text-align: right; @include fancy-sans; + @include fontsize(12); + margin-bottom: 0; + text-transform: uppercase; +} +.note-url { + margin-top: 0; +} +.note-header { + margin-top: 1rem; + margin-bottom: 3rem; +} +.edit-btn-wrapper{ + text-align: right; +} +.note-header-left { + @include fancy-sans; @include fontsize(13); + float: left; + width: 50%; + .label { + text-transform: uppercase; + @include fontsize(11); + color: $body_font_light; + margin-right: 4px; + } + ul { + display: inline-block; + padding: 0; + margin-bottom: 0; + } + li { + margin-right: 4px; + display: inline-block; + } + a { + text-decoration: none; + color: darken($body_font_light, 5);; + &:hover { + color: darken($body_font_light, 25); + } + } +} +.notebook { + display: block; } .note-container { - @include constrain(80%); + max-width: 60%; + position: relative; + flex:1; + order: 2; + background: #fff; + z-index: 4; } #note-body { @include fancy-sans; - @include fontsize(15); + @include fontsize(14); } .inactive { .ql-editor { @@ -39,33 +177,94 @@ font-size:inherit; } } -.note-list-container { - max-width: 300px; - ul { - padding: 0; - list-style-type: none; - } - li { - @include fontsize(13); - height: 4.5rem; - box-shadow: 0 -1px 0 #e7e2ee inset; - margin: 0; - a { - color: lighten($body_font_color, 15); - text-decoration: none; - } - } - h4 { - @include fontsize(15); - margin: 0; - padding: 8px 0 8px 6px; - font-weight: normal; - overflow: hidden; - white-space: nowrap; - } - .note-preview { - padding-left: 6px; - overflow: hidden; - white-space: nowrap; - } +#user-menu, #notebooks-menu { + display: none; +} +.active { + display: block !important; +} + +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> + +*/ + +.hljs, pre.ql-syntax { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #002b36 !important; + color: #839496; +} + +.hljs-comment, +.hljs-quote { + color: #586e75; +} + +/* Solarized Green */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-addition { + color: #859900; +} + +/* Solarized Cyan */ +.hljs-number, +.hljs-string, +.hljs-meta .hljs-meta-string, +.hljs-literal, +.hljs-doctag, +.hljs-regexp { + color: #2aa198; +} + +/* Solarized Blue */ +.hljs-title, +.hljs-section, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #268bd2; +} + +/* Solarized Yellow */ +.hljs-attribute, +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-class .hljs-title, +.hljs-type { + color: #b58900; +} + +/* Solarized Orange */ +.hljs-symbol, +.hljs-bullet, +.hljs-subst, +.hljs-meta, +.hljs-meta .hljs-keyword, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-link { + color: #cb4b16; +} + +/* Solarized Red */ +.hljs-built_in, +.hljs-deletion { + color: #dc322f; +} + +.hljs-formula { + background: #073642; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; } |