Master > 8.0

README.md

@@ -1,6 +1,8 @@
 theme_material_design
 =====================
 
+<h1>Currently a work in progress - not installable</h1>
+
 Odoo Bootstrap Material Design Boilerplate Theme Module (Website)
 
 This module aims to build a frontend theme based on the Google's material design concept and FezVrasta's bootstrap html template (https://github.com/FezVrasta/bootstrap-material-design) to help kickstart your Odoo theme module development. This will aim to remove the dependencies on the bootstrap framework to free up developers to use other platforms.

theme_material_design/__init__.py

@@ -0,0 +1 @@
+

theme_material_design/__init__.pyc

@@ -0,0 +1 @@
+

theme_material_design/__openerp__.py

@@ -0,0 +1,22 @@
+{
+    'name': 'Material Design Theme',
+    'description': 'Material Design Theme',
+    'image': 'material_design_description.jpg',
+    'category': 'Theme',
+    'version': '1.0',
+    'author': 'Luke Branch',
+    'depends': ['theme_common'],
+    'data': [
+        'views/assets.xml',
+        'views/customize_modal.xml',
+        'views/image_content.xml',
+        'views/image_library.xml',
+        'views/snippets_options.xml',
+        'views/snippets.xml',
+    ],
+    'demo': [
+        'demo/home.xml',
+        'demo/blocks.xml',
+    ],
+    'application': True,
+}

theme_material_design/static/description/index.html

@@ -0,0 +1,123 @@
+    <section>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-9">
+          <div>
+            <h1>Theme Material Design</h1>
+            <h2 class="text-muted">Html5 Responsive Bootstrap Theme for Odoo CMS</h2>
+          </div>
+          <hr>
+          <p class="lead">Material Design is a professional responsive HTML5 theme, built using Bootstrap3,
+            the most popular front-end framework for developing responsive, mobile
+            first projects on the web. Just drag &amp; drop the new building blocks
+            you need to easily build your layout. All layouts are made of sections,
+            that you can easily combine to fit your specific project.</p>
+            <img src="/theme_material_design/static/description/Clean_description.jpg" class="img-responsive center-block">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-9">
+          <hr>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-9 mt32">
+          <h2 class="text-muted">Material Design Customization Tool</h2>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-9 mb32">
+          <p style="">Theme Material Design comes with customization tools.&nbsp;You can easily change
+            the background, the colors and the font combination of your website or
+            you a preset.</p>
+        </div>
+      </div>
+      <div class="row">
+      <div class="col-md-3">
+      <img src="/theme_material_design/static/description/customtool.jpg" class="img-responsive center-block">
+      </div>
+        <div class="col-md-6">
+          <h3>Theme Material Design comes with a lot of options</h3>
+          <p>- 6 PRESETS&nbsp;
+            <br>- WIDE OR BOXED LAYOUT
+            <br>- 6 COLOR SCHEMES&nbsp;
+            <br>- 12 BACKGROUND SHADES&nbsp;
+            <br>- 12 FONT COMBINATIONS&nbsp;
+            <br>- 6 ANIMATIONS PRESETS&nbsp;
+            <br>
+            <br>
+          </p>
+          <p>All the background, color and font combinations were made to work together.&nbsp;
+            You&nbsp;can not go wrong with the settings.</p>
+          <h3>Minimalistic Flat Design</h3>
+          <p>Theme Material Design was made with easy customization and branding in mind. Based on
+            simple, modern and typographical elements, it allows you to easily customize
+            your website.</p>
+          <h3>6 Prebuild Presets</h3>
+          <p class="mb16">You don't have the time to play with options? Don't worry, Clean gives
+            you six full presets wich combine colors, fonts and background.</p>
+        </div>
+      </div>
+      <div class="row">
+      <hr>
+        <div class="col-md-9">
+          <h2 class="text-muted">Material Design Building Blocks</h2>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-9 mb32">
+          <p class="mb32">You get a new complete range of building blocks.</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-3">
+          <h4 class="text-muted">STRUCTURE BLOCKS</h4>
+          <ul class="mb16">
+            <li>Title</li>
+            <li>Text</li>
+            <li>Color Block x2</li>
+            <li>Color Block x4</li>
+            <li>Image Text</li>
+            <li>Text Image</li>
+            <li>1 Column</li>
+            <li>2 Columns</li>
+            <li>3 Columns</li>
+          </ul>
+          <h4 class="text-muted mb16">CONTENT BLOCKS</h4>
+          <ul class="mb16">
+            <li>Text Highlight</li>
+            <li>Separator Color</li>
+            <li>Separator Shade</li>
+            <li>Icon Box</li>
+            <li>Icon Box Circle</li>
+            <li>Icon Box Square</li>
+          </ul>
+        </div>
+        <div class="col-md-3">
+          <h4 class="text-muted">FEATURES BLOCKS</h4>
+          <ul class="mb16">
+            <li>Lead Bar</li>
+            <li>Logos Bar</li>
+            <li>Team Profiles</li>
+            <li>Timeline</li>
+            <li>Timeline Compact</li>
+            <li>Event List</li>
+            <li>Discount</li>
+            <li>Pricing</li>
+            <li>Process Step</li>
+          </ul>
+          <h4 class="text-muted">EFFECTS BLOCKS</h4>
+          <ul class="mb16">
+            <li>Big Image</li>
+            <li>Big Image Parallax</li>
+            <li>Slide Banner</li>
+          </ul>
+        </div>
+        <div class="col-md-3">
+          <h3>Customize Your Blocks</h3>
+          <p class="mb16">Each building blocks comes with its own options.&nbsp;</p>
+          <img src="/theme_material_design/static/description/customtool2.jpg" class="img-responsive center-block">
+        </div>
+      </div>
+    </div>
+</section>

theme_material_design/static/src/font/placeholder.txt

@@ -0,0 +1 @@
+

theme_material_design/static/src/less/colors.less

@@ -0,0 +1,120 @@
+
+
+/* Clean Colors */
+
+
+@color-blue: #3498DB; 
+@color-turquoise: #1ABC9C;
+@color-green: #2ECC71;
+@color-yellow: #F1C40F;
+@color-orange: #E67E22;
+@color-red: #E74C3C;
+@color-pink: #f74b94;
+@color-purple: #7a58b2;
+@color-brown: #7b5844;  
+
+@color-blue-dark: #2980B9;
+@color-turquoise-dark: #16A085;
+@color-green-dark: #27AE60;
+@color-yellow-dark: #f3ac12;
+@color-orange-dark: #D35400;
+@color-red-dark: #C0392B;
+@color-pink-dark: #ea3884;
+@color-purple-dark: #593d87;
+@color-brown-dark: #604434;
+
+@color-blue-light: lighten(@color-blue, 20%);
+@color-turquoise-light: lighten(@color-turquoise, 20%);
+@color-green-light: lighten(@color-green, 20%);
+@color-yellow-light: lighten(@color-yellow, 20%);
+@color-orange-light: lighten(@color-orange, 20%);
+@color-red-light: lighten(@color-red, 20%);
+@color-pink-light: lighten(@color-pink, 20%);
+@color-purple-light: lighten(@color-purple, 20%);
+@color-brown-light: lighten(@color-brown, 20%);
+
+@color-clouds: #ECF0F1;
+@color-silver: #BDC3C7;
+@color-concrete: #95A5A6;
+@color-concrete-dark: #445b5c;
+@color-stone: #7F8C8D;
+@color-asphalt: #34495E;
+@color-midnight: #2C3E50;  
+
+@color-wind: #f7f7f7;
+@color-clay: #e1dcd5; 
+@color-sand: #c5bcb1;
+@color-beach: #f3bf91;
+@color-forest: #254c3a;
+@color-twilight: #39225f;
+@color-burgundy: #8e362d;
+@color-marine: #212d3a;
+
+/* GRAYS --------------------------------------------------------- */ 
+
+@gray-ultra-darker:    lighten(#000, 10%);
+@gray-ultra-dark:      lighten(#000, 15%);
+@gray-darker:          lighten(#000, 20%);
+@gray-dark:            lighten(#000, 40%);
+@gray:                 lighten(#000, 55%);
+@gray-light:           lighten(#000, 70%);
+@gray-lighter:         lighten(#000, 80%);
+
+/* Backgrounds Colors ------------------------------------------------*/
+
+@bg-blue: background(@color-blue);
+@bg-turquoise: background(@color-turquoise);
+@bg-green: background(@color-green); 
+@bg-yellow: background(@color-yellow); 
+@bg-orange: background(@color-orange); 
+@bg-red: background(@color-red); 
+@bg-pink: background(@color-pink);
+@bg-purple: background(@color-purple); 
+@bg-brown: background(@color-brown);
+
+@bg-blue-dark:          background(@color-blue-dark);
+@bg-turquoise-dark:     background(@color-turquoise-dark);
+@bg-green-dark:         background(@color-green-dark); 
+@bg-yellow-dark:        background(@color-yellow-dark); 
+@bg-orange-dark:        background(@color-orange-dark); 
+@bg-red-dark:           background(@color-red-dark); 
+@bg-pink-dark:          background(@color-pink-dark);
+@bg-purple-dark:        background(@color-purple-dark); 
+@bg-brown-dark:         background(@color-brown-dark);
+
+@bg-blue-light:         background(@color-blue-light);
+@bg-turquoise-light:    background(@color-turquoise-light);
+@bg-green-light:        background(@color-green-light); 
+@bg-yellow-light:       background(@color-yellow-light); 
+@bg-orange-light:       background(@color-orange-light); 
+@bg-red-light:          background(@color-red-light); 
+@bg-pink-light:         background(@color-pink-light);
+@bg-purple-light:       background(@color-purple-light); 
+@bg-brown-light:        background(@color-brown-light);
+
+
+@bg-clouds:        background(@color-clouds); 
+@bg-silver:        background(@color-silver);
+@bg-concrete:      background(@color-concrete);
+@bg-stone:         background(@color-stone);
+@bg-asphalt:       background(@color-asphalt);
+@bg-midnight:      background(@color-midnight); 
+
+@bg-marine:        background(@color-marine); 
+@bg-wind:          background(@color-wind); 
+@bg-sand:          background(@color-sand); 
+@bg-beach:         background(@color-beach); 
+@bg-forest:        background(@color-forest); 
+@bg-twilight:      background(@color-twilight); 
+@bg-burgundy:      background(@color-burgundy);  
+
+
+.text-blue      { color: @color-blue;}
+.text-turquoise { color: @color-turquoise;}
+.text-green     { color: @color-green;}
+.text-yellow    { color: @color-yellow;}
+.text-orange    { color: @color-orange;}
+.text-red       { color: @color-red;}
+.text-pink      { color: @color-pink;}
+.text-purple    { color: @color-purple;}
+.text-brown     { color: @color-brown;}