Generate petclinic.css from less

springboot-petclinic-client/gulpfile.js

@@ -1,6 +1,7 @@
 var gulp = require('gulp');
 var cleanCSS = require('gulp-clean-css');
 var uglify = require('gulp-uglify');
+var less = require('gulp-less');
 
 var paths = {
     "css"    : "src/css/*",
@@ -8,6 +9,7 @@ var paths = {
     "images" : "src/images/*",
     "html"   : "src/scripts/**/*.html",
     "js"     : "src/scripts/**/*.js",
+    "less"   : "src/less/*",
     "dist"   : "target/dist/"
 };
 
@@ -23,6 +25,12 @@ gulp.task('minify-js', function() {
         .pipe(gulp.dest(paths.dist + 'scripts/'));
 });
 
+gulp.task('less', function () {
+    return gulp.src(paths.less)
+        .pipe(less())
+        .pipe(gulp.dest(paths.dist + 'css/'));
+});
+
 gulp.task('copy-fonts', function() {
     return gulp.src(paths.fonts)
         .pipe(gulp.dest(paths.dist + 'fonts/'))
@@ -38,5 +46,5 @@ gulp.task('copy-images', function() {
         .pipe(gulp.dest(paths.dist + 'images/'))
 });
 
-gulp.task('default', ['minify-css', 'minify-js', 'copy-fonts',
+gulp.task('default', ['minify-css', 'minify-js', 'less',
-          'copy-html', 'copy-images'], function() {});
+          'copy-fonts', 'copy-html', 'copy-images'], function() {});

springboot-petclinic-client/package.json

@@ -5,6 +5,7 @@
     "bower": "^1.7.9",
     "gulp": "^3.9.1",
     "gulp-clean-css": "^2.0.6",
-    "gulp-uglify": "^1.5.3"
+    "gulp-uglify": "^1.5.3",
+    "gulp-less": "^3.1.0"
   }
 }

springboot-petclinic-client/src/css/README.md

@@ -0,0 +1,2 @@
+The src/css/petclinic.css file improves development experience.
+Developers don't have to build the project and generate the target/dist/css/petclinic.css from less files.

springboot-petclinic-client/src/less/header.less

@@ -0,0 +1,73 @@
+.navbar {
+  border-top: 4px solid #6db33f;
+  background-color: #34302d;
+  margin-bottom: 0px;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+.navbar a.navbar-brand {
+  background: url("../images/spring-logo-dataflow.png") -1px -1px no-repeat;
+  margin: 12px 0 6px;
+  width: 229px;
+  height: 46px;
+  display: inline-block;
+  text-decoration: none;
+  padding: 0;
+}
+
+.navbar a.navbar-brand span {
+  display: block;
+  width: 229px;
+  height: 46px;
+  background: url("../images/spring-logo-dataflow.png") -1px -48px no-repeat;
+  opacity: 0;
+  -moz-transition: opacity 0.12s ease-in-out;
+  -webkit-transition: opacity 0.12s ease-in-out;
+  -o-transition: opacity 0.12s ease-in-out;
+}
+
+.navbar a:hover.navbar-brand span {
+  opacity: 1;
+}
+
+.navbar li > a, .navbar-text {
+  font-family: "montserratregular", sans-serif;
+  text-shadow: none;
+  font-size: 14px;
+
+/* line-height: 14px; */
+  padding: 28px 20px;
+  transition: all 0.15s;
+  -webkit-transition: all 0.15s;
+  -moz-transition: all 0.15s;
+  -o-transition: all 0.15s;
+  -ms-transition: all 0.15s;
+}
+
+.navbar li > a {
+  text-transform: uppercase;
+}
+
+.navbar .navbar-text {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.navbar li:hover > a {
+  color: #eeeeee;
+  background-color: #6db33f;
+}
+
+.navbar-toggle {
+  border-width: 0;
+
+  .icon-bar + .icon-bar {
+    margin-top: 3px;
+  }
+  .icon-bar {
+    width: 19px;
+    height: 3px;
+  }
+
+}

springboot-petclinic-client/src/less/petclinic.less

@@ -0,0 +1,252 @@
+/*
+ * Copyright 2016 the original author or authors.
+ *
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import "../../bower_components/bootstrap/less/bootstrap.less";
+
+@spring-green:      #6db33f;
+@spring-dark-green: #5fa134;
+@spring-brown:      #34302D;
+@spring-grey:       #838789;
+@spring-light-grey: #f1f1f1;
+
+@body-bg:                           @spring-light-grey;
+@text-color:                        @spring-brown;
+@link-color:                        @spring-dark-green;
+@link-hover-color:                  @spring-dark-green;
+
+@navbar-default-link-color:         @spring-light-grey;
+@navbar-default-link-active-color:  @spring-light-grey;
+@navbar-default-link-hover-color:   @spring-light-grey;
+@navbar-default-link-hover-bg:      @spring-green;
+@navbar-default-toggle-icon-bar-bg: @spring-light-grey;
+@navbar-default-toggle-hover-bg:    transparent;
+@navbar-default-link-active-bg:     @spring-green;
+
+@border-radius-base:             0;
+@border-radius-large:            0;
+@border-radius-small:            0;
+
+@btn-default-color:              @spring-light-grey;
+@btn-default-bg:                 @spring-brown;
+@btn-default-border:             @spring-green;
+
+@icon-font-path: "../../bootstrap/fonts/";
+
+@nav-tabs-active-link-hover-color:        @spring-light-grey;
+@nav-tabs-active-link-hover-bg:           @spring-brown;
+@nav-tabs-active-link-hover-border-color: @spring-brown;
+@nav-tabs-border-color:                   @spring-brown;
+
+@pagination-active-bg:                    @spring-brown;
+@pagination-active-border:                @spring-green;
+@table-border-color:                      @spring-brown;
+
+@import "typography.less";
+@import "header.less";
+
+.table > thead > tr > th {
+  background-color: lighten(@spring-brown, 3%);
+  color: @spring-light-grey;
+}
+
+.table-filter {
+  background-color: @spring-brown;
+  padding: 9px 12px;
+}
+
+.nav > li > a {
+  color: @spring-grey;
+}
+
+.btn-default {
+  border-width: 2px;
+  transition: border 0.15s;
+  -webkit-transition: border 0.15s;
+  -moz-transition: border 0.15s;
+  -o-transition: border 0.15s;
+  -ms-transition: border 0.15s;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open .dropdown-toggle& {
+    background-color: @spring-brown;
+    border-color: @spring-brown;
+  }
+}
+
+
+.container .text-muted {
+  margin: 20px 0;
+}
+
+code {
+  font-size: 80%;
+}
+
+.xd-container {
+  margin-top: 40px;
+  margin-bottom: 100px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+h1 {
+  margin-bottom: 15px
+}
+
+.index-page--subtitle {
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 0 30px;
+}
+
+.form-horizontal button.btn-inverse {
+  margin-left: 32px;
+}
+
+#job-params-modal .modal-dialog {
+  width: 90%;
+  margin-left:auto;
+  margin-right:auto;
+}
+
+[ng-cloak].splash {
+  display: block !important;
+}
+[ng-cloak] {
+  display: none;
+}
+
+.splash {
+  background: @spring-green;
+  color: @spring-brown;
+  display: none;
+}
+
+.error-page {
+  margin-top: 100px;
+  text-align: center;
+}
+
+.error-page .error-title {
+  font-size: 24px;
+  line-height: 24px;
+  margin: 30px 0 0;
+}
+
+table td {
+  vertical-align: middle;
+}
+
+table td .progress {
+  margin-bottom: 0;
+}
+
+table td.action-column {
+  width: 1px;
+}
+
+.help-block {
+  color: lighten(@text-color, 50%); // lighten the text some for contrast
+}
+
+.xd-containers {
+  font-size: 15px;
+}
+
+.cluster-view > table td {
+  vertical-align: top;
+}
+
+.cluster-view .label, .cluster-view .column-block {
+  display: block;
+}
+
+.cluster-view .input-group-addon {
+  width: 0%;
+}
+
+.cluster-view {
+  margin-bottom: 0;
+}
+
+.deployment-status-deployed {
+  .label-success;
+}
+
+.deployment-status-incomplete {
+  .label-warning;
+}
+
+.deployment-status-failed {
+  .label-danger;
+}
+
+.deployment-status-deploying {
+  .label-info
+}
+.deployment-status-na {
+}
+
+.container-details-table th {
+  background-color: lighten(@spring-brown, 3%);
+  color: @spring-light-grey;
+}
+
+.status-help-content-table td {
+  color: @spring-brown;
+}
+
+.alert-success {
+  .alert-variant(fade(@alert-success-bg, 70%); @alert-success-border; @alert-success-text);
+}
+.alert-info {
+  .alert-variant(fade(@alert-info-bg, 70%); @alert-info-border; @alert-info-text);
+}
+.alert-warning {
+  .alert-variant(fade(@alert-warning-bg, 70%); @alert-warning-border; @alert-warning-text);
+}
+.alert-danger {
+  .alert-variant(fade(@alert-danger-bg, 70%); @alert-danger-border; @alert-danger-text);
+}
+
+.myspinner {
+  animation-name: spinner;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+
+  -webkit-transform-origin: 49% 50%;
+  -webkit-animation-name: spinner;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+@keyframes "spinner" {
+  from { transform: rotate( 0deg );   }
+  to   { transform: rotate( 360deg ); }
+}
+
+@-webkit-keyframes "spinner" {
+  from { -webkit-transform: rotate( 0deg ); }
+  to   { -webkit-transform: rotate( 360deg ); }
+}
+
+hr {
+  border-top: 1px dotted @spring-brown;
+}
+
+@import "responsive.less";

springboot-petclinic-client/src/less/responsive.less

@@ -0,0 +1,41 @@
+@media (max-width: 768px) {
+  .navbar-toggle {
+    position:absolute;
+    z-index: 9999;
+    left:0px;
+  top:0px;
+  }
+
+  .navbar a.navbar-brand {
+    display: block;
+    margin: 0 auto 0 auto;
+    width: 148px;
+    height: 50px;
+    float: none;
+    background: url("../images/spring-logo-dataflow-mobile.png") 0 center no-repeat;
+  }
+
+  .homepage-billboard .homepage-subtitle {
+    font-size: 21px;
+    line-height: 21px;
+  }
+
+  .navbar a.navbar-brand span {
+    display: none;
+  }
+
+  .navbar {
+    border-top-width: 0;
+  }
+
+  .xd-container {
+    margin-top: 20px;
+    margin-bottom: 30px;
+  }
+
+  .index-page--subtitle {
+    margin-top: 10px;
+    margin-bottom: 30px;
+  }
+
+}

springboot-petclinic-client/src/less/typography.less

@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'varela_roundregular';
+
+  src: url('../fonts/varela_round-webfont.eot');
+  src: url('../fonts/varela_round-webfont.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/varela_round-webfont.woff') format('woff'),
+       url('../fonts/varela_round-webfont.ttf') format('truetype'),
+       url('../fonts/varela_round-webfont.svg#varela_roundregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'montserratregular';
+  src: url('../fonts/montserrat-webfont.eot');
+  src: url('../fonts/montserrat-webfont.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/montserrat-webfont.woff') format('woff'),
+       url('../fonts/montserrat-webfont.ttf') format('truetype'),
+       url('../fonts/montserrat-webfont.svg#montserratregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body, h1, h2, h3, p, input {
+  margin: 0;
+  font-weight: 400;
+  font-family: "varela_roundregular", sans-serif;
+  color: #34302d;
+}
+
+h1 {
+  font-size: 24px;
+  line-height: 30px;
+  font-family: "montserratregular", sans-serif;
+}
+
+h2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 10px;
+  font-family: "montserratregular", sans-serif;
+}
+
+h3 {
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+p {
+  //font-size: 15px;
+  //line-height: 24px;
+}
+
+strong {
+  font-weight: 700;
+  font-family: "montserratregular", sans-serif;
+}