diff options
| author | Alon Levy <alon@pobox.com> | 2014-12-16 17:37:42 +0200 |
|---|---|---|
| committer | Alon Levy <alon@pobox.com> | 2014-12-16 17:37:42 +0200 |
| commit | ade19de410e0a789a921ec1666b278b2a64176d6 (patch) | |
| tree | c4c54b106de93609ca7bb70a20fd4be696715dbe /res/client/css/partials | |
| parent | c7d026b1d504323a8c61d51b726e5e8d2337fc4b (diff) | |
moving files around after repository merger
Diffstat (limited to 'res/client/css/partials')
| -rw-r--r-- | res/client/css/partials/base.scss | 79 | ||||
| -rw-r--r-- | res/client/css/partials/buttons.scss | 24 | ||||
| -rw-r--r-- | res/client/css/partials/dev-area.scss | 32 | ||||
| -rw-r--r-- | res/client/css/partials/graph-view.scss | 206 | ||||
| -rw-r--r-- | res/client/css/partials/grid.scss | 0 | ||||
| -rw-r--r-- | res/client/css/partials/info-card.scss | 130 | ||||
| -rw-r--r-- | res/client/css/partials/input-bar.scss | 101 | ||||
| -rw-r--r-- | res/client/css/partials/input-bubble.scss | 15 | ||||
| -rw-r--r-- | res/client/css/partials/metro-view.scss | 0 | ||||
| -rw-r--r-- | res/client/css/partials/reset.scss | 49 | ||||
| -rw-r--r-- | res/client/css/partials/search-bar.scss | 66 | ||||
| -rw-r--r-- | res/client/css/partials/task-alert.scss | 37 | ||||
| -rw-r--r-- | res/client/css/partials/top-bar.scss | 60 | ||||
| -rw-r--r-- | res/client/css/partials/typography.scss | 21 |
14 files changed, 820 insertions, 0 deletions
diff --git a/res/client/css/partials/base.scss b/res/client/css/partials/base.scss new file mode 100644 index 00000000..bd9eba9e --- /dev/null +++ b/res/client/css/partials/base.scss @@ -0,0 +1,79 @@ +@import "../modules/colors"; +@import "../modules/mixins"; +@import "../modules/typography"; +@import "../modules/positions"; + +//Globals +html, body { + height: 100%; + font-family: $base-font-family; + overflow-y: hidden; +} + +body { + overflow-y: hidden; + overflow-x:auto; + margin: 0; + min-width: 980px; + padding: 0; + color: #FFF; + font-size: 12px; + background-color:#f5f5fa; +} + +a{ + text-decoration: none; + color: $mid-grey; +} + +a:link { + color: $mid-grey; +} + +a:visited { + color: $mid-grey; +} + +a:hover { + color: $dark-grey; +} + +a:active { + color: $mid-grey; +} + +//input box stuff +input{ + background-color: white; + color: $dark-grey; + border: 0; + &:focus { + border: 0; + outline: 0; + background-color: white; + } + font-size: $h3-size; +} + +::-webkit-input-placeholder { /* WebKit browsers */ + color: $mid-grey; +} +:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: $mid-grey; + opacity: 1; +} +::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: $mid-grey; + opacity: 1; +} +:-ms-input-placeholder { /* Internet Explorer 10+ */ + color: $mid-grey; +} + +.rhizi-logo{ + position:fixed; + color: $dark-grey; + bottom:10px; + right:10px; + vertical-align: middle; +} diff --git a/res/client/css/partials/buttons.scss b/res/client/css/partials/buttons.scss new file mode 100644 index 00000000..379157c4 --- /dev/null +++ b/res/client/css/partials/buttons.scss @@ -0,0 +1,24 @@ +.btn-regular { + cursor: pointer; + background-color: white; + font-family: $base-font-family; + font-size: $h4-size; + color: $blue; + padding: $one-baseline $two-baselines $one-baseline $two-baselines; + margin-right: 6px; + border-radius: 4px; + border: none; +} + +.btn-regular:hover { + color: $dark-cyan; + border-color: $dark-cyan; +} + +.btn-regular:focus { + outline: none; +} + +.btn-regular-outline { + border: 1px solid $blue; +}
\ No newline at end of file diff --git a/res/client/css/partials/dev-area.scss b/res/client/css/partials/dev-area.scss new file mode 100644 index 00000000..fa1cfbf3 --- /dev/null +++ b/res/client/css/partials/dev-area.scss @@ -0,0 +1,32 @@ +.debug-ui { + display: none; +} + +body.debug { + .debug-ui { + display: inline; + position:fixed; + bottom:70px; + left:10px; + text-decoration: none; + } + + .debug-ui-row { + float: left; + width: 100%; + } + + .debug-ui-left { + float: left; + width: 50%; + } + + .debug-ui-right { + float: right; + width: 50%; + } + + .debug{ + + } +} diff --git a/res/client/css/partials/graph-view.scss b/res/client/css/partials/graph-view.scss new file mode 100644 index 00000000..e5d3f1c1 --- /dev/null +++ b/res/client/css/partials/graph-view.scss @@ -0,0 +1,206 @@ +.graph-view { + width:100%; + background-color: #f5f5fa; //$light-grey + position: relative; +} + +.node { + stroke-width: 1px; + font-size: $h3-size; + z-index:100; +} + +.ghostnode{ + +} + +.circle { + z-index: 100; + pointer-events:all; +} + +.nodetext { + fill: $dark-grey; + font-size: $h3-size; + z-index:3; +} + +// editor for node text +.svg-input-fo-node { + fill: $dark-grey; + z-index:3; +} + +.svg-input-fo-node input { + font-size: $h3-size; + background-color: transparent; +} + +.linklabel{ + stroke: $dark-grey; + font-size: $h4-size; + background-color: transparent; +} + +// editor for link text +.svg-input-fo-link { + stroke: $dark-grey; +} + +.svg-input-fo-link input { + font-size: $h4-size;; + background-color: transparent; +} + +.link { + fill: none; + stroke: $mid-grey; + stroke-width: 1px; + stroke-opacity: 0.5; + z-index:1; +} + +.ghostlink { + opacity: 0.0; + fill: none; + stroke-width: 15px; + z-index:2; /* higher than link, lower than node */ +} + +.circle.chosen { + stroke: $cyan; + stroke-opacity: 0.5; +} +.circle.enter { + stroke: $cyan; + stroke-opacity: 0.5; +} + +.circle.bubble { + fill: rgba(255,255,255,0.9); + pointer-events:none; +} +.circle.exit { + stroke: $cyan; + stroke-opacity: 0.5; +} +.circle.chainlink { + stroke: #AAA; +} + +.circle.temp { + box-shadow: 0 0 40px #FFFF8F; +} + +.circle.temp, .circle.chosen { + stroke-width: 3px; +} + +.circle.temp.empty { + stroke-width: 1.5px; +} + +/* Per node and edge type (type is a property of nodes and links) styling + * note that this should be automatically generated somehow for user settings. + */ + +.circle.person { + fill: $blue; +} + +.circle.club { + fill: $magenta; +} + +.circle.skill { + fill: $yellow; +} + +.circle.interest { + fill: $purple; +} + +.circle.project { + fill: $green; +} + +.circle.third-internship-proposal { + fill: $cyan; +} + +.circle.internship { + fill: $orange; +} + +.circle.empty { + fill: $mid-grey; +} + +.circle.chainlink { + fill: $dark-grey; +} + + +/* Selected parts of the graph, right now by clicking, later with search. */ + +.notselected { + opacity: 0.2; +} + +.graph.link.temp_and { + stroke-dasharray: 3,3; +} + +.highlightlink { + fill: none; + stroke: $cyan; + stroke-opacity: 0.5; + stroke-width: 2px; + z-index:1; +} + +.link.enter, .link.exit, .link.selected { + fill: none; + stroke: $cyan; + stroke-opacity: 0.5; + stroke-width: 2px; + z-index:1; +} + +#editbox input{ + width:130px; +} + +.overlay { + fill:none; + pointer-events: all; + z-index:0; + +} + +.editinfo{ + position: fixed; + top:-40px; + z-index:5; +} + +.editlinkinfo{ + position: fixed; + top:-40px; + z-index:5; +} + +#editlinkname{ + width:inherit; + height:inherit; + font-size: $h3-size; + +} + +#editname{ + width:inherit; + height:inherit; + font-size: $h3-size; + +} + diff --git a/res/client/css/partials/grid.scss b/res/client/css/partials/grid.scss new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/res/client/css/partials/grid.scss diff --git a/res/client/css/partials/info-card.scss b/res/client/css/partials/info-card.scss new file mode 100644 index 00000000..2b8efe20 --- /dev/null +++ b/res/client/css/partials/info-card.scss @@ -0,0 +1,130 @@ +@import '../modules/mixins'; // For box-shadow and box-sizing + +.info-container { + position: absolute; + right: $doc-margin; + top: $two-baselines; +} + +.subtitle{ + font-style:italic; + color: #bbb; + font-size: 12px; + float:right; +} + +.edge_info, .info { + color: $dark-grey; + background-color: white; + @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) ); + position: relative; + width:250px; + padding: 24px; + @include rz-box-sizing-border; + border-top: 6px solid $dark-grey; +} + +// change card top border color by node type +.info.type-person { + border-top: 6px solid $blue; +} + +.info.type-club { + border-top: 6px solid $magenta; +} + +.info.type-skill { + border-top: 6px solid $yellow; +} + +.info.type-third-internship-proposal { + border-top: 6px solid $cyan; +} + +.info.type-internship { + border-top: 6px solid $orange; +} + +.info.type-interest { + border-top: 6px solid $purple; +} + +.info.type-empty { + border-top: 6px solid $mid-grey; +} + +.info.type-chainlink { + border-top: 6px solid $dark-grey; +} + +.info.type-project { + border-top: 6px solid $green; +} + +// card elements styles + +.info .info-card-attr { + display: block; + text-transform: capitalize; + font-size: $h4-size; + font-family: $bold-font-family; +} + +.info .info-card-attr-val { + display: block; + text-transform: capitalize; + font-size: $h2-size; + margin: 12px 0px 24px 0px; +} + +.info-card-attr-val input{ + width: 100%; + font-size: $h2-size; +} + +.info-card-url input{ + font-size: $h4-size; + margin-left: 20px; +} + +.info-card-url:before { //url icon before the url line + position: absolute; + margin-top: 7px; + content: ""; + background: url(../img/url-icon.png); + min-width: 14px; + min-height: 14px; + background-position: center; + background-repeat: no-repeat; +} + +.select-dropdown { + border: none; + font-family: $base-font-family; + background-color: white; + font-size: $h3-size; + color: $dark-grey; + width: 100%; + padding: 0; + margin: 12px 0px 24px 0px; +} + +.select-dropdown:focus { + outline: none; +} + +.select-dropdown option{ + font-size: $h3-size; + color: $dark-grey; + border: 1px solid $dark-grey; +} + +.info hr { + width: 250px; + position: relative; + left: -24px; + border: none; + background-color: $mid-light-grey; + height: 2px; + margin: $two-baselines 0px $two-baselines 0px; +}
\ No newline at end of file diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss new file mode 100644 index 00000000..589731ee --- /dev/null +++ b/res/client/css/partials/input-bar.scss @@ -0,0 +1,101 @@ +@import '../modules/mixins'; // For box-shadow + +.input-container { + position: fixed; + margin: $two-baselines 0 0 $doc-margin; + + form { + display: inline; + } +} + + +.input-bar { + font-family: $base-font-family; + color: $mid-grey; + max-height: $three-baselines; + width: 280px; + padding: 6px 8px 5px 8px; + border: 1px solid $mid-grey; + @include rz-box-sizing-border; + background: white; + transition-property: width; + transition-duration: 200ms; + transition-timing-function: ease-in; + &:focus { + border: 1px solid $mid-grey; + width: 520px; + @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) ); + } +} + +#textanalyser.ui-autocomplete-input { + font-family: $base-font-family; + color: $mid-grey; +} + +.add-button { + float: right; + background: url(../img/plus-button.png); + background-position: center; + background-repeat: no-repeat; + background-color: $magenta; + position:relative; + height: 36px; + width: 36px; + left: -36px; + border: 0; +} + +.add-button:hover { + background-color: $dark-magenta; +} + +.add-button:focus { + outline: none; +} + +.suggestion{ + position: relative; + color: $dark-grey; + max-height: 580px; + overflow-y: scroll; + font-size: $h3-size; + list-style-type: none; + width: inherit; + margin-top: 6px; + border: 1px solid $mid-grey; + @include rz-box-sizing-border; + background: white; + z-index: 100; + @include rz-box-shadow(0px, 3px, 6px, 0px, rgba(0,0,0,0.3) ); +} + +.suggestion-item { + padding: 6px 0px 6px 18px; + cursor: pointer; +} + +.suggestion-item.selected, .suggestion-item:hover { + padding-left: 16px; + background-color: $light-grey; + border-left: 2px solid $cyan; + @include rz-box-sizing-border; +} + +.suggestion td{ + position:fixed; + +} + +.ui-helper-hidden-accessible{ + position:fixed; + top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines; + left:$doc-margin+8px; + text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275; + font-size:16px; +} + +.ui-helper-hidden-accessible > div { + color: $dark-grey; +} diff --git a/res/client/css/partials/input-bubble.scss b/res/client/css/partials/input-bubble.scss new file mode 100644 index 00000000..657e95de --- /dev/null +++ b/res/client/css/partials/input-bubble.scss @@ -0,0 +1,15 @@ +.typeselection{ + color: $dark-grey; + font-size: $h2-size; + position:fixed; + left:0; + top:-300px; + pointer-events:none; +} + +.typeselection td{ +} + +#keys{ + opacity: 0.5; +} diff --git a/res/client/css/partials/metro-view.scss b/res/client/css/partials/metro-view.scss new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/res/client/css/partials/metro-view.scss diff --git a/res/client/css/partials/reset.scss b/res/client/css/partials/reset.scss new file mode 100644 index 00000000..1a2e6b39 --- /dev/null +++ b/res/client/css/partials/reset.scss @@ -0,0 +1,49 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + /*font: inherit; */ + font-family: $base-font-family; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/res/client/css/partials/search-bar.scss b/res/client/css/partials/search-bar.scss new file mode 100644 index 00000000..b9f0de7d --- /dev/null +++ b/res/client/css/partials/search-bar.scss @@ -0,0 +1,66 @@ +@import '../modules/mixins'; // For box-shadow + +.search-bar{ + position: relative; + width:100%; + height:$four-baselines; + background: white; + @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) ); + z-index: 100; +} + +.search-input{ + width: 70%; + height:$icon-height; + float: left; + margin: 8px 12px 12px $doc-margin; +} + +.search-input:before { + content: ""; + background: url(../img/search-icon.png); + padding: 0px 10px 0px 10px; + background-position: center; + background-repeat: no-repeat; +} + +#search { + font-family: $base-font-family; + font-size: $h3-size; + width: 80%; +} + +#search-suggestion { + position: absolute; + width: 70%; + margin-left: $doc-margin; + top: $three-baselines + 6px; +} + +#search-suggestion .suggestion-item { + padding: $one-baseline 0px $one-baseline $two-baselines; +} + +#search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover { + padding: $one-baseline 0px $one-baseline 22px; +} + + + +.export { + cursor: pointer; + text-align: right; + width: 60px; + float: right; + color: $dark-grey; + font-size: $h5-size; + margin: 14px $doc-margin 12px 12px ; +} + +.export:before { + content: ""; + background: url(../img/export.png); + padding: 0px 9px 0px 9px; + background-position: center; + background-repeat: no-repeat; +}
\ No newline at end of file diff --git a/res/client/css/partials/task-alert.scss b/res/client/css/partials/task-alert.scss new file mode 100644 index 00000000..504f008b --- /dev/null +++ b/res/client/css/partials/task-alert.scss @@ -0,0 +1,37 @@ +.task-alert{ + position:relative; + width: 100%; + min-height:$four-baselines; + text-align: center; + background-color: $light-cyan; + color: $darker-cyan; + border-top: 1px solid $dark-cyan; + border-bottom: 1px solid $dark-cyan; +} + +.task-desc{ + display: inline-block; + width:70%; + text-align: center; + font-size: $h3-size; + margin: 12px $doc-margin 12px $doc-margin; +} + +.task-close-button { + cursor: pointer; + font-size: $h4-size; + margin: 15px $doc-margin 15px 15px; + float: right; + width: $doc-margin; + text-align: right; +} + +.task-close-button:after { + content: " "; + min-height: $icon-height; + padding-right: $icon-height; + margin-left: 4px; + background: url(../img/close-alert-button.png); + background-position: center; + background-repeat: no-repeat; +} diff --git a/res/client/css/partials/top-bar.scss b/res/client/css/partials/top-bar.scss new file mode 100644 index 00000000..cffd200a --- /dev/null +++ b/res/client/css/partials/top-bar.scss @@ -0,0 +1,60 @@ +.top-bar{ + position:relative; + top:0; + left:0; + width:100%; + min-height:$three-baselines; + background-color:$dark-grey; +} + +.doc-title{ + float: left; + font-family: $semibold-font-family; + color: $light-grey; + margin: 10px $doc-margin 10px $doc-margin; + font-size: $h3-size; +} + +.user-area { + float: right; + margin: 3px $doc-margin 3px $doc-margin; +} + +.username { + display: inline-block; + text-align: right; +} + +.profile-circle{ + border-radius: 50%; + width: 30px; + height: 30px; + background: $cyan; + display: inline-block; +} + +.profile-initials { + display: inline-block; + color: $light-grey; + font-size: $h4-size; + position: relative; + left: -27px; + top: -10px; +} + +.profile-username { + display: inline-block; + top:12px; + color: $light-grey; + position: relative; + left: -20px; + top: -10px; +} + +.organization-logo { + display: inline-block; + margin-left: 12px; + background: url(../img/CRI-logo.png); + min-height: 30px; + min-width: 30px; +}
\ No newline at end of file diff --git a/res/client/css/partials/typography.scss b/res/client/css/partials/typography.scss new file mode 100644 index 00000000..388afef5 --- /dev/null +++ b/res/client/css/partials/typography.scss @@ -0,0 +1,21 @@ +/* Headings */ + +h1 { + font-size: $h1-size; +} + +h2 { + font-size: $h2-size; +} + +h1 { + font-size: $h3-size; +} + +h2 { + font-size: $h4-size; +} + +h1 { + font-size: $h5-size; +} |
