diff --git a/CNAME b/CNAME index 72463a4..fdfbefb 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -onboarding.making-sense.eu \ No newline at end of file +onboarding.iscape.smartcitizen.me \ No newline at end of file diff --git a/bower.json b/bower.json index 4c9878c..8c0a717 100644 --- a/bower.json +++ b/bower.json @@ -6,28 +6,32 @@ "license": "MIT", "private": true, "dependencies": { - "angular": "~1.5.0", - "angular-route": "~1.5.0", - "angular-loader": "~1.5.0", - "angular-mocks": "~1.5.0", - "html5-boilerplate": "^5.3.0", - "angular-ui-router": "^0.3.1", - "bootstrap-sass": "bootstrap-sass-official#^3.3.7", - "font-awesome": "fontawesome#^4.6.3", - "angular-material": "^1.0.9", - "angular-messages": "^1.5.8", + "angular": "^1.6.10", + "angular-route": "^1.6.10", + "angular-loader": "^1.6.10", + "angular-mocks": "^1.6.10", + "html5-boilerplate": "^6.0.1", + "angular-ui-router": "^1.0.15", + "bootstrap-sass": "^3.3.7", + "font-awesome": "^5.0.10", + "angular-material": "^1.1.8", + "angular-messages": "^1.6.10", "ngGeolocation": "^0.0.8", - "angular-google-maps": "^2.3.3", - "ngmap": "^1.17.3", + "angular-google-maps": "^2.4.1", + "ngmap": "^1.18.4", "angularjs-geolocation": "^0.1.1", "angular-google-places-autocomplete": "^0.2.7", - "restangular": "^1.5.2", + "restangular": "^1.6.1", + "socket.io-client": "^2.1.0", "angular-socket-io": "^0.7.0", - "socket.io-client": "^1.6.0" + "angular-lazy-img": "^1.5.1" + }, + "resolutions": { + "angular": "^1.6.10" }, "overrides": { "socket.io-client": { - "main": "socket.io.js" + "main": ["./dist/socket.io.js"] } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 63efb8a..2384ad8 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "name": "angular-seed", "private": true, "version": "0.0.0", - "description": "A starter project for AngularJS", - "repository": "https://github.com/angular/angular-seed", + "description": "Smart Citizen Onboarding App", + "repository": "https://github.com/fablabbcn/smartcitizen-onboarding-app", "license": "MIT", "devDependencies": { "angular": "^1.5.8", diff --git a/src/app/app.js b/src/app/app.js index ba386a8..0f1a596 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -9,17 +9,6 @@ angular.module('app', [ 'uiGmapgoogle-maps', 'google.places', 'restangular', - 'btford.socket-io' - ]) - .controller('formController', function($scope) { - - // we will store all of our form data in this object - $scope.formData = {}; - - console.log($scope.formData); - - // function to process the form - $scope.processForm = function() { - alert('awesome!'); - }; - }); \ No newline at end of file + 'btford.socket-io', + 'angularLazyImg' + ]); \ No newline at end of file diff --git a/src/app/images/1.png b/src/app/images/1.png new file mode 100755 index 0000000..9296879 Binary files /dev/null and b/src/app/images/1.png differ diff --git a/src/app/images/2.png b/src/app/images/2.png new file mode 100755 index 0000000..8ee0478 Binary files /dev/null and b/src/app/images/2.png differ diff --git a/src/app/images/3.png b/src/app/images/3.png new file mode 100755 index 0000000..2287850 Binary files /dev/null and b/src/app/images/3.png differ diff --git a/src/app/images/4.png b/src/app/images/4.png new file mode 100755 index 0000000..2f73a7e Binary files /dev/null and b/src/app/images/4.png differ diff --git a/src/app/images/alert.svg b/src/app/images/alert.svg old mode 100644 new mode 100755 index 5eebf72..27fe1e1 --- a/src/app/images/alert.svg +++ b/src/app/images/alert.svg @@ -1,14 +1,33 @@ - - \ No newline at end of file + + + diff --git a/src/app/images/back.svg b/src/app/images/back.svg new file mode 100755 index 0000000..25affb8 --- /dev/null +++ b/src/app/images/back.svg @@ -0,0 +1,24 @@ + + + diff --git a/src/app/images/bg_l.png b/src/app/images/bg_l.png new file mode 100755 index 0000000..144a0db Binary files /dev/null and b/src/app/images/bg_l.png differ diff --git a/src/app/images/bg_m.png b/src/app/images/bg_m.png new file mode 100755 index 0000000..e588beb Binary files /dev/null and b/src/app/images/bg_m.png differ diff --git a/src/app/images/bg_s.png b/src/app/images/bg_s.png new file mode 100755 index 0000000..195e2f7 Binary files /dev/null and b/src/app/images/bg_s.png differ diff --git a/src/app/images/check.png b/src/app/images/check.png index 296e476..13371da 100644 Binary files a/src/app/images/check.png and b/src/app/images/check.png differ diff --git a/src/app/images/check.svg b/src/app/images/check.svg new file mode 100755 index 0000000..5aa9c27 --- /dev/null +++ b/src/app/images/check.svg @@ -0,0 +1,21 @@ + + + diff --git a/src/app/images/cheers-34.svg b/src/app/images/cheers-34.svg new file mode 100755 index 0000000..e51f3d0 --- /dev/null +++ b/src/app/images/cheers-34.svg @@ -0,0 +1,50 @@ + + + diff --git a/src/app/images/favicon.ico b/src/app/images/favicon.ico index b41cb24..29ca462 100644 Binary files a/src/app/images/favicon.ico and b/src/app/images/favicon.ico differ diff --git a/src/app/images/forgot_pass.svg b/src/app/images/forgot_pass.svg new file mode 100755 index 0000000..307325b --- /dev/null +++ b/src/app/images/forgot_pass.svg @@ -0,0 +1,33 @@ + + + diff --git a/src/app/images/hardware_board.png b/src/app/images/hardware_board.png new file mode 100755 index 0000000..041a7e6 Binary files /dev/null and b/src/app/images/hardware_board.png differ diff --git a/src/app/images/help.svg b/src/app/images/help.svg new file mode 100755 index 0000000..8c3b14a --- /dev/null +++ b/src/app/images/help.svg @@ -0,0 +1,32 @@ + + + diff --git a/src/app/images/info.svg b/src/app/images/info.svg new file mode 100755 index 0000000..e1367a4 --- /dev/null +++ b/src/app/images/info.svg @@ -0,0 +1,23 @@ + + + diff --git a/src/app/images/mail.svg b/src/app/images/mail.svg new file mode 100755 index 0000000..4a54210 --- /dev/null +++ b/src/app/images/mail.svg @@ -0,0 +1,29 @@ + + + diff --git a/src/app/images/main_board.png b/src/app/images/main_board.png new file mode 100755 index 0000000..924c970 Binary files /dev/null and b/src/app/images/main_board.png differ diff --git a/src/app/images/oops.svg b/src/app/images/oops.svg new file mode 100755 index 0000000..10430b1 --- /dev/null +++ b/src/app/images/oops.svg @@ -0,0 +1,34 @@ + + + diff --git a/src/app/images/pass.svg b/src/app/images/pass.svg new file mode 100755 index 0000000..17c970b --- /dev/null +++ b/src/app/images/pass.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/app/images/place.svg b/src/app/images/place.svg new file mode 100755 index 0000000..db10955 --- /dev/null +++ b/src/app/images/place.svg @@ -0,0 +1,30 @@ + + + diff --git a/src/app/images/retry.svg b/src/app/images/retry.svg new file mode 100755 index 0000000..6b79183 --- /dev/null +++ b/src/app/images/retry.svg @@ -0,0 +1,35 @@ + + + diff --git a/src/app/images/sck.png b/src/app/images/sck.png new file mode 100644 index 0000000..bc4ec6f Binary files /dev/null and b/src/app/images/sck.png differ diff --git a/src/app/images/sck_case.png b/src/app/images/sck_case.png new file mode 100755 index 0000000..f08e306 Binary files /dev/null and b/src/app/images/sck_case.png differ diff --git a/src/app/images/sck_case2.png b/src/app/images/sck_case2.png new file mode 100755 index 0000000..7eff291 Binary files /dev/null and b/src/app/images/sck_case2.png differ diff --git a/src/app/images/sck_placeall.png b/src/app/images/sck_placeall.png new file mode 100755 index 0000000..884eeda Binary files /dev/null and b/src/app/images/sck_placeall.png differ diff --git a/src/app/images/sck_sealthecover.png b/src/app/images/sck_sealthecover.png new file mode 100755 index 0000000..11a1fad Binary files /dev/null and b/src/app/images/sck_sealthecover.png differ diff --git a/src/app/images/scklogo.png b/src/app/images/scklogo.png new file mode 100644 index 0000000..6028858 Binary files /dev/null and b/src/app/images/scklogo.png differ diff --git a/src/app/images/seepass.svg b/src/app/images/seepass.svg new file mode 100755 index 0000000..3e501cb --- /dev/null +++ b/src/app/images/seepass.svg @@ -0,0 +1,13 @@ + + + diff --git a/src/app/images/sensor_board.png b/src/app/images/sensor_board.png new file mode 100755 index 0000000..30654e3 Binary files /dev/null and b/src/app/images/sensor_board.png differ diff --git a/src/app/images/smartcitizen_logo.svg b/src/app/images/smartcitizen_logo.svg new file mode 100755 index 0000000..efec23e --- /dev/null +++ b/src/app/images/smartcitizen_logo.svg @@ -0,0 +1,31 @@ + + + diff --git a/src/app/images/soundwave.svg b/src/app/images/soundwave.svg new file mode 100755 index 0000000..56cddad --- /dev/null +++ b/src/app/images/soundwave.svg @@ -0,0 +1,27 @@ + + + diff --git a/src/app/images/speaker.svg b/src/app/images/speaker.svg new file mode 100755 index 0000000..29c9353 --- /dev/null +++ b/src/app/images/speaker.svg @@ -0,0 +1,31 @@ + + + diff --git a/src/app/images/tag.svg b/src/app/images/tag.svg new file mode 100755 index 0000000..0863a02 --- /dev/null +++ b/src/app/images/tag.svg @@ -0,0 +1,27 @@ + + + diff --git a/src/app/images/user-33.svg b/src/app/images/user-33.svg new file mode 100755 index 0000000..15fff10 --- /dev/null +++ b/src/app/images/user-33.svg @@ -0,0 +1,29 @@ + + + diff --git a/src/app/images/web.png b/src/app/images/web.png new file mode 100644 index 0000000..c8caa28 Binary files /dev/null and b/src/app/images/web.png differ diff --git a/src/app/images/welldone.svg b/src/app/images/welldone.svg new file mode 100755 index 0000000..8c88359 --- /dev/null +++ b/src/app/images/welldone.svg @@ -0,0 +1,40 @@ + + + diff --git a/src/app/images/wifi.svg b/src/app/images/wifi.svg new file mode 100755 index 0000000..26bd85f --- /dev/null +++ b/src/app/images/wifi.svg @@ -0,0 +1,22 @@ + + + diff --git a/src/app/styles/_colors.scss b/src/app/styles/_colors.scss index ac19464..1797e25 100644 --- a/src/app/styles/_colors.scss +++ b/src/app/styles/_colors.scss @@ -1,8 +1,14 @@ //Colors +$SCK2-yellow: #FFCE00; +$SCK2-darkGrey: #333333; +$SCK2-lightGrey: #f9f9fb; +$SCK2-blue: #001fff; +$SCK2-red: #ff3d4c; + $msNavy: #212B32; $msNavy2: #27353D; $msOrange: #FBA200; -$msRed: #EF5854; +$msRed: $SCK2-red; $msGreen: #61CD72; $msBlue: #4AA3DF; $msGrey: #A5ACB2; @@ -20,3 +26,4 @@ $SCKgrey: #8DB2BA; $SCKgrey2: #C8E6ED; $SCKwhite: #ffffff; + diff --git a/src/app/styles/_doorbell.scss b/src/app/styles/_doorbell.scss index de24cfe..4fb1e78 100644 --- a/src/app/styles/_doorbell.scss +++ b/src/app/styles/_doorbell.scss @@ -7,7 +7,7 @@ width: auto; border: 0; //background: #61CD72; - background: $SCKblue; + background: $SCK2-darkGrey; text-transform: uppercase; color: #FFF; padding: 10px 20px; diff --git a/src/app/styles/_form.scss b/src/app/styles/_form.scss index 15550f1..ecd8c6f 100644 --- a/src/app/styles/_form.scss +++ b/src/app/styles/_form.scss @@ -3,7 +3,7 @@ margin: 50px 0 ; .inputTitle, .inputError { - color: $SCKnavy; + color: $SCK2-darkGrey; } .inputContainer { @@ -12,7 +12,7 @@ border: none; border-radius: 4px; - background-color: $SCKgrey; + background-color: $SCK2-lightGrey; @media screen and (max-width: 450px) { padding: 0; } @@ -25,14 +25,14 @@ } &.focus { - background-color: $SCKgrey; + background-color: $SCK2-lightGrey; } .ss_input{ margin: 0 25px; svg { path { - fill: $SCKwhite !important; + fill: $SCK2-darkGrey !important; } } } @@ -45,13 +45,13 @@ margin: 0; border: none; .md-placeholder{ - color: $msGrey; + color: $SCK2-darkGrey; } input { padding: 0; height: 80px; border: none; - color: $msWhite; + color: $SCK2-darkGrey; font: 100% 'Roboto Condensed', sans-serif !important; font-size: 42px !important; @media screen and (max-width: 450px) { @@ -67,16 +67,16 @@ // LOL HIDEOUS VVVVV md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused label, md-input-container:not(.md-input-invalid).md-input-focused label, md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused md-icon, md-input-container:not(.md-input-invalid).md-input-focused md-icon { - color: $SCKnavy; + color: $SCK2-darkGrey; } md-input-container.md-default-theme.md-input-invalid label, md-input-container.md-input-invalid label, md-input-container.md-default-theme.md-input-invalid .md-input-message-animation, md-input-container.md-input-invalid .md-input-message-animation, md-input-container.md-default-theme.md-input-invalid .md-char-counter, md-input-container.md-input-invalid .md-char-counter { color: $msRed; } md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder{ - color: $SCKnavy; + color: $SCK2-darkGrey; } md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, md-input-container:not(.md-input-invalid).md-input-has-value label { - color: $SCKnavy; + color: $SCK2-darkGrey; } //.md-block{ @@ -97,10 +97,10 @@ } .selection { - background-color: $msNavy; + background-color: $SCK2-darkGrey; .md-text.ng-binding { font-size: 42px; - color: $msGrey; + color: $SCK2-darkGrey; //.selectMenu{ // height: 80px !important; @@ -118,7 +118,7 @@ } md-content { - background-color: $msNavy !important; + background-color: $SCK2-darkGrey !important; } form{ diff --git a/src/app/styles/_handshake.scss b/src/app/styles/_handshake.scss index 896c7f1..ad6a22e 100644 --- a/src/app/styles/_handshake.scss +++ b/src/app/styles/_handshake.scss @@ -1,6 +1,6 @@ $handshakeBarHeight: 200px; -$handshakeBarBackgroundColor: rgba(79,164,220, .2); -$handshakeBarColor: $msGreen; +$handshakeBarBackgroundColor: $SCK2-lightGrey; +$handshakeBarColor: $SCK2-blue; .backgroundProgressLoader { position: absolute; diff --git a/src/app/styles/_media_queries.scss b/src/app/styles/_media_queries.scss index e69de29..f7693c7 100644 --- a/src/app/styles/_media_queries.scss +++ b/src/app/styles/_media_queries.scss @@ -0,0 +1,9 @@ +@media +(-webkit-max-device-pixel-ratio: 1.25), +(max-resolution: 120dpi){ + /* Retina-specific stuff here */ + body { + font: 80% $font; + } +} +// https://css-tricks.com/snippets/css/retina-display-media-query/ \ No newline at end of file diff --git a/src/app/styles/_modal.scss b/src/app/styles/_modal.scss index 9ed9480..911c4ba 100644 --- a/src/app/styles/_modal.scss +++ b/src/app/styles/_modal.scss @@ -52,7 +52,7 @@ #modalContent { z-index: 3; #modalBox{ - border-radius: $divRadius; + width: 1000px; min-height: 200px; @media screen and (min-width: $break-sm) { @@ -65,7 +65,7 @@ h2 { text-align: left; - color: $SCKnavy; + color: $SCK2-lightGrey; @media screen and (max-width: 960px) { text-align: center; } @@ -78,7 +78,7 @@ } } &.red{ - background-color: $msRed; + background-color: $SCK2-red; #partImage{ width: 200px; height: 200px; @@ -92,7 +92,7 @@ } } &.green{ - background-color: $msGreen; + background-color: $SCK2-blue; #partImage { @media screen and (min-width: $break-sm) { @@ -128,10 +128,10 @@ padding: 15px 20px; font-size: 26px !important; - background: $SCKblue; + background: $SCK2-lightGrey; border-radius: 40px; - border: 5px solid $SCKblue; - color: $SCKwhite; + border: 5px solid $SCK2-lightGrey; + color: $SCK2-darkGrey; } } } diff --git a/src/app/styles/_navigation.scss b/src/app/styles/_navigation.scss index c32a572..db5dbaa 100644 --- a/src/app/styles/_navigation.scss +++ b/src/app/styles/_navigation.scss @@ -1,11 +1,11 @@ @keyframes segueError { 0%{ - border: 5px solid $SCKwhite; + border: 2px solid $SCKwhite; color: $SCKwhite; background-color: $msNavy; } 1% { - border: 5px solid $msRed; + border: 2px solid $msRed; } 50% { background-color: $msRed; @@ -18,7 +18,7 @@ animation-timing-function: ease-in; color: white; background-color: $msRed; - border: 5px solid $msRed; + border: 2px solid $msRed; } } @@ -28,7 +28,7 @@ // 1% { // animation-timing-function: ease-out; // background-color: $msRed; -// border: 5px solid $msRed; +// border: 2px solid $msRed; // } // 50% { // color: $msRed; @@ -38,7 +38,7 @@ // color: rgba(0, 0, 0, 0); // } // 100% { -// border: 5px solid $msNavy2; +// border: 2px solid $msNavy2; // color: white; // } //} @@ -109,11 +109,12 @@ $button-height: $segueWrapperHeight / 2.75; .segueButton { height: $button-height; width: auto; - padding: 5px 15px; + padding: 5px 40px; border-radius: 40px; - color: $SCKblue; + color: $SCK2-blue; background: $SCKwhite; - border-color: $SCKblue; + border-color: $SCK2-blue; + text-transform: capitalize; #segueContent { overflow: hidden; @@ -121,18 +122,17 @@ $button-height: $segueWrapperHeight / 2.75; font-weight: 500 !important; font-size: 20px; position: relative; - top: -14px; - padding-left: 5px; - text-transform: uppercase; + top: -12px; + //padding-left: 5px; } #nextSVG { position: relative; - top: -13px; + top: -12px; left: 3px; display: inline; padding-right: 10px; path { - fill: $SCKblue; + fill: $SCK2-blue; } } #closeSVG{ @@ -143,19 +143,25 @@ $button-height: $segueWrapperHeight / 2.75; width: 0; } &.ready { - border: 5px solid $msGreen; + border: 2px solid $SCK2-blue; &:hover{ - background-color: $msGreen; - color: $SCKwhite; + background-color: $SCK2-lightGrey; + color: $SCK2-blue; #nextSVG { path { - fill: $SCKwhite; + fill: $SCK2-blue; } } } } &.blocked { - border: 5px solid $msWhite; + border: 2px solid $SCK2-darkGrey; + color: $SCK2-darkGrey; + #nextSVG { + path { + fill: $SCK2-darkGrey; + } + } } &.hide { display: none; @@ -166,7 +172,7 @@ $button-height: $segueWrapperHeight / 2.75; animation-name: segueError; animation-duration: $errorTimer; animation-fill-mode: forwards; - border: 5px solid $msRed; + border: 2px solid $SCK2-red; #segueContent{ -webkit-animation-name: updateContent; @@ -194,11 +200,10 @@ $button-height: $segueWrapperHeight / 2.75; .errorButton{ height: $button-height; width: 0; - text-transform: uppercase; - background: $SCKgrey2; + background: $SCK2-lightGrey; border-radius: 40px; - color: $SCKnavy2; - border: 5px solid $SCKgrey2; + color: $SCK2-darkGrey; + border: 2px solid $SCK2-lightGrey; opacity: 0; font-size: 20px; &.show{ @@ -224,17 +229,16 @@ $button-height: $segueWrapperHeight / 2.75; .backButton { height: $button-height; width: $button-height; - text-transform: uppercase; background: none; border-radius: 40px; color: $msNavy2; - border: 5px solid $msNavy2; + border: 2px solid $msNavy2; opacity: .12; svg { position: relative; } tspan { - fill: $SCKblue; + fill: $SCK2-blue; } &.blocked { tspan { @@ -251,11 +255,10 @@ $button-height: $segueWrapperHeight / 2.75; .forwardButton { height: $button-height; width: $button-height; - text-transform: uppercase; background: none; border-radius: 40px; color: $msNavy2; - border: 5px solid $msNavy2; + border: 2px solid $msNavy2; opacity: .12; svg { position: relative; @@ -263,7 +266,7 @@ $button-height: $segueWrapperHeight / 2.75; left: 8px; } tspan { - fill: $SCKblue; + fill: $SCK2-blue; } &.blocked { tspan { diff --git a/src/app/styles/_progress.scss b/src/app/styles/_progress.scss index 0d859f5..213ac3c 100644 --- a/src/app/styles/_progress.scss +++ b/src/app/styles/_progress.scss @@ -1,6 +1,6 @@ $barHeight: 15px; -$barBackgroundColor: rgba(56,206,243, .2); -$barColor: rgb(56,206,243); +$barBackgroundColor: white; +$barColor: $SCK2-yellow; $labelMargin: 50px; #progress{ @@ -26,22 +26,24 @@ $labelMargin: 50px; -ms-transition: color 0.75s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: color 0.75s cubic-bezier(0.86, 0, 0.07, 1); transition: color 0.75s cubic-bezier(0.86, 0, 0.07, 1); - color: $SCKnavy; + color: $SCK2-darkGrey; } #left{ margin-left: $labelMargin; text-align: left; + text-transform: uppercase; } #right{ margin-right: $labelMargin; text-align: right; + text-transform: uppercase; } } &:hover, &.blue{ #progressLabels{ p { - color: $SCKnavy2; + color: $SCK2-darkGrey; } } } diff --git a/src/app/styles/_tags.scss b/src/app/styles/_tags.scss index cf78663..c8743ad 100644 --- a/src/app/styles/_tags.scss +++ b/src/app/styles/_tags.scss @@ -1,11 +1,11 @@ .tag { font: 100% $font !important; padding: 10px 15px; - color: $msWhite; + color: $SCK2-darkGrey; height: 60px; line-height: 60px; - background-color: $SCKnavy; + background-color: $SCK2-lightGrey; text-transform: lowercase; border: none; border-radius: 30px; @@ -25,7 +25,15 @@ margin-right: 10px; } + tspan { + fill: $SCK2-darkGrey; + } + &.active, &:hover { - background-color: $SCKblue; + background-color: $SCK2-blue; + color: $SCK2-lightGrey; + tspan { + fill: $SCK2-lightGrey; + } } } \ No newline at end of file diff --git a/src/app/styles/_tooltip.scss b/src/app/styles/_tooltip.scss index b536f6b..005a2ef 100644 --- a/src/app/styles/_tooltip.scss +++ b/src/app/styles/_tooltip.scss @@ -151,7 +151,7 @@ /* Tooltip content*/ .tooltip-text { - font-size: 34px; + font-size: 2.125em; line-height: 170px; display: block; color: #fff; diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss index ffdab0a..88f6025 100644 --- a/src/app/styles/main.scss +++ b/src/app/styles/main.scss @@ -1,7 +1,11 @@ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext); +@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext); +@import url(https://fonts.googleapis.com/css?family=Kanit:300,400,700,800,900&subset=latin-ext); /** -- CONSTANTS -- **/ $font: 'Roboto Condensed', sans-serif; +$font2: 'Kanit', sans-serif; + $divRadius: 15px; $errorTimer: .5s; @@ -25,86 +29,92 @@ $break-sm: 960px; @import "smart_citizen"; @import "tags"; @import "handshake"; -@import "media_queries"; @import "doorbell"; @import "_loader.scss"; +/* MEDIA QUERY IS AT END OF THIS FILE */ + html, body { margin: 0; padding: 0; } canvas {vertical-align: top; z-index: 0} body { height:auto; overflow:auto; - font: 100% $font !important; + font: 100% $font; background-color: $SCKwhite !important; display: flex; min-height: 100vh; + border: 10px $SCK2-darkGrey solid; h1, h2, h3, h4, h6, p { text-align: center; } h1{ + font: 100% $font2; font-weight: 900; - font-size: 72px; - color: $SCKblue; + font-size: 4.5em; + color: $SCK2-darkGrey; line-height: 70px; - text-transform: uppercase; @media screen and (max-width: 450px) { - font-size: 52px; + font-size: 3.25em; line-height: 46px; } } h2{ - font-weight: 400; - font-size: 45px; //fallback - color: $SCKblack; + font: 100% $font2; + font-weight: 800; + font-size: 2.875em; + color: $SCK2-darkGrey; + text-transform: uppercase; @media screen and (max-width: 450px) { - font-size: 32px; + font-size: 2em; } } h3{ font-weight: 400; - font-size: 30px; - color: $SCKgrey; + font-size: 1.875em; + color: $SCK2-darkGrey; @media screen and (max-width: 450px) { - font-size: 22px; + font-size: 1.375em; } em{ font-style: normal !important; &.green{ color: $msGreen; - } &.orange{ color: $msOrange; } + &.blue{ + color: $SCK2-blue; + } } } h4, p{ font-weight: 400; - font-size: 28px; - color: $SCKgrey; + font-size: 1.75em; + color: $SCK2-darkGrey; @media screen and (max-width: 450px) { - font-size: 20px; + font-size: 1.75em; } } h5{ font: 100% $font; font-weight: 400; - font-size: 28px; + font-size: 1.65em; color: $msWhite; @media screen and (max-width: 450px) { - font-size: 20px; + font-size: 1.15em; } } h6{ font-weight: 400; - font-size: 28px; + font-size: 1.75em; color: $msGrey; } button{ font-weight: 500; - font-size: 24px; + font-size: 1.5em; color: white; text-transform: capitalize; &:focus { @@ -130,7 +140,7 @@ body { margin: 0 auto; padding: 0 25px; max-width: 1150px; - overflow: hidden; + overflow: visible; &.ng-enter { -webkit-animation:slideInRight 0.5s both ease; @@ -146,9 +156,9 @@ body { .selectionRow { .selection { height: 400px; - background: $SCKnavy2; - border-radius: $divRadius; - border: 5px solid $SCKblue; + background: $SCK2-lightGrey; + border: 5px $SCK2-darkGrey solid; + &.nested{ width: 300px; @@ -197,7 +207,7 @@ body { transition: top 0.2s; top: 0; tspan { - fill: $SCKnavy2; + fill: $SCK2-darkGrey; } .shadow{ height: 0; @@ -220,11 +230,11 @@ body { } } .selectionText { - color: $SCKgrey2; + color: $SCK2-darkGrey; } } &:hover, &:active, &.active { - background-color: $SCKblue; + background-color: $SCK2-darkGrey; .selectionIcon, .selectionImage { position:relative; top: -10px; @@ -236,7 +246,7 @@ body { } } .selectionText { - color: $msWhite; + color: $SCK2-lightGrey; } } &.active{ @@ -301,13 +311,14 @@ body { width: auto; margin: 15px auto; padding: 0 15px; + padding-bottom: 10px; text-transform: uppercase; - background: $SCKblue; + background: $msBlack; border-radius: 40px; - border: 5px solid $SCKblue; + border: 5px solid $msBlack; color: $SCKwhite; - font-size: 20px; + font-size: 1.25em; svg{ margin: 0 10px; position: relative; @@ -315,7 +326,7 @@ body { } @media screen and (max-width: 450px) { - font-size: 14px; + font-size: .875em; padding-top: 0; line-height: 30px; svg{ @@ -330,9 +341,9 @@ body { padding-right: 20px; font: 100% 'Roboto Condensed', sans-serif !important; - font-size: 24px !important; + font-size: 1.5em !important; @media screen and (max-width: 450px) { - font-size: 20px !important; + font-size: 1.25em !important; padding: 0 5px; svg{ top: 7px; @@ -342,12 +353,12 @@ body { } .promptedText{ - background-color: $SCKblue; + background-color: $SCK2-lightGrey; border-radius: $divRadius * 2; padding: 15px 45px; //max-width: 400px; h2{ - color: $SCKnavy; + color: $SCK2-darkGrey; } } @@ -368,3 +379,5 @@ body { } } } + +@import "media_queries"; \ No newline at end of file diff --git a/src/app/wizard/basic2.html b/src/app/wizard/basic2.html index 203979f..100a16a 100644 --- a/src/app/wizard/basic2.html +++ b/src/app/wizard/basic2.html @@ -1,5 +1,5 @@