Initial commit.

app/styles/_variables.scss

@@ -0,0 +1,225 @@
+$grid-gutter-width: 30px;
+
+// Grays
+$gray-darker: #333333;
+$gray-dark: #444444;
+$gray: #666666;
+$gray-light: #D6D6D6;
+$gray-lighter: #EDEDED;
+
+
+// Brand Colors
+$brand-primary: #E5287A;
+$brand-success: #449D44;
+$brand-warning: #FDBC41;
+$brand-danger: #C9302C;
+$brand-info: #009EE0;
+
+
+// Scaffolding
+$body-bg: $gray-lighter;
+$text-color: $gray-dark;
+$link-color: $brand-primary;
+$link-hover-color: $brand-primary;
+$padding-base-vertical: 6px;
+$padding-base-horizontal: 12px;
+$padding-large-vertical: 10px;
+$padding-large-horizontal: 16px;
+$padding-small-vertical: 5px;
+$padding-small-horizontal: 10px;
+$border-radius-base: 0;
+$border-radius-large: 0;
+$border-radius-small: 0;
+$line-height-large: 1.33;
+$line-height-small: 1.5;
+$component-active-bg: $brand-info;
+$input-border-focus: darken($brand-warning, 10%);
+
+
+// Typography
+$font-family-sans-serif: Open Sans;
+$font-family-serif: PT Serif;
+$font-family-monospace: Monaco;
+$font-family-base: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-size-base: 14px;
+$font-size-large: ceil($font-size-base * 1.25);
+$font-size-small: ceil($font-size-base * 0.85);
+$line-height-base: 1.428571429;
+$line-height-computed: floor($font-size-base * $line-height-base);
+$headings-font-family: $font-family-base;
+$headings-font-weight: normal;
+$headings-line-height: 1.1;
+
+
+// Buttons
+$btn-font-weight: normal;
+$btn-default-color: $gray-dark;
+$btn-default-bg: $gray-light;
+$btn-default-border: darken($btn-default-bg, 10%);
+$btn-primary-color: #FFFFFF;
+$btn-primary-bg: darken($brand-primary, 10%);
+$btn-primary-border: darken($btn-primary-bg, 10%);
+$btn-success-color: #FFFFFF;
+$btn-success-bg: $brand-success;
+$btn-success-border: darken($btn-success-bg, 10%);
+$btn-warning-color: #FFFFFF;
+$btn-warning-bg: $brand-warning;
+$btn-warning-border: darken($btn-warning-bg, 10%);
+$btn-danger-color: #FFFFFF;
+$btn-danger-bg: $brand-danger;
+$btn-danger-border: darken($btn-danger-bg, 10%);
+$btn-info-color: #FFFFFF;
+$btn-info-bg: $brand-info;
+$btn-info-border: darken($btn-info-bg, 10%);
+$btn-link-disabled-color: #FFFFFF;
+
+
+// Dropdowns
+$dropdown-bg: #FFFFFF;
+$dropdown-border: $gray-light;
+$dropdown-divider-bg: $gray-light;
+$dropdown-link-active-color: #FFFFFF;
+$dropdown-link-active-bg: $component-active-bg;
+$dropdown-link-color: $gray-dark;
+$dropdown-link-hover-color: #FFFFFF;
+$dropdown-link-hover-bg: $dropdown-link-active-bg;
+$dropdown-link-disabled-color: #FFFFFF;
+$dropdown-header-color: $gray-light;
+$dropdown-caret-color: $gray-dark;
+
+
+// Forms
+$input-bg: #FFFFFF;
+$input-bg-disabled: $gray-lighter;
+$input-color: $gray-dark;
+$input-border: $gray-light;
+$input-border-radius: $border-radius-base;
+$input-color-placeholder: $gray;
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);
+$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
+$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
+$legend-color: $gray-dark;
+$legend-border-color: $gray-light;
+$input-group-addon-bg: $gray-light;
+$input-group-addon-border-color: $input-border;
+
+
+// Table
+$table-cell-padding: 8px;
+$table-condensed-cell-padding: 5px;
+$table-cell-padding: 8px;
+$table-condensed-cell-padding: 5px;
+$table-bg: transparent;
+$table-bg-accent: #FFFFFF;
+$table-bg-hover: lighten($gray-lighter, 10%);
+$table-bg-active: $table-bg-hover;
+$table-border-color: $gray-light;
+
+
+// Navbar
+$navbar-height: 50px;
+$navbar-margin-bottom: $line-height-computed;
+$navbar-default-color: #FFFFFF;
+$navbar-default-bg: $gray-dark;
+$navbar-default-border: $navbar-default-bg;
+$navbar-border-radius: $border-radius-base;
+$navbar-padding-horizontal: floor($grid-gutter-width / 2);
+$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
+$navbar-default-link-color: #FFFFFF;
+$navbar-default-link-hover-color: $brand-warning;
+$navbar-default-link-hover-bg: transparent;
+$navbar-default-link-active-color: $brand-warning;
+$navbar-default-link-active-bg: transparent;
+$navbar-default-link-disabled-color:  #ccc;
+$navbar-default-link-disabled-bg: transparent;
+$navbar-default-brand-color: $navbar-default-link-color;
+$navbar-default-brand-hover-color: $navbar-default-brand-color;
+$navbar-default-brand-hover-bg: transparent;
+$navbar-default-toggle-hover-bg: transparent;
+$navbar-default-toggle-icon-bar-bg: transparent;
+$navbar-default-toggle-border-color: transparent;
+
+
+// Navs Tabs
+$nav-link-padding: 10px 15px;
+$nav-link-hover-bg: transparent;
+$nav-disabled-link-color: $gray;
+$nav-disabled-link-hover-color: $gray;
+$nav-tabs-border-color: $gray-light;
+$nav-tabs-link-hover-border-color: $gray-light;
+$nav-tabs-active-link-hover-bg: transparent;
+$nav-tabs-active-link-hover-color: $gray-darker;
+$nav-tabs-active-link-hover-border-color: $gray-light;
+$nav-tabs-justified-link-border-color: $gray-light;
+$nav-tabs-justified-active-link-border-color: $gray-light;
+$nav-pills-active-link-hover-bg: $gray-dark;
+$nav-pills-active-link-hover-color: #FFFFFF;
+
+
+// Jumbotron
+$jumbotron-padding: 30px;
+$jumbotron-color: inherit;
+$jumbotron-bg: transparent;
+
+
+// Pagination
+$pagination-bg: #FFFFFF;
+$pagination-border: $gray-light;
+$pagination-hover-bg: $gray-lighter;
+$pagination-active-bg: $gray;
+$pagination-active-color: #FFFFFF;
+$pagination-disabled-color: $gray;
+$pager-border-radius: 0;
+$pager-disabled-color: $gray;
+
+
+// Form States
+$state-warning-text: darken($brand-warning, 10%);
+$state-warning-bg: lighten($brand-warning, 30%);
+$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%);
+$state-danger-text: darken($brand-danger, 10%);
+$state-danger-bg: lighten($brand-danger, 30%);
+$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%);
+$state-success-text: darken($brand-success, 10%);
+$state-success-bg: lighten($brand-success, 30%);
+$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%);
+$state-info-text: darken($brand-info, 20%);
+$state-info-bg: lighten($brand-info, 30%);
+$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
+
+
+// ToolTip
+$tooltip-max-width: 200px;
+$tooltip-color: #FFFFFF;
+$tooltip-bg: $gray-darker;
+$tooltip-arrow-width: 5px;
+$tooltip-arrow-color: $tooltip-bg;
+
+
+// Popover
+$popover-bg: #FFFFFF;
+$popover-max-width: 276px;
+$popover-border-color: $gray-light;
+$popover-fallback-border-color: $gray-light;
+$popover-title-bg: darken($popover-bg, 3%);
+$popover-arrow-width: 10px;
+$popover-arrow-color: $popover-bg;
+$popover-arrow-outer-width: ($popover-arrow-width + 1);
+$popover-arrow-outer-color: $popover-border-color;
+$popover-arrow-outer-fallback-color: $popover-fallback-border-color;
+
+
+// List Group
+$list-group-bg: #FFFFFF;
+$list-group-border: $gray-light;
+$list-group-border-radius: $border-radius-base;
+$list-group-hover-bg: $gray-light;
+$list-group-active-color: #FFFFFF;
+$list-group-active-bg: $gray-dark;
+$list-group-active-border: $list-group-active-bg;
+$list-group-link-color: $gray-dark;
+$list-group-link-heading-color: $gray-darker;
+
+
+// Font Awesome
+$fa-font-path: '/fonts';

app/styles/main.scss

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+@import "_variables";
+
+@import "../bower_components/sass-bootstrap/lib/bootstrap";
+@import "../bower_components/font-awesome/scss/font-awesome";
+
+@import "views/_main";
+@import "views/_newNodeForm";
+@import "views/_updateNodeForm";
+@import "views/directives/_help";
+@import "views/directives/_nodeForm";
+@import "views/directives/_nodeSaved";
+@import "views/directives/_tokenForm";
+
+body {
+    padding-bottom: 40px;
+    text-align: justify;
+}
+
+input {
+    @extend .form-control;
+}
+
+label {
+    @extend .control-label;
+
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+button.cancel {
+    @extend .btn, .btn-default;
+}
+
+a[target="_blank"]:after {
+    @extend .fa;
+    content: "\f08e";
+    vertical-align: 0.3em;
+    font-size: 0.8em;
+    margin-left: 0.1em;
+}

app/styles/views/_main.scss

@@ -0,0 +1,35 @@
+.welcome {
+    @extend .jumbotron, .container;
+
+    .select-action {
+        @extend .row;
+
+        margin-top: 25px;
+
+        .new-node, .update-node {
+            @extend .col-md-5;
+
+            button {
+                @extend .btn, .btn-lg, .btn-block;
+            }
+        }
+
+        .new-node {
+            button {
+                @extend .btn-info;
+            }
+        }
+
+        .update-node {
+            button {
+                @extend .btn-primary;
+            }
+        }
+
+        .or {
+            @extend .col-md-2;
+
+            text-align: center;
+        }
+    }
+}

app/styles/views/_newNodeForm.scss

@@ -0,0 +1,7 @@
+.new-node-form {
+    @extend .container;
+}
+
+.node-created {
+    @extend .jumbotron, .container;
+}

app/styles/views/_updateNodeForm.scss

@@ -0,0 +1,7 @@
+.update-node-form {
+    @extend .container;
+}
+
+.node-updated {
+    @extend .jumbotron, .container;
+}

app/styles/views/directives/_help.scss

@@ -0,0 +1,14 @@
+f-help {
+    .help-icon {
+        @extend .fa, .fa-question-circle;
+
+        cursor: pointer;
+        font-size: $font-size-base + 2;
+        margin-left: 5px;
+        color: $brand-info;
+
+        &:hover {
+            color: darken($brand-info, 20%);
+        }
+    }
+}

app/styles/views/directives/_nodeForm.scss

@@ -0,0 +1,77 @@
+f-node-form {
+    h3 {
+        margin-top: 10px;
+    }
+
+    .main-error {
+        @extend .alert, .alert-danger;
+    }
+
+    .node-data, .contact-data, .node-position {
+        @extend .well;
+    }
+
+    .hostname, .key, .mac, .nickname, .email, .coords {
+        @extend .form-group;
+
+        .feedback {
+            @extend .help-block;
+            color: $state-danger-text;
+        }
+    }
+
+    .hostname, .mac, .nickname, .email {
+        label::after {
+            content: '*';
+            font-size: $font-size-small;
+            vertical-align: 0.2em;
+        }
+    }
+
+    .coords input.has-coords {
+        padding-right: 25px;
+    }
+
+    .reset-coords {
+        @extend .fa, .fa-times;
+
+        position: relative;
+        float: right;
+
+        top: -25px;
+        right: 8px;
+
+        cursor: pointer;
+        color: $gray;
+    }
+
+    .map {
+        width: 100%;
+        height: 0;
+        padding-bottom: 66%;
+        margin-top: 5px;
+        margin-bottom: 20px;
+    }
+
+    .buttons {
+        @extend .form-group, .clearfix;
+
+        button {
+            @extend .pull-right;
+        }
+    }
+
+    .save {
+        @extend .btn;
+
+        margin-left: 5px;
+    }
+
+    &.new-node .save {
+        @extend .btn-info;
+    }
+
+    &.update-node .save {
+        @extend .btn-primary;
+    }
+}

app/styles/views/directives/_nodeSaved.scss

@@ -0,0 +1,24 @@
+f-node-saved {
+    .summary, .actions {
+        text-align: center;
+    }
+
+    .summary {
+        .token {
+            @extend .well;
+
+            border: 3px dashed $gray;
+            font-family: monospace;
+            font-size: 32px;
+        }
+
+        margin: {
+            top: 30px;
+            bottom: 30px;
+        }
+    }
+
+    .back-button {
+        @extend .btn, .btn-lg, .btn-info;
+    }
+}

app/styles/views/directives/_tokenForm.scss

@@ -0,0 +1,28 @@
+f-token-form {
+    .main-error {
+        @extend .alert, .alert-danger;
+    }
+
+    .token {
+        @extend .form-group;
+    }
+
+    .feedback {
+        @extend .help-block;
+        color: $state-danger-text;
+    }
+
+    .submit {
+        @extend .btn, .btn-primary;
+
+        margin-left: 5px;
+    }
+
+    .buttons {
+        @extend .clearfix;
+
+        button {
+            @extend .pull-right;
+        }
+    }
+}