style.scss: use 'by-view' file layout

3 files changed, 497 insertions, 0 deletions

diff --git a/res/client/css/by-view/graph-view.scss b/res/client/css/by-view/graph-view.scss
new file mode 100644
index 00000000..abce69a3
--- /dev/null
+++ b/res/client/css/by-view/graph-view.scss
@@ -0,0 +1,208 @@
+.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;
+  fill: $dark-grey;
+}
+
+.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.4);
+  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;
+  -webkit-filter: blur(10px);
+}
+
+.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/by-view/login.scss b/res/client/css/by-view/login.scss
new file mode 100644
index 00000000..55d75cd4
--- /dev/null
+++ b/res/client/css/by-view/login.scss
@@ -0,0 +1,195 @@
+@import '../modules/mixins'; // For box-sizing
+
+.welcome-box {
+  margin-left: auto;
+  margin-right: auto;
+  padding: $three-baselines;
+  margin-top: $three-baselines;
+  width: 420px;
+  background: white;
+}
+
+.login-view-section {
+  width: 100%;
+  margin-top: $two-baselines;
+  margin-bottom: $one-baseline;
+  text-align: center;
+}
+
+.login-rhizi-logo {
+  background: url('/static/img/logo-red.png');
+  background-repeat: no-repeat;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  width: 54px;
+  height: 30px;
+}
+
+.login-header {
+  margin-top: 35px;
+  margin-bottom: 35px;
+  text-align: center;
+  color: $magenta;
+}
+
+.login-text {
+  font-size: $h3-size;
+  line-height: 22px;
+  text-align: center;
+  margin-bottom: $one-baseline;
+
+  em {
+    font-family: $bold-font-family;
+    font-style:normal;
+  }
+}
+
+.clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+
+}
+
+.login-form {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.login-input {
+  width: 75%;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  background-color: $light-grey;
+  border: 1px solid $mid-light-grey;
+  -webkit-appearance: none;
+  padding: $one-baseline $one-baseline $one-baseline 20%;
+  background-repeat: no-repeat;
+  background-position: 18px 14px;
+
+  &:focus {
+    outline: none;
+    background-color: $light-grey;
+    border: 1px solid $mid-light-grey;
+    @include rz-inset-box-shadow(0px, 0px, 6px, rgba(0,0,0,0.3) )
+  }
+
+  &[type="email"] {
+    background-image: url(../img/mail-icon.png);
+  }
+
+  &[type="password"] {
+    background-image: url(../img/password-icon.png);
+    background-position-x: 22px;
+    border-top: none;
+  }
+}
+
+.forgot-password {
+  color: $mid-grey;
+  text-decoration: none;
+  &:hover {
+    color: $dark-grey;
+  }
+}
+
+
+.section-divider {
+  color: $mid-grey;
+
+  &:before {
+    content: "";
+    width: 112px;
+    margin-top: $one-baseline;
+    position: absolute;
+    height: 0;
+    margin-left: -118px;
+    border-top: 1px solid $mid-grey;
+  }
+
+  &:after {
+    content: "";
+    width: 112px;
+    margin-top: $one-baseline;
+    position: absolute;
+    margin-left: 4px;
+    height: 0;
+    border-top: 1px solid $mid-grey;
+  }
+}
+
+.contact-us-icon {
+  text-align: center;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background: url(../img/hr-email-icon.png) no-repeat;
+  margin-left: auto;
+  display: inline-block;
+  margin-right: auto;
+  height:25px;
+  width:25px;
+}
+
+.contact-us-text {
+  color: $magenta ;
+}
+
+.contact-us-link {
+  color: $magenta;
+  text-decoration: underline;
+}
+
+.magenta-divider {
+
+  &:before {
+    border-top: 1px solid $magenta;
+  }
+
+  &:after {
+    border-top: 1px solid $magenta;
+  }
+
+}
+
+.login-form_button {
+  cursor: pointer;
+  background-color: $magenta;
+  color: $white;
+  font-size: $h3-size;
+  margin-top: $two-baselines;
+  padding: $one-baseline;
+  width: 100%;
+
+  &:hover {
+    background-color: $dark-magenta;
+  }
+
+  &:focus {
+    background-color: $dark-magenta; 
+  }
+}
+
+#login-page_forgot-password-button {
+  margin-top: $one-baseline;
+}
+
+#login-page_create-account-button {
+  color: $light-grey;
+  background-color: $mid-grey;
+  padding: $one-baseline 0;
+
+  &:hover {
+      background-color: $dark-grey;
+  }
+}
diff --git a/res/client/css/by-view/user-signup.scss b/res/client/css/by-view/user-signup.scss
new file mode 100644
index 00000000..1fb4677c
--- /dev/null
+++ b/res/client/css/by-view/user-signup.scss
@@ -0,0 +1,94 @@
+/* #user_signup_form_panel {
+	width: 550px;
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+	padding: 20px 30px;
+	margin-top: 80px;
+	background: white;
+	box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.3);
+} */
+
+/* #signup_form__submit_button {
+	background-color: #ee3654;
+	border-radius: 3px;
+	color: #fff;
+	cursor: pointer;
+	float: right;
+	font-weight: bold;s
+	margin: 20px;
+	padding: 12px 20px;
+	text-align: center;
+	width: 140px;
+} */
+
+.signup_form__row {
+	width: 100%;
+}
+
+/* .signup_form__field {
+	border-radius: 3px;
+	border: 1px solid #4B7CBD;
+	float: left;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	padding-left: 10px;
+	padding-right: 10px;
+	margin: 5px;
+}
+
+.signup_form__row_sharing_field {
+	display: inline-block;
+}
+
+.signup_form__field input {
+	background-color: inherit;
+	border: none;
+}
+
+.signup_form__field input:focus {
+	outline: none;
+}
+
+#signup_form__title {
+	color: #ee3654;
+	margin-bottom: 30px;
+	background: url(../img/logo-red.png);
+	background-repeat: no-repeat;
+	background-position: 140px 2px;
+}
+
+#signup_form__submit_button_row {
+	overflow: auto;
+}  */
+
+.input-username {
+	background-image: url(../img/user-icon.png);
+	background-position-x: 21px;
+}
+
+.signup-button {
+	width: 92%;
+}
+
+#signup_form__submit_button:hover {
+	alpha: 1.0;
+}
+
+#signup_form__ajax_response {
+	margin-top: 30px;
+	margin: 10px;
+}
+
+#err_msg_row p{
+	margin-top: $one-baseline;
+	width: 92%;
+	padding: $one-baseline;
+	font-size: $h4-size;
+	line-hight: 18px;
+	text-align: center;
+	color: $dark-magenta;
+	background-color: lighten( $magenta, 40% );
+	border: 1px solid $dark-magenta;
+}