You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ace.apache.org by bu...@apache.org on 2013/10/18 13:09:28 UTC
svn commit: r883118 [4/4] - in /websites/staging/ace/trunk/content: ./ css/
css_/ dev-doc/ dev-doc/analysis/ dev-doc/design/ img/ img_/ js/ js_/ lib/
lib_/ user-doc/
Added: websites/staging/ace/trunk/content/lib_/popovers.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/popovers.less (added)
+++ websites/staging/ace/trunk/content/lib_/popovers.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,49 @@
+// POPOVERS
+// --------
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: @zindexPopover;
+ display: none;
+ padding: 5px;
+ &.top { margin-top: -5px; }
+ &.right { margin-left: 5px; }
+ &.bottom { margin-top: 5px; }
+ &.left { margin-left: -5px; }
+ &.top .arrow { #popoverArrow > .top(); }
+ &.right .arrow { #popoverArrow > .right(); }
+ &.bottom .arrow { #popoverArrow > .bottom(); }
+ &.left .arrow { #popoverArrow > .left(); }
+ .arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ }
+}
+.popover-inner {
+ padding: 3px;
+ width: 280px;
+ overflow: hidden;
+ background: @black; // has to be full background declaration for IE fallback
+ background: rgba(0,0,0,.8);
+ .border-radius(6px);
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
+}
+.popover-title {
+ padding: 9px 15px;
+ line-height: 1;
+ background-color: #f5f5f5;
+ border-bottom:1px solid #eee;
+ .border-radius(3px 3px 0 0);
+}
+.popover-content {
+ padding: 14px;
+ background-color: @white;
+ .border-radius(0 0 3px 3px);
+ .background-clip(padding-box);
+ p, ul, ol {
+ margin-bottom: 0;
+ }
+}
Added: websites/staging/ace/trunk/content/lib_/print.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/print.less (added)
+++ websites/staging/ace/trunk/content/lib_/print.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,18 @@
+/*!
+ * Bootstrap @VERSION for Print
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Date: @DATE
+ */
+
+
+// HIDE UNECESSARY COMPONENTS
+// --------------------------
+
+.navbar-fixed {
+ display: none;
+}
\ No newline at end of file
Added: websites/staging/ace/trunk/content/lib_/progress-bars.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/progress-bars.less (added)
+++ websites/staging/ace/trunk/content/lib_/progress-bars.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,95 @@
+// PROGRESS BARS
+// -------------
+
+
+// ANIMATIONS
+// ----------
+
+// Webkit
+@-webkit-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Firefox
+@-moz-keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+// Spec
+@keyframes progress-bar-stripes {
+ from { background-position: 0 0; }
+ to { background-position: 40px 0; }
+}
+
+
+
+// THE BARS
+// --------
+
+// Outer container
+.progress {
+ overflow: hidden;
+ height: 18px;
+ margin-bottom: 18px;
+ #gradient > .vertical(#f5f5f5, #f9f9f9);
+ .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+ .border-radius(4px);
+}
+
+// Bar of progress
+.progress .bar {
+ width: 0%;
+ height: 18px;
+ color: @white;
+ font-size: 12px;
+ text-align: center;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ #gradient > .vertical(#149bdf, #0480be);
+ .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+ .box-sizing(border-box);
+ .transition(width .6s ease);
+}
+
+// Striped bars
+.progress-striped .bar {
+ #gradient > .striped(#62c462);
+ .background-size(40px 40px);
+}
+
+// Call animation for the active one
+.progress.active .bar {
+ -webkit-animation: progress-bar-stripes 2s linear infinite;
+ -moz-animation: progress-bar-stripes 2s linear infinite;
+ animation: progress-bar-stripes 2s linear infinite;
+}
+
+
+
+// COLORS
+// ------
+
+// Danger (red)
+.progress-danger .bar {
+ #gradient > .vertical(#ee5f5b, #c43c35);
+}
+.progress-danger.progress-striped .bar {
+ #gradient > .striped(#ee5f5b);
+}
+
+// Success (green)
+.progress-success .bar {
+ #gradient > .vertical(#62c462, #57a957);
+}
+.progress-success.progress-striped .bar {
+ #gradient > .striped(#62c462);
+}
+
+// Info (teal)
+.progress-info .bar {
+ #gradient > .vertical(#5bc0de, #339bb9);
+}
+.progress-info.progress-striped .bar {
+ #gradient > .striped(#5bc0de);
+}
Added: websites/staging/ace/trunk/content/lib_/reset.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/reset.less (added)
+++ websites/staging/ace/trunk/content/lib_/reset.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,126 @@
+// Reset.less
+// Adapted from Normalize.css http://github.com/necolas/normalize.css
+// ------------------------------------------------------------------------
+
+// Display in IE6-9 and FF3
+// -------------------------
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+
+// Display block in IE6-9 and FF3
+// -------------------------
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+
+// Prevents modern browsers from displaying 'audio' without controls
+// -------------------------
+
+audio:not([controls]) {
+ display: none;
+}
+
+// Base settings
+// -------------------------
+
+html {
+ font-size: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+// Focus states
+a:focus {
+ .tab-focus();
+}
+// Hover & Active
+a:hover,
+a:active {
+ outline: 0;
+}
+
+// Prevents sub and sup affecting line-height in all browsers
+// -------------------------
+
+sub,
+sup {
+ position: relative;
+ font-size: 75%;
+ line-height: 0;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+
+// Img border in a's and image quality
+// -------------------------
+
+img {
+ max-width: 100%;
+ height: auto;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+}
+
+// Forms
+// -------------------------
+
+// Font size in all browsers, margin changes, misc consistency
+button,
+input,
+select,
+textarea {
+ margin: 0;
+ font-size: 100%;
+ vertical-align: middle;
+}
+button,
+input {
+ *overflow: visible; // Inner spacing ie IE6/7
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
+ padding: 0;
+ border: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer; // Cursors on all buttons applied consistently
+ -webkit-appearance: button; // Style clicable inputs in iOS
+}
+input[type="search"] { // Appearance in Safari/Chrome
+ -webkit-appearance: textfield;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
+}
+textarea {
+ overflow: auto; // Remove vertical scrollbar in IE6-9
+ vertical-align: top; // Readability and alignment cross-browser
+}
Added: websites/staging/ace/trunk/content/lib_/responsive.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/responsive.less (added)
+++ websites/staging/ace/trunk/content/lib_/responsive.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,323 @@
+/*!
+ * Bootstrap Responsive v2.0.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+// Responsive.less
+// For phone and tablet devices
+// -------------------------------------------------------------
+
+
+// REPEAT VARIABLES & MIXINS
+// -------------------------
+// Required since we compile the responsive stuff separately
+
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+ display: none;
+ visibility: hidden;
+}
+
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+
+ // Smooth out the collapsing/expanding nav
+ .nav-collapse {
+ -webkit-transform: translate3d(0, 0, 0); // activate the GPU
+ }
+
+ // Block level the page header small tag for readability
+ .page-header h1 small {
+ display: block;
+ line-height: @baseLineHeight;
+ }
+
+ // Make span* classes full width
+ input[class*="span"],
+ select[class*="span"],
+ textarea[class*="span"],
+ .uneditable-input {
+ display: block;
+ width: 100%;
+ height: 28px; /* Make inputs at least the height of their button counterpart */
+ /* Makes inputs behave like true block-level elements */
+ -webkit-box-sizing: border-box; /* Older Webkit */
+ -moz-box-sizing: border-box; /* Older FF */
+ -ms-box-sizing: border-box; /* IE8 */
+ box-sizing: border-box; /* CSS3 spec*/
+ }
+ // But don't let it screw up prepend/append inputs
+ .input-prepend input[class*="span"],
+ .input-append input[class*="span"] {
+ width: auto;
+ }
+
+ // Update checkboxes for iOS
+ input[type="checkbox"],
+ input[type="radio"] {
+ border: 1px solid #ccc;
+ }
+
+ // Remove the horizontal form styles
+ .form-horizontal .control-group > label {
+ float: none;
+ width: auto;
+ padding-top: 0;
+ text-align: left;
+ }
+ // Move over all input controls and content
+ .form-horizontal .controls {
+ margin-left: 0;
+ }
+ // Move the options list down to align with labels
+ .form-horizontal .control-list {
+ padding-top: 0; // has to be padding because margin collaspes
+ }
+ // Move over buttons in .form-actions to align with .controls
+ .form-horizontal .form-actions {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ // Modals
+ .modal {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ right: 10px;
+ width: auto;
+ margin: 0;
+ &.fade.in { top: auto; }
+ }
+ .modal-header .close {
+ padding: 10px;
+ margin: -10px;
+ }
+
+ // Carousel
+ .carousel-caption {
+ position: static;
+ }
+
+}
+
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (max-width: 768px) {
+ // GRID & CONTAINERS
+ // -----------------
+ // Remove width from containers
+ .container {
+ width: auto;
+ padding: 0 20px;
+ }
+ // Fluid rows
+ .row-fluid {
+ width: 100%;
+ }
+ // Undo negative margin on rows
+ .row {
+ margin-left: 0;
+ }
+ // Make all columns even
+ .row > [class*="span"],
+ .row-fluid > [class*="span"] {
+ float: none;
+ display: block;
+ width: auto;
+ margin: 0;
+ }
+}
+
+
+
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 980px) {
+
+ // Fixed grid
+ #gridSystem > .generate(12, 42px, 20px);
+
+ // Fluid grid
+ #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
+
+ // Input grid
+ #inputGridSystem > .generate(12, 42px, 20px);
+
+}
+
+
+
+// TABLETS AND BELOW
+// -----------------
+@media (max-width: 980px) {
+
+ // UNFIX THE TOPBAR
+ // ----------------
+ // Remove any padding from the body
+ body {
+ padding-top: 0;
+ }
+ // Unfix the navbar
+ .navbar-fixed-top {
+ position: static;
+ margin-bottom: @baseLineHeight;
+ }
+ .navbar-fixed-top .navbar-inner {
+ padding: 5px;
+ }
+ .navbar .container {
+ width: auto;
+ padding: 0;
+ }
+ // Account for brand name
+ .navbar .brand {
+ padding-left: 10px;
+ padding-right: 10px;
+ margin: 0 0 0 -5px;
+ }
+ // Nav collapse clears brand
+ .navbar .nav-collapse {
+ clear: left;
+ }
+ // Block-level the nav
+ .navbar .nav {
+ float: none;
+ margin: 0 0 (@baseLineHeight / 2);
+ }
+ .navbar .nav > li {
+ float: none;
+ }
+ .navbar .nav > li > a {
+ margin-bottom: 2px;
+ }
+ .navbar .nav > .divider-vertical {
+ display: none;
+ }
+ // Nav and dropdown links in navbar
+ .navbar .nav > li > a,
+ .navbar .dropdown-menu a {
+ padding: 6px 15px;
+ font-weight: bold;
+ color: @navbarLinkColor;
+ .border-radius(3px);
+ }
+ .navbar .dropdown-menu li + li a {
+ margin-bottom: 2px;
+ }
+ .navbar .nav > li > a:hover,
+ .navbar .dropdown-menu a:hover {
+ background-color: @navbarBackground;
+ }
+ // Dropdowns in the navbar
+ .navbar .dropdown-menu {
+ position: static;
+ top: auto;
+ left: auto;
+ float: none;
+ display: block;
+ max-width: none;
+ margin: 0 15px;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ .border-radius(0);
+ .box-shadow(none);
+ }
+ .navbar .dropdown-menu:before,
+ .navbar .dropdown-menu:after {
+ display: none;
+ }
+ .navbar .dropdown-menu .divider {
+ display: none;
+ }
+ // Forms in navbar
+ .navbar-form,
+ .navbar-search {
+ float: none;
+ padding: (@baseLineHeight / 2) 15px;
+ margin: (@baseLineHeight / 2) 0;
+ border-top: 1px solid @navbarBackground;
+ border-bottom: 1px solid @navbarBackground;
+ @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+ .box-shadow(@shadow);
+ }
+ // Pull right (secondary) nav content
+ .navbar .nav.pull-right {
+ float: none;
+ margin-left: 0;
+ }
+ // Static navbar
+ .navbar-static .navbar-inner {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ // Navbar button
+ .btn-navbar {
+ display: block;
+ }
+
+ // Hide everything in the navbar save .brand and toggle button */
+ .nav-collapse {
+ overflow: hidden;
+ height: 0;
+ }
+}
+
+
+
+// DEFAULT DESKTOP
+// ---------------
+
+@media (min-width: 980px) {
+ .nav-collapse.collapse {
+ height: auto !important;
+ }
+}
+
+
+
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1200px) {
+
+ // Fixed grid
+ #gridSystem > .generate(12, 70px, 30px);
+
+ // Fluid grid
+ #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
+
+ // Input grid
+ #inputGridSystem > .generate(12, 70px, 30px);
+
+ // Thumbnails
+ .thumbnails {
+ margin-left: -30px;
+ }
+ .thumbnails > li {
+ margin-left: 30px;
+ }
+
+}
Added: websites/staging/ace/trunk/content/lib_/scaffolding.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/scaffolding.less (added)
+++ websites/staging/ace/trunk/content/lib_/scaffolding.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,29 @@
+// Scaffolding
+// Basic and global styles for generating a grid system, structural layout, and page templates
+// -------------------------------------------------------------------------------------------
+
+
+// STRUCTURAL LAYOUT
+// -----------------
+
+body {
+ margin: 0;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ color: @textColor;
+ background-color: @white;
+}
+
+
+// LINKS
+// -----
+
+a {
+ color: @linkColor;
+ text-decoration: none;
+}
+a:hover {
+ color: @linkColorHover;
+ text-decoration: underline;
+}
Added: websites/staging/ace/trunk/content/lib_/sprites.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/sprites.less (added)
+++ websites/staging/ace/trunk/content/lib_/sprites.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,156 @@
+// SPRITES
+// Glyphs and icons for buttons, nav, and more
+// -------------------------------------------
+
+
+// ICONS
+// -----
+
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
+// and background-position. Your resulting HTML will look like
+// <i class="i icon-inbox"></i>.
+
+// For the white version of the icons, just add the .icon-white class:
+// <i class="i icon-inbox icon-white"></i>
+
+[class^="icon-"] {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ vertical-align: text-top;
+ background-image: url(../img/glyphicons-halflings.png);
+ background-position: 14px 14px;
+ background-repeat: no-repeat;
+
+ .ie7-restore-right-whitespace();
+}
+.icon-white {
+ background-image: url(../img/glyphicons-halflings-white.png);
+}
+
+.icon-glass { background-position: 0 0; }
+.icon-music { background-position: -24px 0; }
+.icon-search { background-position: -48px 0; }
+.icon-envelope { background-position: -72px 0; }
+.icon-heart { background-position: -96px 0; }
+.icon-star { background-position: -120px 0; }
+.icon-star-empty { background-position: -144px 0; }
+.icon-user { background-position: -168px 0; }
+.icon-film { background-position: -192px 0; }
+.icon-th-large { background-position: -216px 0; }
+.icon-th { background-position: -240px 0; }
+.icon-th-list { background-position: -264px 0; }
+.icon-ok { background-position: -288px 0; }
+.icon-remove { background-position: -312px 0; }
+.icon-zoom-in { background-position: -336px 0; }
+.icon-zoom-out { background-position: -360px 0; }
+.icon-off { background-position: -384px 0; }
+.icon-signal { background-position: -408px 0; }
+.icon-cog { background-position: -432px 0; }
+.icon-trash { background-position: -456px 0; }
+
+.icon-home { background-position: 0 -24px; }
+.icon-file { background-position: -24px -24px; }
+.icon-time { background-position: -48px -24px; }
+.icon-road { background-position: -72px -24px; }
+.icon-download-alt { background-position: -96px -24px; }
+.icon-download { background-position: -120px -24px; }
+.icon-upload { background-position: -144px -24px; }
+.icon-inbox { background-position: -168px -24px; }
+.icon-play-circle { background-position: -192px -24px; }
+.icon-repeat { background-position: -216px -24px; }
+.icon-refresh { background-position: -240px -24px; }
+.icon-list-alt { background-position: -264px -24px; }
+.icon-lock { background-position: -287px -24px; } // 1px off
+.icon-flag { background-position: -312px -24px; }
+.icon-headphones { background-position: -336px -24px; }
+.icon-volume-off { background-position: -360px -24px; }
+.icon-volume-down { background-position: -384px -24px; }
+.icon-volume-up { background-position: -408px -24px; }
+.icon-qrcode { background-position: -432px -24px; }
+.icon-barcode { background-position: -456px -24px; }
+
+.icon-tag { background-position: 0 -48px; }
+.icon-tags { background-position: -25px -48px; } // 1px off
+.icon-book { background-position: -48px -48px; }
+.icon-bookmark { background-position: -72px -48px; }
+.icon-print { background-position: -96px -48px; }
+.icon-camera { background-position: -120px -48px; }
+.icon-font { background-position: -144px -48px; }
+.icon-bold { background-position: -167px -48px; } // 1px off
+.icon-italic { background-position: -192px -48px; }
+.icon-text-height { background-position: -216px -48px; }
+.icon-text-width { background-position: -240px -48px; }
+.icon-align-left { background-position: -264px -48px; }
+.icon-align-center { background-position: -288px -48px; }
+.icon-align-right { background-position: -312px -48px; }
+.icon-align-justify { background-position: -336px -48px; }
+.icon-list { background-position: -360px -48px; }
+.icon-indent-left { background-position: -384px -48px; }
+.icon-indent-right { background-position: -408px -48px; }
+.icon-facetime-video { background-position: -432px -48px; }
+.icon-picture { background-position: -456px -48px; }
+
+.icon-pencil { background-position: 0 -72px; }
+.icon-map-marker { background-position: -24px -72px; }
+.icon-adjust { background-position: -48px -72px; }
+.icon-tint { background-position: -72px -72px; }
+.icon-edit { background-position: -96px -72px; }
+.icon-share { background-position: -120px -72px; }
+.icon-check { background-position: -144px -72px; }
+.icon-move { background-position: -168px -72px; }
+.icon-step-backward { background-position: -192px -72px; }
+.icon-fast-backward { background-position: -216px -72px; }
+.icon-backward { background-position: -240px -72px; }
+.icon-play { background-position: -264px -72px; }
+.icon-pause { background-position: -288px -72px; }
+.icon-stop { background-position: -312px -72px; }
+.icon-forward { background-position: -336px -72px; }
+.icon-fast-forward { background-position: -360px -72px; }
+.icon-step-forward { background-position: -384px -72px; }
+.icon-eject { background-position: -408px -72px; }
+.icon-chevron-left { background-position: -432px -72px; }
+.icon-chevron-right { background-position: -456px -72px; }
+
+.icon-plus-sign { background-position: 0 -96px; }
+.icon-minus-sign { background-position: -24px -96px; }
+.icon-remove-sign { background-position: -48px -96px; }
+.icon-ok-sign { background-position: -72px -96px; }
+.icon-question-sign { background-position: -96px -96px; }
+.icon-info-sign { background-position: -120px -96px; }
+.icon-screenshot { background-position: -144px -96px; }
+.icon-remove-circle { background-position: -168px -96px; }
+.icon-ok-circle { background-position: -192px -96px; }
+.icon-ban-circle { background-position: -216px -96px; }
+.icon-arrow-left { background-position: -240px -96px; }
+.icon-arrow-right { background-position: -264px -96px; }
+.icon-arrow-up { background-position: -289px -96px; } // 1px off
+.icon-arrow-down { background-position: -312px -96px; }
+.icon-share-alt { background-position: -336px -96px; }
+.icon-resize-full { background-position: -360px -96px; }
+.icon-resize-small { background-position: -384px -96px; }
+.icon-plus { background-position: -408px -96px; }
+.icon-minus { background-position: -433px -96px; }
+.icon-asterisk { background-position: -456px -96px; }
+
+.icon-exclamation-sign { background-position: 0 -120px; }
+.icon-gift { background-position: -24px -120px; }
+.icon-leaf { background-position: -48px -120px; }
+.icon-fire { background-position: -72px -120px; }
+.icon-eye-open { background-position: -96px -120px; }
+.icon-eye-close { background-position: -120px -120px; }
+.icon-warning-sign { background-position: -144px -120px; }
+.icon-plane { background-position: -168px -120px; }
+.icon-calendar { background-position: -192px -120px; }
+.icon-random { background-position: -216px -120px; }
+.icon-comment { background-position: -240px -120px; }
+.icon-magnet { background-position: -264px -120px; }
+.icon-chevron-up { background-position: -288px -120px; }
+.icon-chevron-down { background-position: -313px -119px; } // 1px off
+.icon-retweet { background-position: -336px -120px; }
+.icon-shopping-cart { background-position: -360px -120px; }
+.icon-folder-close { background-position: -384px -120px; }
+.icon-folder-open { background-position: -408px -120px; }
+.icon-resize-vertical { background-position: -432px -119px; }
+.icon-resize-horizontal { background-position: -456px -118px; }
Added: websites/staging/ace/trunk/content/lib_/tables.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/tables.less (added)
+++ websites/staging/ace/trunk/content/lib_/tables.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,139 @@
+//
+// Tables.less
+// Tables for, you guessed it, tabular data
+// ----------------------------------------
+
+
+// BASE TABLES
+// -----------------
+
+table {
+ max-width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+// BASELINE STYLES
+// ---------------
+
+.table {
+ width: 100%;
+ margin-bottom: @baseLineHeight;
+ // Cells
+ th,
+ td {
+ padding: 8px;
+ line-height: @baseLineHeight;
+ text-align: left;
+ border-top: 1px solid #ddd;
+ }
+ th {
+ font-weight: bold;
+ vertical-align: bottom;
+ }
+ td {
+ vertical-align: top;
+ }
+ // Remove top border from thead by default
+ thead:first-child tr th,
+ thead:first-child tr td {
+ border-top: 0;
+ }
+ // Account for multiple tbody instances
+ tbody + tbody {
+ border-top: 2px solid #ddd;
+ }
+}
+
+
+
+// CONDENSED TABLE W/ HALF PADDING
+// -------------------------------
+
+.table-condensed {
+ th,
+ td {
+ padding: 4px 5px;
+ }
+}
+
+
+// BORDERED VERSION
+// ----------------
+
+.table-bordered {
+ border: 1px solid #ddd;
+ border-collapse: separate; // Done so we can round those corners!
+ *border-collapse: collapsed; // IE7 can't round corners anyway
+ .border-radius(4px);
+ th + th,
+ td + td,
+ th + td,
+ td + th {
+ border-left: 1px solid #ddd;
+ }
+ // Prevent a double border
+ thead:first-child tr:first-child th,
+ tbody:first-child tr:first-child th,
+ tbody:first-child tr:first-child td {
+ border-top: 0;
+ }
+ // For first th or td in the first row in the first thead or tbody
+ thead:first-child tr:first-child th:first-child,
+ tbody:first-child tr:first-child td:first-child {
+ .border-radius(4px 0 0 0);
+ }
+ thead:first-child tr:first-child th:last-child,
+ tbody:first-child tr:first-child td:last-child {
+ .border-radius(0 4px 0 0);
+ }
+ // For first th or td in the first row in the first thead or tbody
+ thead:last-child tr:last-child th:first-child,
+ tbody:last-child tr:last-child td:first-child {
+ .border-radius(0 0 0 4px);
+ }
+ thead:last-child tr:last-child th:last-child,
+ tbody:last-child tr:last-child td:last-child {
+ .border-radius(0 0 4px 0);
+ }
+}
+
+
+// ZEBRA-STRIPING
+// --------------
+
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.table-striped {
+ tbody {
+ tr:nth-child(odd) td,
+ tr:nth-child(odd) th {
+ background-color: #f9f9f9;
+ }
+ }
+}
+
+
+
+// TABLE CELL SIZING
+// -----------------
+
+// Change the columns
+.tableColumns(@columnSpan: 1) {
+ float: none;
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
+ margin-left: 0;
+}
+table {
+ .span1 { .tableColumns(1); }
+ .span2 { .tableColumns(2); }
+ .span3 { .tableColumns(3); }
+ .span4 { .tableColumns(4); }
+ .span5 { .tableColumns(5); }
+ .span6 { .tableColumns(6); }
+ .span7 { .tableColumns(7); }
+ .span8 { .tableColumns(8); }
+ .span9 { .tableColumns(9); }
+ .span10 { .tableColumns(10); }
+ .span11 { .tableColumns(11); }
+ .span12 { .tableColumns(12); }
+}
Added: websites/staging/ace/trunk/content/lib_/thumbnails.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/thumbnails.less (added)
+++ websites/staging/ace/trunk/content/lib_/thumbnails.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,35 @@
+// THUMBNAILS
+// ----------
+
+.thumbnails {
+ margin-left: -20px;
+ list-style: none;
+ .clearfix();
+}
+.thumbnails > li {
+ float: left;
+ margin: 0 0 @baseLineHeight 20px;
+}
+.thumbnail {
+ display: block;
+ padding: 4px;
+ line-height: 1;
+ border: 1px solid #ddd;
+ .border-radius(4px);
+ .box-shadow(0 1px 1px rgba(0,0,0,.075));
+}
+// Add a hover state for linked versions only
+a.thumbnail:hover {
+ border-color: @linkColor;
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
+}
+// Images and captions
+.thumbnail > img {
+ display: block;
+ max-width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+}
+.thumbnail .caption {
+ padding: 9px;
+}
Added: websites/staging/ace/trunk/content/lib_/tooltip.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/tooltip.less (added)
+++ websites/staging/ace/trunk/content/lib_/tooltip.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,35 @@
+// TOOLTIP
+// ------=
+
+.tooltip {
+ position: absolute;
+ z-index: @zindexTooltip;
+ display: block;
+ visibility: visible;
+ padding: 5px;
+ font-size: 11px;
+ .opacity(0);
+ &.in { .opacity(80); }
+ &.top { margin-top: -2px; }
+ &.right { margin-left: 2px; }
+ &.bottom { margin-top: 2px; }
+ &.left { margin-left: -2px; }
+ &.top .tooltip-arrow { #popoverArrow > .top(); }
+ &.left .tooltip-arrow { #popoverArrow > .left(); }
+ &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
+ &.right .tooltip-arrow { #popoverArrow > .right(); }
+}
+.tooltip-inner {
+ max-width: 200px;
+ padding: 3px 8px;
+ color: @white;
+ text-align: center;
+ text-decoration: none;
+ background-color: @black;
+ .border-radius(4px);
+}
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+}
Added: websites/staging/ace/trunk/content/lib_/type.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/type.less (added)
+++ websites/staging/ace/trunk/content/lib_/type.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,217 @@
+// Typography.less
+// Headings, body text, lists, code, and more for a versatile and durable typography system
+// ----------------------------------------------------------------------------------------
+
+
+// BODY TEXT
+// ---------
+
+p {
+ margin: 0 0 @baseLineHeight / 2;
+ font-family: @baseFontFamily;
+ font-size: @baseFontSize;
+ line-height: @baseLineHeight;
+ small {
+ font-size: @baseFontSize - 2;
+ color: @grayLight;
+ }
+}
+.lead {
+ margin-bottom: @baseLineHeight;
+ font-size: 20px;
+ font-weight: 200;
+ line-height: @baseLineHeight * 1.5;
+}
+
+// HEADINGS
+// --------
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ font-weight: bold;
+ color: @grayDark;
+ text-rendering: optimizelegibility; // Fix the character spacing for headings
+ small {
+ font-weight: normal;
+ color: @grayLight;
+ }
+}
+h1 {
+ font-size: 30px;
+ line-height: @baseLineHeight * 2;
+ small {
+ font-size: 18px;
+ }
+}
+h2 {
+ font-size: 24px;
+ line-height: @baseLineHeight * 2;
+ small {
+ font-size: 18px;
+ }
+}
+h3 {
+ line-height: @baseLineHeight * 1.5;
+ font-size: 18px;
+ small {
+ font-size: 14px;
+ }
+}
+h4, h5, h6 {
+ line-height: @baseLineHeight;
+}
+h4 {
+ font-size: 14px;
+ small {
+ font-size: 12px;
+ }
+}
+h5 {
+ font-size: 12px;
+}
+h6 {
+ font-size: 11px;
+ color: @grayLight;
+ text-transform: uppercase;
+}
+
+// Page header
+.page-header {
+ padding-bottom: @baseLineHeight - 1;
+ margin: @baseLineHeight 0;
+ border-bottom: 1px solid @grayLighter;
+}
+.page-header h1 {
+ line-height: 1;
+}
+
+
+
+// LISTS
+// -----
+
+// Unordered and Ordered lists
+ul, ol {
+ padding: 0;
+ margin: 0 0 @baseLineHeight / 2 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+ margin-bottom: 0;
+}
+ul {
+ list-style: disc;
+}
+ol {
+ list-style: decimal;
+}
+li {
+ line-height: @baseLineHeight;
+}
+ul.unstyled {
+ margin-left: 0;
+ list-style: none;
+}
+
+// Description Lists
+dl {
+ margin-bottom: @baseLineHeight;
+}
+dt,
+dd {
+ line-height: @baseLineHeight;
+}
+dt {
+ font-weight: bold;
+}
+dd {
+ margin-left: @baseLineHeight / 2;
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+ margin: @baseLineHeight 0;
+ border: 0;
+ border-top: 1px solid #e5e5e5;
+ border-bottom: 1px solid @white;
+}
+
+// Emphasis
+strong {
+ font-weight: bold;
+}
+em {
+ font-style: italic;
+}
+.muted {
+ color: @grayLight;
+}
+
+// Abbreviations and acronyms
+abbr {
+ font-size: 90%;
+ text-transform: uppercase;
+ border-bottom: 1px dotted #ddd;
+ cursor: help;
+}
+
+// Blockquotes
+blockquote {
+ padding: 0 0 0 15px;
+ margin: 0 0 @baseLineHeight;
+ border-left: 5px solid @grayLighter;
+ p {
+ margin-bottom: 0;
+ #font > .shorthand(16px,300,@baseLineHeight * 1.25);
+ }
+ small {
+ display: block;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ &:before {
+ content: '\2014 \00A0';
+ }
+ }
+
+ // Float right with text-align: right
+ &.pull-right {
+ float: right;
+ padding-left: 0;
+ padding-right: 15px;
+ border-left: 0;
+ border-right: 5px solid @grayLighter;
+ p,
+ small {
+ text-align: right;
+ }
+ }
+}
+
+// Quotes
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+ content: "";
+}
+
+// Addresses
+address {
+ display: block;
+ margin-bottom: @baseLineHeight;
+ line-height: @baseLineHeight;
+ font-style: normal;
+}
+
+// Misc
+small {
+ font-size: 100%;
+}
+cite {
+ font-style: normal;
+}
Added: websites/staging/ace/trunk/content/lib_/utilities.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/utilities.less (added)
+++ websites/staging/ace/trunk/content/lib_/utilities.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,23 @@
+// UTILITY CLASSES
+// ---------------
+
+// Quick floats
+.pull-right {
+ float: right;
+}
+.pull-left {
+ float: left;
+}
+
+// Toggling content
+.hide {
+ display: none;
+}
+.show {
+ display: block;
+}
+
+// Visibility
+.invisible {
+ visibility: hidden;
+}
Added: websites/staging/ace/trunk/content/lib_/variables.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/variables.less (added)
+++ websites/staging/ace/trunk/content/lib_/variables.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,99 @@
+// Variables.less
+// Variables to customize the look and feel of Bootstrap
+// -----------------------------------------------------
+
+
+
+// GLOBAL VALUES
+// --------------------------------------------------
+
+// Links
+@linkColor: #08c;
+@linkColorHover: darken(@linkColor, 15%);
+
+// Grays
+@black: #000;
+@grayDarker: #222;
+@grayDark: #333;
+@gray: #555;
+@grayLight: #999;
+@grayLighter: #eee;
+@white: #fff;
+
+// Accent colors
+@blue: #049cdb;
+@blueDark: #0064cd;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+// Typography
+@baseFontSize: 13px;
+@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@baseLineHeight: 18px;
+@textColor: @grayDark;
+
+// Buttons
+@primaryButtonBackground: @linkColor;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+// Z-index master list
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown: 1000;
+@zindexPopover: 1010;
+@zindexTooltip: 1020;
+@zindexFixedNavbar: 1030;
+@zindexModalBackdrop: 1040;
+@zindexModal: 1050;
+
+// Input placeholder text color
+@placeholderText: @grayLight;
+
+// Navbar
+@navbarHeight: 40px;
+@navbarBackground: @grayDarker;
+@navbarBackgroundHighlight: @grayDark;
+
+@navbarText: @grayLight;
+@navbarLinkColor: @grayLight;
+@navbarLinkColorHover: @white;
+
+// Form states and alerts
+@warningText: #c09853;
+@warningBackground: #fcf8e3;
+@warningBorder: darken(spin(@warningBackground, -10), 3%);
+
+@errorText: #b94a48;
+@errorBackground: #f2dede;
+@errorBorder: darken(spin(@errorBackground, -10), 3%);
+
+@successText: #468847;
+@successBackground: #dff0d8;
+@successBorder: darken(spin(@successBackground, -10), 5%);
+
+@infoText: #3a87ad;
+@infoBackground: #d9edf7;
+@infoBorder: darken(spin(@infoBackground, -10), 7%);
+
+
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Fluid grid
+@fluidGridColumnWidth: 6.382978723%;
+@fluidGridGutterWidth: 2.127659574%;
Added: websites/staging/ace/trunk/content/lib_/wells.less
==============================================================================
--- websites/staging/ace/trunk/content/lib_/wells.less (added)
+++ websites/staging/ace/trunk/content/lib_/wells.less Fri Oct 18 11:09:27 2013
@@ -0,0 +1,17 @@
+// WELLS
+// -----
+
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
+ border: 1px solid #eee;
+ border: 1px solid rgba(0,0,0,.05);
+ .border-radius(4px);
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+ blockquote {
+ border-color: #ddd;
+ border-color: rgba(0,0,0,.15);
+ }
+}
Modified: websites/staging/ace/trunk/content/user-doc/user-guide.html
==============================================================================
--- websites/staging/ace/trunk/content/user-doc/user-guide.html (original)
+++ websites/staging/ace/trunk/content/user-doc/user-guide.html Fri Oct 18 11:09:27 2013
@@ -194,7 +194,7 @@
<h2 id="introduction">Introduction</h2>
<p>Apache ACE is a framework that enables you to provision OSGi software(components) in a controlled manner. What this means is that you have a central server to which clients, or "targets" in ACE terminology, connect and fetch their software from. This allows one to control which target gets which software. </p>
<p>The software that is deployed to a target, is composed of one or more distributions. A distribution is roughly similar to a piece of self-contained software. For example, it could be a plugin or even a full application. On their own, distributions consist of one or more features, that provide pieces of functionality to your software. The difference between a feature and distribution is that the former is not necessarily fully self-contained: it might need other features in order to work. Each feature groups one or more artifacts. An artifact is anything from an OSGi bundle to a configuration file or any other kind of artifact that is needed for the software to work.</p>
-<p>The artifacts themselves reside in an <abbr title="OSGi Bundle Repository">OBR</abbr>, which can be either the default one supplied by ACE, or an external one. Think of an <abbr title="OSGi Bundle Repository">OBR</abbr> as a repository, like the Maven repository or a content repository, storing immutable versions of artifacts<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>. As the <abbr title="OSGi Bundle Repository">OBR</abbr> is the single source for all artifacts, and therefore the software that is deployed on a target, ACE is able to calculate how to upgrade a target from one version to another version. This is possible because all changes made to (the metadata of) ACE are stored in an internal versioned database. In other words, we always keep a full history and audit trail.</p>
+<p>The artifacts themselves reside in an <abbr title="OSGi Bundle Repository">OBR</abbr>, which can be either the default one supplied by ACE, or an external one. Think of an <abbr title="OSGi Bundle Repository">OBR</abbr> as a repository, like the Maven repository or a content repository, storing immutable versions of artifacts<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup>. As the <abbr title="OSGi Bundle Repository">OBR</abbr> is the single source for all artifacts, and therefore the software that is deployed on a target, ACE is able to calculate how to upgrade a target from one version to another version. This is possible because all changes made to (the metadata of) ACE are stored in an internal versioned database. In other words, we always keep a full history and audit trail.</p>
<h2 id="workflow">Workflow</h2>
<p>The typical use case for using ACE is where you want to control and manage which software runs on what target. So, how does one use ACE in practice? To explain the typical workflow of ACE, let's take the following example.</p>
<p>Assume you are working on a large OSGi-based system that provides some kind of service to your users (the exact details on what it does isn't relevant for this example).</p>
@@ -205,8 +205,7 @@ Even though they are smart guys that kno
<p>Before a new version of your software is put into production, your users want to do acceptance testing to see whether this new version does not break anything. The acceptance environment should only be updated when a new version is released and after that remains as-is. In practice, this is most often not the case, as the acceptance environment is, when not used by any user, confiscated by your tester for its daily testing purposes, simply, because ACE allows him to easily deploy other versions to the acceptance environment. When a user asks for an acceptance test, he simply deploys the latest greatest official release to the acceptance environment, and lets the user do its testing. After that, he can repurpose it again. Another scenario obviously is that users setup dedicated targets for the purpose of acceptance testing.</p>
<p>When all acceptance tests are successful, the new version of your software needs to be deployed on several production environments, which is done by you, the release manager. As most production environments only differ in a few details, such as IP addresses and database credentials, you use the template engine of ACE to make specific configuration files for each production target. This way, you can easily scale up your production environment by defining new targets and provide them with the necessary configuration values.</p>
<h2 id="working-with-the-ace-server">Working with the ACE Server</h2>
-<p>The server UI might look a bit daunting at first, but once you become more familiar with it, you'll see that it is rather easy to work with.<br />
-</p>
+<p>The server UI might look a bit daunting at first, but once you become more familiar with it, you'll see that it is rather easy to work with. </p>
<p><a href="ace_server_ui.png" target="_blank"><img src="ace_server_ui.png" width="640px" title="Figure 1: The server UI of ACE, showing the control area at the top, and the resource area below that." /></a><br />
<strong>Figure 1</strong>: The server UI of ACE after logging in, showing the control area at the top, and the resource area below that (click on image to see full size).</p>
<p>After logging in, the main window consists of two main areas:</p>
@@ -269,10 +268,10 @@ Started management agent.
</pre></div>
-<p>After the management agent is started, a new target should appear in the ACE server after you "Retrieve" the latest changes or "Revert" the current changes. If a target is added this way to the ACE server (instead of adding it through the "Add targetâ¦" button), it initially will be <em>unregistered</em>. This means that no metadata is present in the ACE server yet and will not be created. To register a target, you can double click the target to edit its properties. On the "Management" tab, you can select the "Registered?" (and optionally the "Auto approve?" option as well) and close the dialog by pressing "Ok"<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>. </p>
+<p>After the management agent is started, a new target should appear in the ACE server after you "Retrieve" the latest changes or "Revert" the current changes. If a target is added this way to the ACE server (instead of adding it through the "Add targetâ¦" button), it initially will be <em>unregistered</em>. This means that no metadata is present in the ACE server yet and will not be created. To register a target, you can double click the target to edit its properties. On the "Management" tab, you can select the "Registered?" (and optionally the "Auto approve?" option as well) and close the dialog by pressing "Ok"<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup>. </p>
<h3 id="using-the-template-engine-for-targets">Using the template engine for targets</h3>
<p>If you want to provision software to multiple targets, those targets probably need to have their own specific configuration. For example, the IP address on which it should listen for web requests, or the credentials to access a database. One could create specific configuration files for each target, however, this can become quite tedious if you have lots of targets. Besides that, ACE requires that each artifact has a unique name, so you need to create unique file names for your configuration files for each change you make. Fortunately, ACE provides an easier way to solve this problem: a template engine.</p>
-<p>All configuration files<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup> can be regarded as templates, in which variables are replaced with values supplied by ACE. In fact, the values are definable per target, distribution, feature or artifact and ACE will collect all tags of entities that are associated with a specific target. To define variables and their replacement values (or "tags") for, for example, a distribution, open up its properties dialog by double clicking on it, and selecting the "Tag Editor" tab. Each line in this editor represents a tag. The key of a tag defines that (part of) the variable name to be replaced in configuration files, and the value of a tag the actual replacement value. </p>
+<p>All configuration files<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup> can be regarded as templates, in which variables are replaced with values supplied by ACE. In fact, the values are definable per target, distribution, feature or artifact and ACE will collect all tags of entities that are associated with a specific target. To define variables and their replacement values (or "tags") for, for example, a distribution, open up its properties dialog by double clicking on it, and selecting the "Tag Editor" tab. Each line in this editor represents a tag. The key of a tag defines that (part of) the variable name to be replaced in configuration files, and the value of a tag the actual replacement value. </p>
<p>For example, consider the following configuration file:</p>
<div class="codehilite"><pre><span class="nt"><properties></span>
<span class="nt"><key></span>ipAddress<span class="nt"></key></span>
@@ -282,23 +281,23 @@ Started management agent.
<p>The <tt>${context.address}</tt> represent the variable that will be replaced. The "context." part is mandatory, and everything after that is user definable. Suppose we want to deploy this configuration file to two targets, "Target1", which is supposed to listen on address 192.168.2.1 and "Target2", which is supposed to listen on address 192.168.2.2. To make the configuration file specific for both targets, we simply need to define a tag on "Target1", like: <code>address</code> -> <code>192.168.2.1</code>, and a similar tag on "Target2", like <code>address</code> -> <code>192.168.2.2</code>.</p>
-<p>Under the covers, ACE uses Velocity<sup id="fnref:4"><a href="#fn:4" rel="footnote">4</a></sup> to parse the template. This means that, apart from variable substitution, you can also use other Velocity macros and create more complex configurations that might contain conditional sections, loops and other features Velocity provides.</p>
+<p>Under the covers, ACE uses Velocity<sup id="fnref:4"><a class="footnote-ref" href="#fn:4" rel="footnote">4</a></sup> to parse the template. This means that, apart from variable substitution, you can also use other Velocity macros and create more complex configurations that might contain conditional sections, loops and other features Velocity provides.</p>
<p><strong>NOTE</strong>: In case a configuration file consists of a variable that cannot be resolved, it will simply not be replaced, but left as-is.</p>
<p>ACE will scan all configuration files and replace all known variables as soon as a new deployment is created. This means that for our example, both "Target1" and "Target2" will get their own copy of the configuration file with their specific content. ACE also automatically versions these generated files, to aid downgrading software.</p>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
-<p>Once an artifact is uploaded to the <abbr title="OSGi Bundle Repository"><abbr title="OSGi Bundle Repository"><abbr title="OSGi Bundle Repository">OBR</abbr></abbr></abbr>, it cannot be modified anymore. This is necessary in order to allow both software upgrades as downgrades and to ensure that everything you do is reproducible. One thing to note is that this is not compatible with the way that Maven handles snapshot versions. A snapshot can contain anything. In stead we usually use the version qualifier to append a timestamp in such scenarios. <a href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>
+<p>Once an artifact is uploaded to the <abbr title="OSGi Bundle Repository"><abbr title="OSGi Bundle Repository"><abbr title="OSGi Bundle Repository">OBR</abbr></abbr></abbr>, it cannot be modified anymore. This is necessary in order to allow both software upgrades as downgrades and to ensure that everything you do is reproducible. One thing to note is that this is not compatible with the way that Maven handles snapshot versions. A snapshot can contain anything. In stead we usually use the version qualifier to append a timestamp in such scenarios. <a class="footnote-backref" href="#fnref:1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
-<p>Do not forget to store your changes! <a href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">↩</a></p>
+<p>Do not forget to store your changes! <a class="footnote-backref" href="#fnref:2" rev="footnote" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<li id="fn:3">
-<p>In fact any artifact can be considered as an template, but by default ACE only considers configuration files.  <a href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">↩</a></p>
+<p>In fact any artifact can be considered as an template, but by default ACE only considers configuration files.  <a class="footnote-backref" href="#fnref:3" rev="footnote" title="Jump back to footnote 3 in the text">↩</a></p>
</li>
<li id="fn:4">
-<p>Apache Velocity is an engine that can generate documents by combining a template with a context that contains variables. To learn more about it, visit the <a href="http://velocity.apache.org/">Velocity website</a>. <a href="#fnref:4" rev="footnote" title="Jump back to footnote 4 in the text">↩</a></p>
+<p>Apache Velocity is an engine that can generate documents by combining a template with a context that contains variables. To learn more about it, visit the <a href="http://velocity.apache.org/">Velocity website</a>. <a class="footnote-backref" href="#fnref:4" rev="footnote" title="Jump back to footnote 4 in the text">↩</a></p>
</li>
</ol>
</div></div>