Working : Major class changes migration from bootstrap 2.x to 3.0

templates/admin/default/assets/less/thelia/breadcrumbs.less

@@ -0,0 +1,20 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+  margin-top: 0;
+  background-color: transparent;
+  padding: 0 15px;
+
+  > li {
+    
+    > .divider {
+      color: inherit;
+    }
+  }
+  > .active {
+    color: inherit;
+  }
+}

templates/admin/default/assets/less/thelia/datepicker.less

@@ -0,0 +1,109 @@
+.datepicker {
+	top: 0;
+	left: 0;
+	padding: 4px;
+	margin-top: 1px;
+	.rounded(4px);
+	&:before {
+		content: '';
+		display: inline-block;
+		border-left:   7px solid transparent;
+		border-right:  7px solid transparent;
+		border-bottom: 7px solid #ccc;
+		border-bottom-color: rgba(0,0,0,.2);
+		position: absolute;
+		top: -7px;
+		left: 6px;
+	}
+	&:after {
+		content: '';
+		display: inline-block;
+		border-left:   6px solid transparent;
+		border-right:  6px solid transparent;
+		border-bottom: 6px solid @white;
+		position: absolute;
+		top: -6px;
+		left: 7px;
+	}
+	>div {
+		display: none;
+	}
+	table{
+		width: 100%;
+		margin: 0;
+	}
+	td,
+	th{
+		text-align: center;
+		width: 20px;
+		height: 20px;
+		.rounded(4px);
+	}
+	td {
+		&.day:hover {
+			background: @grayLighter;
+			cursor: pointer;
+		}
+		&.day.disabled {
+			color: @grayLighter;
+		}
+		&.old,
+		&.new {
+			color: @grayLight;
+		}
+		&.active,
+		&.active:hover {
+			#gradient > .vertical(rgb(243,153,34),rgb(227,83,11));
+			color: #fff;
+			text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+		}
+		span {
+			display: block;
+			width: 47px;
+			height: 54px;
+			line-height: 54px;
+			float: left;
+			margin: 2px;
+			cursor: pointer;
+			.rounded(4px);
+			&:hover {
+				background: @grayLighter;
+			}
+			&.active {
+				#gradient > .vertical(rgb(243,153,34),rgb(227,83,11));
+				color: #fff;
+				text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+			}
+			&.old {
+				color: @grayLight;
+			}
+		}
+	}
+	
+	th {
+		&.switch {
+			width: 145px;
+		}
+		&.next,
+		&.prev {
+			font-size: @baseFontSize * 1.5;
+		}
+	}
+	
+	thead tr:first-child th {
+		cursor: pointer;
+		&:hover{
+			background: @grayLighter;
+		}
+	}
+
+}
+.input-append,
+.input-prepend {
+	&.date {
+		span.add-on span {
+			display: block;
+			cursor: pointer;			
+		}
+	}
+}

templates/admin/default/assets/less/thelia/forms.less

@@ -0,0 +1,168 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+// Form controls
+// -------------------------
+
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+
+  // Focus state
+  &:focus {
+    border-color: #E9730F;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #E9730F");
+  }
+}
+
+label {
+    font-weight: bold;
+
+    &.checkbox {
+        font-weight: normal;
+    }
+}
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// Warning
+form .warning {
+  .formFieldState(@warningText, @warningText, @warningBackground);
+}
+// Error
+form .error {
+  .formFieldState(@errorText, @errorText, @errorBackground);
+}
+// Success
+form .success {
+  .formFieldState(@successText, @successText, @successBackground);
+}
+// Success
+form .info {
+  .formFieldState(@infoText, @infoText, @infoBackground);
+}
+
+
+// Form search
+.form-search {
+	margin-bottom: 0;
+
+	.control-group {
+		margin-bottom: 0px;
+	}
+
+	.search-query {
+		outline: none;
+		.rounded(0px);			
+
+		&:focus {
+			box-shadow: none;			
+		}
+	}
+
+}
+
+.input-append{
+    &.input-block-level{
+    .add-on{
+        img {
+            max-height: 16px;
+        }
+    }
+  }
+}
+
+// Information in field label
+.label-help-block, .help-block {
+    color: lighten(#595959, 20);
+    display: block;
+    font-size: 80%;
+    font-style: italic;
+    line-height: 130%;
+    font-weight: normal;
+}
+
+.form-horizontal input + .help-block,
+.form-horizontal select + .help-block,
+.form-horizontal textarea + .help-block,
+.form-horizontal .uneditable-input + .help-block,
+.form-horizontal .input-prepend + .help-block,
+.form-horizontal .input-append + .help-block
+.help-block, .form-horizontal .help-block {
+    margin-top: 0px;
+}
+
+// Fix for append-fields shorter than others
+// see http://stackoverflow.com/questions/13306670/bootstrap-prepended-and-appended-input-how-to-max-input-field-width
+.input-append.input-block-level,
+.input-prepend.input-block-level {
+  display: table;
+}
+
+.input-append.input-block-level .add-on,
+.input-prepend.input-block-level .add-on {
+  display: table-cell;
+  width: 1%; /* remove this if you want default bootstrap button width */
+}
+
+.input-append.input-block-level > input,
+.input-prepend.input-block-level > input {
+  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
+  display: table; /* table-cell is not working well in Chrome for small widths */
+  min-height: inherit;
+  width: 100%;
+}
+
+.input-append.input-block-level > input {
+  border-right: 0;
+}
+
+.input-prepend.input-block-level > input {
+  border-left: 0;
+}
+
+.input-append{
+  button.add-on{
+    height: auto;
+  }
+
+  th {
+      a {
+          color: inherit;
+      }
+  }
+
+    td {
+        vertical-align: middle;
+
+        img {
+            border: 2px solid white;
+            border-radius: 4px 4px 4px 4px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        &.actions {
+            text-align: right;
+        }
+    }
+}

templates/admin/default/assets/less/thelia/modals.less

@@ -0,0 +1,15 @@
+//
+// Modals
+// --------------------------------------------------
+
+// Base modal
+.modal {
+  form {
+        margin-bottom: 0;
+    }
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  max-height: none;
+}

templates/admin/default/assets/less/thelia/navbar.less

@@ -0,0 +1,29 @@
+//
+// Navbars (Redux)
+// --------------------------------------------------
+
+
+// COMMON STYLES
+// -------------
+
+// Base class and wrapper
+.navbar {
+    margin-bottom: 0;
+}
+
+// Inner for background effects
+// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
+.navbar-inner {
+    border-top: none;
+    .border-radius(0);
+
+    .container{
+        width: 1170px;
+    }
+}
+
+// Navbar button for toggling navbar items in responsive layouts
+// These definitions need to come after '.navbar .btn'
+.navbar .btn-navbar {
+  .buttonBackground(darken(@btnPrimaryBackground, 5%), darken(@btnPrimaryBackgroundHighlight, 5%));
+}

templates/admin/default/assets/less/thelia/responsive.less

@@ -0,0 +1,24 @@
+// RESPONSIVE CLASSES
+// ------------------
+
+@import "bootstrap/responsive-utilities.less";
+
+
+// MEDIA QUERIES
+// ------------------
+
+// Large desktops
+@import "bootstrap/responsive-1200px-min.less";
+
+// Tablets to regular desktops
+@import "bootstrap/responsive-768px-979px.less";
+
+// Phones to portrait tablets and narrow desktops
+@import "bootstrap/responsive-767px-max.less";
+
+
+// RESPONSIVE NAVBAR
+// ------------------
+
+// From 979px and below, show a button to toggle navbar contents
+@import "bootstrap/responsive-navbar.less";

templates/admin/default/assets/less/thelia/scaffolding.less

@@ -0,0 +1,19 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Body reset
+// -------------------------
+
+body {
+  background: url("@{imgDir}/bg.jpg") repeat;
+}
+
+
+// Links
+// -------------------------
+
+a {
+  font-weight: bold;
+}

templates/admin/default/assets/less/thelia/tables.less

@@ -0,0 +1,63 @@
+.table-striped {
+
+	caption {
+		text-align: left;
+		color: #5A6876;
+		text-transform: uppercase;
+		font-weight: bold;
+		padding-bottom: 0.5em;
+		border-bottom: 2px solid #A5CED8;
+		line-height: 30px;
+
+		.action-btn {
+			display: block;
+			float: right;
+			margin-left: 10px;
+			text-transform: none;
+		}
+	}
+
+	td, th {
+		text-align: center;
+	}
+
+	td.object-title, th.object-title {
+		text-align: left;
+	}
+
+	td.message {
+		// Center the alert box (20px bottom margin) in the table cell
+		padding: 20px 20px 0 20px;
+	}
+
+}
+
+.menu-list-table .table-striped  {
+    td, th {
+        text-align: left;
+    }
+
+    td:nth-child(2) {
+        text-align: right;
+    }
+
+    caption {
+        background-color: #FFFFFF;
+        border-bottom: 2px solid #A5CED8;
+        color: #5A6876;
+        font-weight: bold;
+        line-height: 30px;
+        text-align: left;
+        text-transform: uppercase;
+    }
+}
+
+.table-left-aligned {
+    th, td {
+        text-align: left;
+    }
+
+    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
+        margin-bottom: 0;
+    }
+}

templates/admin/default/assets/less/thelia/tablesorter.less

@@ -0,0 +1,58 @@
+// -- Table sorter --
+th.tablesorter-header { 
+    background: url("data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==") no-repeat center right;     
+    cursor: pointer; 
+    padding-left: 20px; 
+    border-right: 1px solid #dad9c7; 
+    border-left: 1px solid #dad9c7; 
+    margin-left: -1px; 
+}
+th.sorter-false { 
+    background: none;     
+    cursor: auto; 
+    padding-left: 0; 
+    border: none;
+    margin-left: 0; 
+}
+
+th.tablesorter-headerAsc { 
+    background: #F9F9F9 url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7") no-repeat center right; 
+}
+
+th.tablesorter-headerDesc { 
+    background: #F9F9F9 url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7") no-repeat center right; 
+}
+
+.tablesorter{
+	.disabled{
+		display: none;
+	}
+}
+
+.tablesorter .value-popup:after {
+	content : attr(data-value);
+	position: absolute;
+	bottom: 14px;
+	left: -7px;
+	min-width: 18px;
+	.rounded(4px);
+	#gradient > .vertical(rgb(243,153,34), rgb(227,83,11));
+	box-shadow: inset 0px 0px 2px rgba(250,250,250,0.5), 0px 1px 3px rgba(0,0,0,0.2);
+	color: white;
+	font-size: 11px;
+	padding: 2px 5px;
+	text-align: center;
+}
+.tablesorter .value-popup:before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-top: 8px solid #777;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	top: -8px;
+	left: 50%;
+	margin-left: -8px;
+	margin-top: -1px;
+}

templates/admin/default/assets/less/thelia/thelia.less

@@ -0,0 +1,248 @@
+@import "variables.less";
+// @import "navbar.less";
+// @import "scaffolding.less";
+// @import "type.less";
+// @import "breadcrumbs.less";
+// @import "forms.less";
+// @import "datepicker.less";
+// @import "modals.less";
+// @import "tables.less";
+// @import "tablesorter.less";
+
+// // -- Base styling ------------------------------------------------------------
+
+// #wrapper {
+// 	padding-top: 20px;
+// }
+
+// // Bootstrap Adjustements ------------------------------------------------------
+
+// .footer {
+//   background: none repeat scroll 0 0 transparent;
+//   border: medium none;
+//   box-shadow: none;
+//   color: #7D756A;
+//   margin-bottom: 0;
+//   padding: 35px 15px 15px;
+//   text-align: left;
+// }
+
+// // -- Top bar -----------------------------------------------------------------
+
+// .topbar {
+
+// 	background: url("@{imgDir}/top.jpg") repeat-x;	
+// 	font-weight: bold;
+
+// 	.version-info {
+//         line-height: @topBarHeight;
+//         height: @topBarHeight;
+// 		background: url("@{imgDir}/top-bar-logo.png") left -3px no-repeat;
+// 		padding-left: 100px;
+//         text-shadow: 0px 1px 1px black;
+//         color: #6d737b;
+// 	}
+
+//     .form-search, .btn-group{
+//         margin-top: 10px;
+//     }
+// }
+
+// // -- Brandbar ----------------------------------------------------------------
+
+// .loginpage {
+
+// 	.hero-unit {
+//     	background-color: transparent;
+
+//     	h1 {
+//     		margin-bottom: 25px;
+//     	}
+// 	}
+
+// 	.well {
+//   		background-color: #E4E3DE;
+//   		border: 1px solid rgba(0, 0, 0, 0.2);
+//   		box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.05) inset;
+// 	}
+// }
+
+
+// // -- Feed list on home page --------------------------------------------------
+
+// .feed-list {
+// 	h2 {
+// 		font-size: 24px;
+// 		line-height: 120%;
+// 		color: #E9730F;
+
+// 		a {
+// 			&:hover {
+// 				color: inherit;
+// 				text-decoration: none;
+// 			}
+// 		}
+// 	}
+
+// 	h3 {
+// 		margin-bottom: 0;
+// 		padding-bottom: 0;
+// 		font-size: 90%;
+// 		line-height: 100%;
+// 	}
+
+// 	.feed-list-item{
+// 		padding: 10px 20px;
+// 	}
+// }
+
+// .brandbar {
+
+//     background: url("@{imgDir}/header.jpg") repeat-x;
+//     height: 90px;
+
+//     a.brand {
+//         text-indent: -133337px;
+//         display: block;
+//         float: left;
+//         margin-right: 20px;
+//         background: url("@{imgDir}/logo.png") 0px 12px no-repeat;
+//         width: 124px;
+//         height: 63px;
+//     }
+
+//     .breadcrumb {
+//         .rounded(0px);
+//         padding: 25px 0px 25px 30px;
+//         background: url("@{imgDir}/logo-light.png") left center no-repeat;
+//         float: left;
+//         margin: 12px 0px 0px 0px;
+
+//         a {
+//             color: #949aa1;
+//             text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
+//         }
+
+//         .active {
+//             color: #FFF;
+//             text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
+//             border-bottom: 1px dotted white;
+//         }
+//     }
+
+//     .Blocmoncompte {
+//         float: right;
+//         margin: 0px;
+//         padding: 0px;
+//         margin-top: 35px;
+
+//         color: white;
+//         font-size: 13px;
+//         text-shadow: 0px 1px 0px rgba(0,0,0,0.8);
+//     }
+
+//     dt {
+//         float: left;
+//         margin-right: 15px;
+//     }
+
+//     .deconnexion {
+//         float: right;
+//         margin: 0px;
+
+//         a {
+//             text-indent: -13337px;
+//             display: block;
+//             background: url("@{imgDir}/deconnexion.png") no-repeat;
+//             width: 23px;
+//             height: 24px;
+//         }
+//     }
+// }
+
+// .brandbar-wide {
+//         width: 100%;
+// }
+
+// // -- Login form --------------------------------------------------------------
+
+// .form-signin {
+// 	max-width: 400px;
+// 	padding: 19px 29px 29px;
+// 	margin: 0 auto 20px;
+// 	background-color: #fff;
+// 	border: 1px solid #e5e5e5;
+// 	.rounded(5px);
+// 	.box-shadow;
+// }
+
+// // -- General decoration of back-office boxes ---------------------------------
+
+// .general-block-decorator {
+//     background: none repeat scroll 0 0 white;
+//     border: 1px solid rgba(0, 0, 0, 0.2);
+//     border-radius: 4px 4px 4px 4px;
+//     box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 3px rgba(0, 0, 0, 0.1);
+//     padding: 1em;
+//     margin-bottom: 20px;
+
+//     // The block title
+//     .title {
+//         color: #5A6876;
+//         text-transform: uppercase;
+//         font-weight: bold;
+//         padding-bottom: 0.5em;
+//         line-height: 30px;
+//     }
+
+//     .title-without-tabs {
+//         border-bottom: 2px solid #A5CED8;
+//         margin-bottom: 0.5em;
+//     }
+
+//     // The action bar on the right
+//     .actions {
+//         text-align: right;
+//     }
+// }
+
+// // The overall form container
+// .form-container {
+
+//     // The inner toolbar (flags & save buttons)
+//     .inner-toolbar {
+
+//         line-height: 30px;
+//         margin-bottom: 1em;
+//         border-bottom: 1px dotted #A5CED8;
+//         padding-bottom: 0.5em;
+
+//         .inner-actions {
+//             text-align: right;
+//         }
+
+//         .nav-pills {
+//             margin-bottom: 0;
+
+//             li a {
+//                 padding: 4px;
+//                 opacity: 0.3;
+//             }
+
+//             li.active a {
+//                 opacity: 1;
+//                 background-color: #E7E7E7;
+//             }
+//         }
+//     }
+// }
+
+// // -- Editable tweaks ---------------------------------------------------------
+
+// .editable-click, a.editable-click, a.editable-click:hover {
+//   border-bottom: 1px dotted #0088CC;
+// }
+
+// .ui-slider{
+// 	margin-top: 23px;
+// }

templates/admin/default/assets/less/thelia/type.less

@@ -0,0 +1,41 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Headings
+// -------------------------
+
+h3, h4 {
+    color: #5a6876;
+    text-align: left;
+    background: -webkit-gradient(linear, left top, left bottom, from(#42505d), to(#72808e));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+h3 {
+    padding: 0px;
+    margin:  0px 0px 20px 0px;
+    font-size : 18px;
+}
+
+h4 {
+    padding: 0px 0px 20px 0px;
+    margin: 0px;  
+}
+
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+    border: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(250, 250, 250, 0.1);
+    width: 90%;
+    margin: 0 auto;
+    clear: both;
+    margin-top: 20px;
+}

templates/admin/default/assets/less/thelia/variables.less

@@ -0,0 +1,31 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+@imgDir : '../img';
+@topBarHeight: 50px;
+
+
+// Links
+// -------------------------
+@link-color:             #e9720f;
+
+
+// Typography
+// -------------------------
+@font-size-base:          13px;
+
+
+// Buttons
+// -------------------------
+@btn-primary-bg:              #f39922;
+
+
+// Iconography
+// -------------------------
+
+@icon-font-path:          "../fonts/bootstrap/";
+@icon-font-name:          "glyphicons-halflings-regular";