mirror of
https://github.com/spring-projects/spring-petclinic.git
synced 2025-07-17 13:05:49 +00:00
Generate petclinic.css from less
This commit is contained in:
Antoine Rey
parent
55312785d8
commit
3aafb3f28f
7 changed files with 440 additions and 3 deletions
|
|
@ -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',
|
||||
'copy-html', 'copy-images'], function() {});
|
||||
gulp.task('default', ['minify-css', 'minify-js', 'less',
|
||||
'copy-fonts', 'copy-html', 'copy-images'], function() {});
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
springboot-petclinic-client/src/css/README.md
Normal file
2
springboot-petclinic-client/src/css/README.md
Normal file
|
|
@ -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.
|
||||
73
springboot-petclinic-client/src/less/header.less
Normal file
73
springboot-petclinic-client/src/less/header.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
252
springboot-petclinic-client/src/less/petclinic.less
Normal file
252
springboot-petclinic-client/src/less/petclinic.less
Normal file
|
|
@ -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";
|
||||
41
springboot-petclinic-client/src/less/responsive.less
Normal file
41
springboot-petclinic-client/src/less/responsive.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
60
springboot-petclinic-client/src/less/typography.less
Normal file
60
springboot-petclinic-client/src/less/typography.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue