summaryrefslogtreecommitdiff
path: root/res/client/css/partials
diff options
context:
space:
mode:
authorAlon Levy <alon@pobox.com>2014-12-16 17:37:42 +0200
committerAlon Levy <alon@pobox.com>2014-12-16 17:37:42 +0200
commitade19de410e0a789a921ec1666b278b2a64176d6 (patch)
treec4c54b106de93609ca7bb70a20fd4be696715dbe /res/client/css/partials
parentc7d026b1d504323a8c61d51b726e5e8d2337fc4b (diff)
moving files around after repository merger
Diffstat (limited to 'res/client/css/partials')
-rw-r--r--res/client/css/partials/base.scss79
-rw-r--r--res/client/css/partials/buttons.scss24
-rw-r--r--res/client/css/partials/dev-area.scss32
-rw-r--r--res/client/css/partials/graph-view.scss206
-rw-r--r--res/client/css/partials/grid.scss0
-rw-r--r--res/client/css/partials/info-card.scss130
-rw-r--r--res/client/css/partials/input-bar.scss101
-rw-r--r--res/client/css/partials/input-bubble.scss15
-rw-r--r--res/client/css/partials/metro-view.scss0
-rw-r--r--res/client/css/partials/reset.scss49
-rw-r--r--res/client/css/partials/search-bar.scss66
-rw-r--r--res/client/css/partials/task-alert.scss37
-rw-r--r--res/client/css/partials/top-bar.scss60
-rw-r--r--res/client/css/partials/typography.scss21
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;
+}