From 446f272819e3f610abd39b8625a93b387eb558d4 Mon Sep 17 00:00:00 2001 From: LV-426 Date: Mon, 23 Feb 2015 14:26:10 +0200 Subject: style.scss: use 'by-view' file layout --- res/client/css/by-view/graph-view.scss | 208 +++++++++++++++++++++++++++++++ res/client/css/by-view/login.scss | 195 +++++++++++++++++++++++++++++ res/client/css/by-view/user-signup.scss | 94 ++++++++++++++ res/client/css/partials/graph-view.scss | 208 ------------------------------- res/client/css/partials/login.scss | 195 ----------------------------- res/client/css/partials/user-signup.scss | 94 -------------- res/client/css/style.scss | 10 +- 7 files changed, 503 insertions(+), 501 deletions(-) create mode 100644 res/client/css/by-view/graph-view.scss create mode 100644 res/client/css/by-view/login.scss create mode 100644 res/client/css/by-view/user-signup.scss delete mode 100644 res/client/css/partials/graph-view.scss delete mode 100644 res/client/css/partials/login.scss delete mode 100644 res/client/css/partials/user-signup.scss 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; +} diff --git a/res/client/css/partials/graph-view.scss b/res/client/css/partials/graph-view.scss deleted file mode 100644 index abce69a3..00000000 --- a/res/client/css/partials/graph-view.scss +++ /dev/null @@ -1,208 +0,0 @@ -.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/partials/login.scss b/res/client/css/partials/login.scss deleted file mode 100644 index 55d75cd4..00000000 --- a/res/client/css/partials/login.scss +++ /dev/null @@ -1,195 +0,0 @@ -@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/partials/user-signup.scss b/res/client/css/partials/user-signup.scss deleted file mode 100644 index 1fb4677c..00000000 --- a/res/client/css/partials/user-signup.scss +++ /dev/null @@ -1,94 +0,0 @@ -/* #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; -} diff --git a/res/client/css/style.scss b/res/client/css/style.scss index e13f59e0..ec30484e 100644 --- a/res/client/css/style.scss +++ b/res/client/css/style.scss @@ -1,14 +1,12 @@ // Modules and Variables @import "partials/base"; -//Reset CSS +// Reset CSS @import "partials/reset"; // Partials -@import "partials/login"; @import "partials/buttons"; @import "partials/dev-area"; -@import "partials/graph-view"; @import "partials/grid"; @import "partials/input-bar"; @import "partials/input-bubble"; @@ -19,9 +17,13 @@ @import "partials/top-bar"; @import "partials/typography"; @import "partials/dropdown-menu"; -@import "partials/user-signup"; @import "partials/tool-bar"; +// Views +@import "by-view/graph-view"; +@import "by-view/login"; +@import "by-view/user-signup"; + // Third-party @import "vendor/ui.css"; -- cgit v1.3.1