dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// start css refactor + optimisation

Browse Source
This commit is contained in:
Kevin Granger
2013-12-10 19:08:42 +01:00
parent ffc7c2f19d
commit 7e7e2986b2
8 changed files with 4573 additions and 1308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default-bootstrap/config.rb
+1 -1
View File
@@ -15,7 +15,7 @@ environment = :development
# relative_assets = true # relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment: # To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false line_comments = false
color_output = false color_output = false
# If you prefer the indented syntax, you might want to regenerate this # If you prefer the indented syntax, you might want to regenerate this
themes/default-bootstrap/css/global.css
+4375 -1133
View File
File diff suppressed because it is too large Load Diff
themes/default-bootstrap/header.tpl
+8 -12
View File
@@ -45,14 +45,12 @@
<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" /> <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" /> <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="stylesheet" href="{$css_dir}highdpi.css" type="text/css" media="screen" /> <!-- <link rel="stylesheet" href="{$css_dir}highdpi.css" type="text/css" media="screen" /> -->
<link rel="stylesheet" href="{$css_dir}bootstrap_lib/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="{$css_dir}font-awesome.css" type="text/css" media="all" />
<link rel="stylesheet" href="{$css_dir}jquery/uniform.default.css" type="text/css" media="all" /> <link rel="stylesheet" href="{$css_dir}jquery/uniform.default.css" type="text/css" media="all" />
<link rel="stylesheet" href="{$css_dir}jquery/footable.core.css" type="text/css" media="all" /> <link rel="stylesheet" href="{$css_dir}jquery/footable.core.css" type="text/css" media="all" />
<link rel="stylesheet" href="{$css_dir}jquery/jquery.bxslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="{$css_dir}jquery/jquery.bxslider.css" type="text/css" media="all" />
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,600,600italic,700,700italic,800,800italic' type='text/css' />
{if isset($css_files)} {if isset($css_files)}
{foreach from=$css_files key=css_uri item=media} {foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri}" type="text/css" media="{$media}" /> <link rel="stylesheet" href="{$css_uri}" type="text/css" media="{$media}" />
@@ -98,17 +96,15 @@
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if} lang_{$lang_iso}"> <body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if} lang_{$lang_iso}">
{if !$content_only} {if !$content_only}
{if isset($restricted_country_mode) && $restricted_country_mode} {if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country"> <div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p> <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
</div> </div>
{/if} {/if}
<div id="page"> <div id="page">
<!-- Header -->
<div class="header-container"> <div class="header-container">
<header id="header"> <header id="header">
<div class="header-row"> <div class="header-row">
<nav class="container clearfix"> <nav class="container clearfix">
<div id="header_user_info"> <div id="header_user_info">
{if $logged} {if $logged}
<a class="logout" href="{$link->getPageLink('index', true, NULL, "mylogout")|escape:'html'}" rel="nofollow" title="{l s='Log me out'}">{l s='Sign out'}</a> <a class="logout" href="{$link->getPageLink('index', true, NULL, "mylogout")|escape:'html'}" rel="nofollow" title="{l s='Log me out'}">{l s='Sign out'}</a>
@@ -182,13 +178,13 @@
{/if} {/if}
<div id="contact-link"> <div id="contact-link">
<a href="{$link->getPageLink('contact', true)|escape:'html'}" title="{l s='contact'}">{l s='Contact Us'}</a> <a href="{$link->getPageLink('contact', true)|escape:'html'}" title="{l s='contact'}">{l s='Contact Us'}</a>
</div> <!-- #contact-link --> </div>
{if $shop_phone} {if $shop_phone}
<span class="shop-phone"> <span class="shop-phone">
<i class="icon-phone"></i>{l s='Call us now toll free:'} <strong>{$shop_phone}</strong> <i class="icon-phone"></i>{l s='Call us now toll free:'} <strong>{$shop_phone}</strong>
</span> </span>
{/if} {/if}
</nav><!-- .container-row --> </nav>
</div> <!-- .header-row --> </div> <!-- .header-row -->
<div class="container header-row-2"> <div class="container header-row-2">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}"> <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
@@ -198,7 +194,7 @@
{$HOOK_TOP} {$HOOK_TOP}
</div> </div>
</div> <!-- .header-row-2 --> </div> <!-- .header-row-2 -->
</header> <!-- #header --> </header>
</div> <!-- .header-container --> </div> <!-- .header-container -->
<div class="columns-container"> <div class="columns-container">
<div id="columns" class="container"> <div id="columns" class="container">
themes/default-bootstrap/sass/_bootstrap.scss
+59
View File
@@ -0,0 +1,59 @@
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 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 by @mdo and @fat.
*/
// Core variables and mixins
@import "bootstrap_lib/variables";
@import "bootstrap_lib/mixins";
// Reset
@import "bootstrap_lib/normalize";
//@import "bootstrap_lib/print";
// Core CSS
@import "bootstrap_lib/scaffolding";
@import "bootstrap_lib/type";
@import "bootstrap_lib/code";
@import "bootstrap_lib/grid";
@import "bootstrap_lib/tables";
@import "bootstrap_lib/forms";
@import "bootstrap_lib/buttons";
// Components
@import "bootstrap_lib/component-animations";
//@import "bootstrap_lib/glyphicons";
@import "bootstrap_lib/dropdowns";
@import "bootstrap_lib/button-groups";
@import "bootstrap_lib/input-groups";
@import "bootstrap_lib/navs";
@import "bootstrap_lib/navbar";
@import "bootstrap_lib/breadcrumbs";
@import "bootstrap_lib/pagination";
@import "bootstrap_lib/pager";
@import "bootstrap_lib/labels";
@import "bootstrap_lib/badges";
//@import "bootstrap_lib/jumbotron";
@import "bootstrap_lib/thumbnails";
@import "bootstrap_lib/alerts";
@import "bootstrap_lib/progress-bars";
@import "bootstrap_lib/media";
@import "bootstrap_lib/list-group";
@import "bootstrap_lib/panels";
@import "bootstrap_lib/wells";
@import "bootstrap_lib/close";
// Components w/ JavaScript
//@import "bootstrap_lib/modals";
//@import "bootstrap_lib/tooltip";
//@import "bootstrap_lib/popovers";
//@import "bootstrap_lib/carousel";
// Utility classes
@import "bootstrap_lib/utilities";
@import "bootstrap_lib/responsive-utilities";
themes/default-bootstrap/sass/_theme_variables.scss
+14 -16
View File
@@ -1,4 +1,3 @@
@import 'compass';
@import 'bootstrap_lib/_variables'; @import 'bootstrap_lib/_variables';
//------- FONTS //------- FONTS
@@ -84,18 +83,17 @@ $scroll-button-hover-color: $base-text-color;
$tr-even-bg: #fdfdfd; $tr-even-bg: #fdfdfd;
//sub heading (h2,h3) define //sub heading (h2,h3) define
@mixin sub-heading { @mixin sub-heading {
color: $base-heading-color; color: $base-heading-color;
text-transform: uppercase; text-transform: uppercase;
font-family:$font-custom; font-family: $font-custom;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
line-height:20px; line-height: 20px;
padding:14px 20px 17px; padding: 14px 20px 17px;
margin: 0 0 20px; margin: 0 0 20px;
position: relative; position: relative;
border:1px solid $base-border-color; border: 1px solid $base-border-color;
border-bottom:none; border-bottom: none;
background:$base-box-bg; background: $base-box-bg;
}
}
themes/default-bootstrap/sass/bootstrap_lib/bootstrap.scss
Vendored
-59
View File
@@ -1,59 +0,0 @@
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 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 by @mdo and @fat.
*/
// Core variables and mixins
@import "variables";
@import "mixins";
// Reset
@import "normalize";
@import "print";
// Core CSS
@import "scaffolding";
@import "type";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "component-animations";
@import "glyphicons";
@import "dropdowns";
@import "button-groups";
@import "input-groups";
@import "navs";
@import "navbar";
@import "breadcrumbs";
@import "pagination";
@import "pager";
@import "labels";
@import "badges";
@import "jumbotron";
@import "thumbnails";
@import "alerts";
@import "progress-bars";
@import "media";
@import "list-group";
@import "panels";
@import "wells";
@import "close";
// Components w/ JavaScript
@import "modals";
@import "tooltip";
@import "popovers";
@import "carousel";
// Utility classes
@import "utilities";
@import "responsive-utilities";
themes/default-bootstrap/sass/global.sass
+113 -87
View File
@@ -1,8 +1,33 @@
@import compass @import compass
@import compass/reset @import compass/reset
@import _theme_variables @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,600,600italic,700,700italic,800,800italic)
@import theme_variables
@import bootstrap
//struture @import ../css/font-awesome.css
a:hover
text-decoration: none
@media only screen and (min-width: 1200px)
.container
padding-left: 0
padding-right: 0
body
min-width: 320px
height: 100%
background: $dark-background
line-height: 18px
font-size: 13px
color: $base-body-color
&.content_only
background: none
textarea
resize: none
//structure
#page #page
#header #header
z-index: 10 z-index: 10
@@ -20,8 +45,10 @@
//title //title
#center_column #center_column
.page_product_box .page_product_box
h3 h3
@include sub-heading @include sub-heading
//text //text
p.info-title p.info-title
@@ -500,7 +527,7 @@ table.table_block td
tr tr
background: $table-background background: $table-background
/******************** product elements ****************/ //product elements
.product-name .product-name
font-size: 17px font-size: 17px
line-height: 23px line-height: 23px
@@ -1167,7 +1194,7 @@ ul.footer_links
// max 479px // max 479px
@media (max-width: $screen-xs - 1) @media (max-width: $screen-xs - 1)
float: left float: left
width: 00% width: 100%
text-align: left text-align: left
padding-bottom: 10px padding-bottom: 10px
clear: both clear: both
@@ -1733,8 +1760,7 @@ div.star a:hover
#social_block #social_block
float: left float: left
width: 50% width: 50%
padding: 23px 30px 16px 0 padding: 22px 15px 0 15px
background: #3F3F3F
// max 767px // max 767px
@media (max-width: $screen-xs-max) @media (max-width: $screen-xs-max)
width: 100% width: 100%
@@ -1772,17 +1798,17 @@ div.star a:hover
a a
&:before &:before
content: "" content: ""
h4 h4
float: right float: right
margin-bottom: 0 margin-bottom: 0
font-size: 21px font-size: 21px
line-height: 25px line-height: 25px
text-transform: none text-transform: none
padding: 0 10px 0 0 padding: 0 10px 0 0
// max 767px // max 767px
@media (max-width: $screen-xs-max) @media (max-width: $screen-xs-max)
display: none display: none
text-align: center text-align: center
.bottom-footer .bottom-footer
position: absolute position: absolute
bottom: -55px bottom: -55px
@@ -1852,24 +1878,24 @@ div.star a:hover
text-align: center text-align: center
width: 57px width: 57px
.table tbody > tr > td .table
vertical-align: middle tbody > tr > td
&.cart_quantity vertical-align: middle
padding: 41px 14px 25px &.cart_quantity
width: 88px padding: 41px 14px 25px
.cart_quantity_button width: 88px
margin-top: 3px .cart_quantity_button
a margin-top: 3px
float: left a
margin-right: 3px float: left
&+ a margin-right: 3px
margin-right: 0 &+ a
&.cart_delete, margin-right: 0
&.price_discount_del &.cart_delete,
padding: 5px &.price_discount_del
.table tfoot > tr > td padding: 5px
vertical-align: middle tfoot > tr > td
vertical-align: middle
.cart_delete a.cart_quantity_delete, .cart_delete a.cart_quantity_delete,
a.price_discount_delete a.price_discount_delete
@@ -1919,57 +1945,57 @@ a.price_discount_delete
background: $light-background background: $light-background
@media (max-width: 767px) @media (max-width: 767px)
#order-detail-content #order-detail-content
#cart_summary #cart_summary
table, thead, tbody, th, td, tr table, thead, tbody, th, td, tr
display: block display: block
thead tr thead tr
position: absolute position: absolute
top: -9999px top: -9999px
left: -9999px left: -9999px
tr
border-bottom: 1px solid #ccc
overflow: hidden
td
border: none
position: relative
width: 50%
float: left
white-space: normal
&.cart_product
&.cart_description
&.cart_avail
clear: both
&.cart_unit
&.cart_quantity
clear: both
padding: 9px 8px 11px 18px
&.cart_total
&.cart_delete
width: 100%
clear: both
text-align: right
&:before
display: inline-block
padding-right: 0.5em
position: relative
top: -3px
div
display: inline
td:before
content: attr(data-title)
display: block
tfoot
td
float: none
width: 100%
&:before
display: inline
tr tr
.text-right, .price border-bottom: 1px solid #ccc
display: block overflow: hidden
float: left td
width: 50% border: none
position: relative
width: 50%
float: left
white-space: normal
&.cart_product
&.cart_description
&.cart_avail
clear: both
&.cart_unit
&.cart_quantity
clear: both
padding: 9px 8px 11px 18px
&.cart_total
&.cart_delete
width: 100%
clear: both
text-align: right
&:before
display: inline-block
padding-right: 0.5em
position: relative
top: -3px
div
display: inline
td:before
content: attr(data-title)
display: block
tfoot
td
float: none
width: 100%
&:before
display: inline
tr
.text-right, .price
display: block
float: left
width: 50%
.cart_voucher .cart_voucher
vertical-align: top !important vertical-align: top !important
themes/default-bootstrap/sass/global.scss
+3
View File
@@ -1,4 +1,7 @@
@import 'compass';
@import '_theme_variables'; @import '_theme_variables';
@import 'bootstrap';
/* ################################################################################################## /* ##################################################################################################
PRESTASHOP SCSS PRESTASHOP SCSS
################################################################################################## */ ################################################################################################## */