PageRenderTime 449ms CodeModel.GetById 85ms RepoModel.GetById 1ms app.codeStats 0ms

/skin/frontend/rwd/default/scss/email-inline.scss

https://gitlab.com/vincent.perdereau/picandparts
Sass | 679 lines | 570 code | 37 blank | 72 comment | 0 complexity | b1af26ef7e81deb5dd15986407fde7d9 MD5 | raw file
  1. //
  2. // Magento
  3. //
  4. // NOTICE OF LICENSE
  5. //
  6. // This source file is subject to the Academic Free License (AFL 3.0)
  7. // that is bundled with this package in the file LICENSE_AFL.txt.
  8. // It is also available through the world-wide-web at this URL:
  9. // http://opensource.org/licenses/afl-3.0.php
  10. // If you did not receive a copy of the license and are unable to
  11. // obtain it through the world-wide-web, please send an email
  12. // to license@magento.com so we can send you a copy immediately.
  13. //
  14. // DISCLAIMER
  15. //
  16. // Do not edit or add to this file if you wish to upgrade Magento to newer
  17. // versions in the future. If you wish to customize Magento for your
  18. // needs please refer to http://www.magento.com for more information.
  19. //
  20. // @category design
  21. // @package rwd_default
  22. // @copyright Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
  23. // @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
  24. //
  25. // ==============================================
  26. // Styles for transactional emails that will be applied to the HTML markup via an "inlining" process when emails are
  27. // sent. Inlining CSS is the most reliable way to get styles to apply uniformly across all email clients.
  28. //
  29. // Refer to the Emogrifier README to see what selectors are supported: https://github.com/jjriv/emogrifier#emogrifier
  30. //
  31. // Since the styles in this file are being applied to the HTML markup using an inlining library, Sass nesting was not
  32. // used in order to keep the CSS selectors simple.
  33. // ==============================================
  34. @import "framework";
  35. /* ============================================ *
  36. * General Styles
  37. * ============================================ */
  38. body, table.body, th, h1, h2, h3, h4, h5, h6, td, p, strong {
  39. font-family: Verdana, Arial;
  40. font-weight: normal;
  41. }
  42. body {
  43. margin: 0;
  44. padding: 0;
  45. text-align: left;
  46. color: $c-gray;
  47. background-color: $c-email-background;
  48. }
  49. // Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
  50. body {
  51. -webkit-text-size-adjust: 100%;
  52. -ms-text-size-adjust: 100%;
  53. }
  54. // Remove spacing from around tables in Outlook 2007 and 2010
  55. table {
  56. mso-table-lspace: 0pt;
  57. mso-table-rspace: 0pt;
  58. }
  59. // CSS Property to properly resize images in IE
  60. img {
  61. -ms-interpolation-mode: bicubic;
  62. }
  63. body {
  64. background: $c-email-background;
  65. font-size: 12px;
  66. margin: 0;
  67. padding: 0;
  68. }
  69. table,
  70. table td {
  71. border-collapse: collapse;
  72. }
  73. table td {
  74. vertical-align: top;
  75. }
  76. a {
  77. color: $c-email-action;
  78. }
  79. .cell-content.product-info,
  80. .bundle-item,
  81. .bundle-item-parent.product-info,
  82. .bill-ship-to,
  83. .method-information {
  84. text-align: left;
  85. }
  86. html,
  87. #background-table {
  88. background-color: $c-email-background;
  89. }
  90. #background-table {
  91. font-size: $f-size-xs;
  92. margin: 0 auto;
  93. padding: 0;
  94. }
  95. .container-td {
  96. width: 100%;
  97. }
  98. .container-table {
  99. width: 600px;
  100. margin: 0 auto;
  101. }
  102. /* ============================================ *
  103. * Header Styles
  104. * ============================================ */
  105. .top-content {
  106. border: 1px solid $c-email-background;
  107. background: #FFF;
  108. padding: 5px;
  109. }
  110. table.logo-container {
  111. width: 100%;
  112. }
  113. td.logo {
  114. padding: 15px 0px 10px 5px;
  115. }
  116. td.logo a {
  117. float: left;
  118. display: block;
  119. }
  120. td.logo img {
  121. outline: none;
  122. text-decoration: none;
  123. }
  124. td.email-heading {
  125. padding: 0 1%;
  126. background: $c-email-background-secondary;
  127. border-right: 1px dashed $c-email-border;
  128. text-align: center;
  129. width: 58%;
  130. }
  131. td.email-heading h1 {
  132. font-weight: 700;
  133. font-size: 16px;
  134. margin: 1em 0;
  135. line-height: 20px;
  136. text-transform: uppercase;
  137. }
  138. td.email-heading p {
  139. line-height: 20px;
  140. margin: 1em 0;
  141. }
  142. td.store-info {
  143. padding: 2%;
  144. background: $c-email-background-secondary;
  145. width: 40%;
  146. }
  147. td.store-info h4 {
  148. margin-bottom: 5px;
  149. font-size: $f-size-xxs;
  150. }
  151. td.store-info p {
  152. font-size: $f-size-xxs;
  153. line-height: 17px;
  154. margin: 1em 0;
  155. }
  156. td.store-info a {
  157. text-decoration: underline;
  158. color: $c-email-action;
  159. }
  160. /* ============================================ *
  161. * Content - Styles
  162. * ============================================ */
  163. td.order-details {
  164. padding: 5px 15px;
  165. text-align: center;
  166. }
  167. td.order-details h3 {
  168. font-size: 17px;
  169. margin-bottom: 10px;
  170. margin-top: 15px;
  171. font-weight: normal;
  172. }
  173. td.order-details p {
  174. font-size: $f-size-xxs;
  175. margin: 1em 0 15px;
  176. }
  177. .items {
  178. width: 100%;
  179. padding: 10px 15px;
  180. }
  181. .cell-name {
  182. padding: 10px 15px;
  183. background: $c-email-cell;
  184. font-weight: 700;
  185. text-transform: uppercase;
  186. text-align: left;
  187. font-size: $f-size-xxs;
  188. }
  189. .cell-name.align-center {
  190. text-align: center;
  191. }
  192. .cell-name.align-right {
  193. text-align: right;
  194. }
  195. .method-info,
  196. .method-info h6,
  197. .method-info p,
  198. .method-info strong {
  199. text-align: left;
  200. }
  201. .cell-content {
  202. padding: 10px 15px;
  203. border-top: 1px solid $c-email-background;
  204. font-family: Verdana, Arial;
  205. }
  206. .product-info a.product-name {
  207. font-weight: 700;
  208. text-transform: uppercase;
  209. color: $c-email-action;
  210. text-decoration: none;
  211. vertical-align: middle;
  212. float: left;
  213. width: 100%;
  214. display: block;
  215. }
  216. .table-totals {
  217. width: 100%;
  218. background: $c-email-background-secondary;
  219. }
  220. .padding-totals {
  221. padding: 20px 15px;
  222. text-align: right;
  223. line-height: 20px;
  224. }
  225. .padding-totals .last {
  226. width: 1px; // Constrain the width of the right column so that prices are displayed close to labels
  227. white-space: nowrap;
  228. }
  229. .table-totals table {
  230. width: 100%;
  231. }
  232. .shipping {
  233. padding-bottom: 5px;
  234. }
  235. .grand-total {
  236. border-top: 1px solid $c-email-border;
  237. padding-top: 5px;
  238. font-weight: 700;
  239. font-size: 15px;
  240. }
  241. .shipping-information td {
  242. padding: 0 15px;
  243. }
  244. .shipping-information > td > table {
  245. width: 100%;
  246. }
  247. .address-details {
  248. padding-top: 10px;
  249. }
  250. .address-details,
  251. .method-info {
  252. text-align: left;
  253. padding: 10px 15px 0;
  254. }
  255. .address-details h6,
  256. .method-info h6 {
  257. font-size: 12px;
  258. font-weight: 700;
  259. margin-bottom: 0px;
  260. margin-top: 5px;
  261. text-transform: uppercase;
  262. }
  263. .address-details p {
  264. font-size: 12px;
  265. line-height: 18px;
  266. margin-bottom: 15px;
  267. margin-top: 2px;
  268. }
  269. .method-info {
  270. padding-bottom: 10px;
  271. }
  272. .method-info p {
  273. font-size: 12px;
  274. margin-top: 2px;
  275. margin-bottom: 30px;
  276. line-height: 18px;
  277. }
  278. .closing-text {
  279. text-align: center;
  280. font-size: 22px;
  281. line-height: 32px;
  282. font-weight: normal;
  283. margin-bottom: 75px;
  284. margin-top: 30px;
  285. }
  286. .product-info > p,
  287. .product-info > dl {
  288. float: left;
  289. width: 100%;
  290. display: block;
  291. }
  292. .product-info > dl {
  293. line-height: 20px;
  294. }
  295. .action-content {
  296. padding: 10px 20px 15px;
  297. line-height: 18px;
  298. }
  299. .action-content h1 {
  300. font-size: 25px;
  301. font-weight: bold;
  302. margin-bottom: 25px;
  303. margin-top: 5px;
  304. line-height: 28px;
  305. }
  306. .line-separator {
  307. height: 5px;
  308. }
  309. .method-info p, .method-info dl {
  310. padding: 0;
  311. }
  312. /* ============================================ *
  313. * Comments and Messages - Styles
  314. * ============================================ */
  315. // Style comments from users/admins
  316. .message-container {
  317. margin: 15px 0;
  318. width: 100%;
  319. background-color: $c-email-highlighted-background;
  320. border: 1px solid $c-email-highlighted-border;
  321. }
  322. .message-container,
  323. .order-information > td > table,
  324. .top-content > table {
  325. width: 100%;
  326. }
  327. .message-container td {
  328. padding: 10px 15px;
  329. margin: 0;
  330. }
  331. // Highlight information like username/password
  332. .highlighted-text {
  333. border: 1px solid $c-email-border;
  334. padding: 13px 18px;
  335. background: $c-email-cell;
  336. }
  337. /* ============================================ *
  338. * Bundle Products - Styles
  339. * ============================================ */
  340. .bundle-item {
  341. padding: 0px 15px;
  342. text-align: left;
  343. }
  344. .bundle-item-parent {
  345. border-top: 1px solid $c-email-background;
  346. padding: 10px 15px;
  347. }
  348. .bundle-item-parent.product-info {
  349. text-align: left;
  350. }
  351. .bundle-item > div,
  352. .bundle-item > strong {
  353. float: left;
  354. width: 100%;
  355. display: block;
  356. }
  357. .bundle-item.bundle-details > div {
  358. margin-bottom: 15px;
  359. }
  360. /* ============================================ *
  361. * Buttons - Styles
  362. * ============================================ */
  363. .action-button {
  364. width: 220px;
  365. margin: 0 auto;
  366. text-align: center;
  367. }
  368. .action-button td {
  369. background-color: $c-email-action;
  370. color: #FFF;
  371. width: 100%;
  372. height: 40px;
  373. display: block;
  374. border: 0 none;
  375. text-align: center;
  376. text-transform: uppercase;
  377. vertical-align: middle;
  378. white-space: nowrap;
  379. margin: 0 auto;
  380. }
  381. .action-button a {
  382. width: 100%;
  383. height: 100%;
  384. line-height: 40px;
  385. font-size: 15px;
  386. display: inline-block;
  387. text-decoration: none;
  388. }
  389. .action-button a span {
  390. color: #FFF;
  391. }
  392. /* ============================================ *
  393. * Newsletter - Default Template Styles
  394. * ============================================ */
  395. hr {
  396. background-color: #D9D9D9;
  397. border: medium none;
  398. color: #D9D9D9;
  399. height: 1px;
  400. margin-left: 3%;
  401. width: 94%;
  402. }
  403. td.email-heading h1 {
  404. margin-top: 25px;
  405. }
  406. td.store-info h4 {
  407. font-size: 12px;
  408. margin-top: 13px;
  409. font-weight: bold;
  410. }
  411. table, table td {
  412. padding: 0;
  413. margin: 0;
  414. }
  415. table.columns.heading {
  416. margin-bottom: 3px;
  417. }
  418. .main-image {
  419. width: 100%;
  420. margin-bottom: 3px;
  421. margin-top: 5px;
  422. }
  423. table.row {
  424. padding: 0px;
  425. width: 100%;
  426. position: relative;
  427. }
  428. table.container table.row {
  429. display: block;
  430. margin: 5px;
  431. }
  432. td.wrapper {
  433. padding: 10px 0 0;
  434. position: relative;
  435. }
  436. .full {
  437. width: 100%;
  438. }
  439. .half {
  440. width: 50%;
  441. }
  442. .half.left {
  443. padding-right: 5px;
  444. padding-left: 10px;
  445. }
  446. .half.right {
  447. padding-left: 5px;
  448. }
  449. .columns {
  450. width: 100%;
  451. }
  452. td.expander {
  453. visibility: hidden;
  454. width: 0px;
  455. padding: 0;
  456. }
  457. table.button {
  458. width: 100%;
  459. overflow: hidden;
  460. }
  461. table.button td,
  462. table.social-button td {
  463. display: block;
  464. width: auto;
  465. text-align: center;
  466. color: #FFF;
  467. padding: 8px 4%;
  468. cursor: pointer;
  469. }
  470. .social-button {
  471. width: 94% ;
  472. margin: 5px 3%;
  473. }
  474. table.button td {
  475. background: $c-email-action;
  476. }
  477. table.social-button td {
  478. padding: 5px 4%;
  479. }
  480. table.button td a,
  481. table.social-button td a {
  482. color: #FFF;
  483. font-size: 16px;
  484. text-transform: uppercase;
  485. text-decoration: none;
  486. }
  487. table.social-button td a {
  488. font-size: 12px;
  489. font-weight: normal;
  490. }
  491. .panel {
  492. background-color: #F2F2F2;
  493. border: 1px solid #D9D9D9;
  494. }
  495. .panel p {
  496. margin: 10px;
  497. }
  498. .panel h6 {
  499. font-size: 20px;
  500. margin: 15px 10px;
  501. }
  502. .panel a {
  503. color: $c-email-action;
  504. text-decoration: none;
  505. }
  506. .sidebar-links table {
  507. width: 100%;
  508. }
  509. .sidebar-links td {
  510. width: 100%;
  511. }
  512. .sidebar-links a {
  513. margin: 8px 0;
  514. float: left;
  515. width: 100%;
  516. text-align: left;
  517. }
  518. .sidebar-links table p {
  519. margin: 0 10px;
  520. }
  521. .sidebar-links a span {
  522. margin-left: 3%;
  523. }
  524. table.facebook td,
  525. table.twitter td,
  526. table.google-plus td,
  527. table.facebook td a,
  528. table.twitter td a,
  529. table.google-plus td a {
  530. text-align: center;
  531. height: 17px;
  532. }
  533. table.facebook td {
  534. background: #3B5998;
  535. }
  536. table.twitter td {
  537. background: #00ACEE;
  538. }
  539. table.google-plus td {
  540. background: #DB4A39;
  541. }
  542. /* ============================================ *
  543. * Product Grid
  544. * ============================================ */
  545. h2.products {
  546. padding-left: 10px;
  547. padding-right: 10px;
  548. }
  549. .products-grid > tr > td {
  550. width: 25%;
  551. }
  552. .products-grid > tr > td img {
  553. width: 100%;
  554. height: auto;
  555. }
  556. .products-grid .product-wrapper {
  557. padding-left: 10px;
  558. padding-right: 10px;
  559. }
  560. .product-name {
  561. margin: 0 0 5px 0;
  562. color: $c-h2;
  563. font-style: normal;
  564. text-rendering: optimizeLegibility;
  565. text-transform: uppercase;
  566. line-height: 1.4;
  567. font-size: $f-size;
  568. }
  569. p.product-name {
  570. font-weight: bold;
  571. }
  572. p.sku {
  573. margin: 0 0 5px;
  574. }
  575. /* ============================================ *
  576. * Product Grid - Price Styles
  577. * The price styles are copied directly from the _common.scss file
  578. * ============================================ */
  579. .price-box {
  580. margin: $element-spacing 0;
  581. font-family: $f-stack-sans;
  582. }
  583. .price-box p {
  584. margin-bottom: 0;
  585. }
  586. .price-notice {
  587. color: $c-text-gray;
  588. }
  589. .price-box .price {
  590. color: $c-text-primary;
  591. font-size: $f-size-xl;
  592. }
  593. .price-box .price,
  594. .price {
  595. font-family: $f-stack-sans;
  596. }
  597. .price-box .price-label {
  598. color: $c-text-gray;
  599. white-space: nowrap;
  600. font-family: $f-stack-special;
  601. }
  602. .price-box .minimal-price-link {
  603. padding-left: 1em;
  604. color: $c-text-primary;
  605. display: block; /* We want this to show on its own line, otherwise the layout looks funky */
  606. .label {
  607. color: $c-text-gray;
  608. }
  609. }
  610. /* -------------------------------------------- *
  611. * Price Box - Special
  612. */
  613. .price-box .old-price,
  614. .price-box .special-price {
  615. display: inline-block;
  616. .price-label {
  617. display: none;
  618. }
  619. .price {
  620. display: inline-block;
  621. }
  622. }
  623. .price-box .old-price {
  624. .price {
  625. color: $c-text-gray;
  626. text-decoration: line-through;
  627. }
  628. }
  629. .price-box .special-price {
  630. color: $c-text-primary;
  631. padding-left: 1em;
  632. .price-label {
  633. color: #D84D3C;
  634. }
  635. }
  636. /* -------------------------------------------- *
  637. * Price Box - Taxes
  638. */
  639. .price-box .price-excluding-tax,
  640. .price-box .price-including-tax {
  641. display: block;
  642. }