?
Path : /home/admin/public_html/old/templates/purity_iii/less/ |
Current File : /home/admin/public_html/old/templates/purity_iii/less/components-addons.less |
/** *------------------------------------------------------------------------------ * @package T3 Framework for Joomla! *------------------------------------------------------------------------------ * @copyright Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * @authors JoomlArt, JoomlaBamboo, (contribute to this project at github * & Google group to become co-author) * @Google group: https://groups.google.com/forum/#!forum/t3fw * @Link: http://t3-framework.org *------------------------------------------------------------------------------ */ // -------------------------------------------------- // COMPONENT ADDONS // -------------------------------------------------- // FEATURES INTRO // -------------------------------------------- .features-intro { .t3-content { padding-top: 0; padding-bottom: 0; } } .row-feature { border-top: 1px solid @t3-border-color; padding: (@t3-global-padding * 2) 0; font-size: @t3-font-size-bigger; color: @gray; line-height: 1.5; // Row Feature in a Page Mass Head .page-masthead & { padding: (@t3-global-padding * 2) 0; } // Bigger padding Desktop @media screen and (min-width: @screen-md) { padding: (@t3-global-padding * 3) 0; // Row Feature in a Page Mass Head .page-masthead & { padding: (@t3-global-padding * 5) 0; } } // Heading h1, h2 , h3 { line-height: 1.15; color: @gray-dark; } h1 { margin-top: 0; margin-bottom: (@t3-global-margin * 3); font-weight: 300; // Bigger font on Tablet / Desktop @media screen and (min-width: @screen-sm) { font-size: @font-size-h1 * 2; } } h1 + p { margin-top: -((@t3-global-margin * 3) - 5px); } h2 { margin-top: 0; margin-bottom: @t3-global-margin / 2; // Bigger font on Tablet / Desktop @media screen and (min-width: @screen-sm) { font-size: @font-size-h1; } } h3 { margin-top: @t3-global-margin; margin-bottom: @t3-global-margin; // Bigger font on Tablet / Desktop @media screen and (min-width: @screen-sm) { font-size: @font-size-h3 * 1.15; } } h3 + p { margin-top: -(@t3-global-margin / 2); } // Row Content // ------------------------ .feature-ct { width: 100%; padding-top: @t3-global-padding / 2; } // Content alignment Tablet / Desktop @media screen and (min-width: @screen-sm) { .pull-left.item-image + .feature-ct { width: 50%; float: right; padding-left: @t3-global-padding; } .pull-right.item-image + .feature-ct { width: 50%; float: left; padding-right: @t3-global-padding; } } // Generic Rows Styles // ------------------------ &.text-center { text-align: center; } // Alternate &.row-feature-alt, &:nth-child(even) { background: @gray-lightest; } // Primary &.row-feature-primary { background: @brand-primary; color: lighten(@brand-primary, 50%); h1, h2, h3 { color: @white; } .feature-ct, p { color: lighten(@brand-primary, 50%); } .btn-primary { border-color: #fff; } } &.row-feature-primary + .row-feature-primary { border-top: 1px solid darken(@brand-primary, 10%); } // Narrower .row-feature-narrow { padding-top: @t3-global-padding; padding-bottom: @t3-global-padding; } &:first-child { border-top: 0; } // Row image // ------------------------ .item-image { width: 100%; float: none; margin-bottom: @t3-global-margin; img { max-width: 100%; } } // Image alignment Tablet / Desktop @media screen and (min-width: @screen-sm) { .pull-left.item-image, .pull-right.item-image { max-width: 50%; min-width: 25%; margin-bottom: 0; } .pull-left.item-image { float: left; text-align: left; padding-right: @t3-global-padding; } .pull-right.item-image { float: right; text-align: right; padding-left: @t3-global-padding; } } // Row title // ------------------------ .page-header { border: 0; margin: 0 0 @t3-global-margin; padding: 0; } // Jumbotron .jumbotron { background: transparent; position: relative; margin-top: 0; margin-bottom: @t3-global-margin; padding-top: 0; padding-bottom: 0; text-align: center; // Bigger margin on Tablet / Desktop @media screen and (min-width: @screen-sm) { margin-bottom: @t3-global-margin * 3; } } // Jumbotron masshead .masthead { } // Gallery // ------------------------- .gallery { .thumbnail { border: 0; padding: 0; a { display: block; border: 1px solid @t3-border-color; padding: 3px; .transition(border-color 0.2s ease-in); img { width: 100%; padding: 0; } // Hover states &:hover, &:focus, &:active { border-color: darken(@t3-border-color, 20%); img { opacity: .7; } } } } } // End } // SUPPORT POLICY // --------------------------------------- .support-policy { // Layout // ------------------ .row-support-policy { margin-bottom: @t3-global-margin; } // The Policy // ------------------- .policy-item { margin-bottom: @t3-global-margin; border: 1px solid @t3-border-color; // Title .col-type { position: relative; height: 100px; border-bottom: 1px solid @t3-border-color; background: @gray-lightest; h3 { position: absolute; bottom: 10px; left: 20px; } } // Detail .col-detail { height: 200px; padding: @t3-global-padding; } // Level .col-level { height: 80px; background: @gray-dark; color: #fff; position: relative; .face, .count-up, > strong { height: 80px; line-height: 80px; } .level-info { width: 160px; position: absolute; left: 0; bottom: 0; // Face exprestion .face { background-image: url(../images/emoticons.png); background-repeat: no-repeat; background-color: rgba(0,0,0,.35); display: table-cell; width: 80px; border-right: 1px solid rgba(0,0,0,.2); } // Percent .count-up { width: 80px; border-right: 1px solid rgba(0,0,0,.2); background-color: rgba(0,0,0,.15); display: table-cell; vertical-align: middle; text-align: center; font-size: @font-size-large; font-weight: bold; } } strong { width: 100%; color: @white; display: block; float: left; font-weight: bold; padding-left: 180px; font-size: @font-size-large; } // Levels &.level-1 { strong { background: @green; } .face { background-position: 0px 0px; } } &.level-2 { strong { background: darken(@green,10%); } .face { background-position: 0px -80px; } } &.level-3 { strong { background: @yellow; } .face { background-position: 0px -160px; } } &.level-4 { strong { background: darken(@yellow,10%); } .face { background-position: 0px -240px; } } &.level-5 { strong { background-color: @orange; } .face { background-position: 0px -320px; } } &.level-6 { strong { background: @red; } .face { background-position: 0px -400px; } } } // End Policy Item } // Row hover // -------------------------------- &:hover { background: @white; border-color: @gray-lighter; .level-info .face { top: -70px; } .level-info .count-up { bottom: 0; } } // Style 2 &.style2 { margin-bottom: @t3-global-margin * 3; } .row-heading { background: @gray-dark; color: @white; overflow: hidden; @media screen and (min-width: @screen-sm) { display: table; width: 100%; } & > div { border-right: 1px solid lighten(@gray-dark, 10%); font-size: @t3-font-size-smaller; font-weight: bold; padding: @t3-global-padding; // Bigger margin on Tablet / Desktop @media screen and (min-width: @screen-sm) { font-size: @t3-font-size-big; display: table-cell; } } } .row-body { border-left: 1px solid @t3-border-color; margin-bottom: @t3-global-margin; @media screen and (min-width: @screen-sm) { display: table; width: 100%; margin-bottom: 0; } & > div { border-right: 1px solid @t3-border-color; border-bottom: 1px solid @t3-border-color; padding: (@t3-global-padding / 2) @t3-global-padding; vertical-align: middle; // Bigger margin on Tablet / Desktop @media screen and (min-width: @screen-sm) { display: table-cell; float: none; } } .col-type { background: @gray-dark; color: @white; font-size: @t3-font-size-bigger; font-weight: bold; // Bigger margin on Tablet / Desktop @media screen and (min-width: @screen-sm) { background: transparent; color: @text-color; } } .col-level { font-size: @t3-font-size-bigger * 2; text-align: center; } .col-status { border-bottom: 0; .face { background-image: url(../images/emoticons.png); background-repeat: no-repeat; display: block; height: 80px; margin: 0 auto; width: 80px; } strong { color: @white; display: block; padding: 3px 0; text-align: center; } } &.level-1 .col-status { background: @green; .face { background-position: 0px 0px; } } &.level-2 .col-status { background: lighten(@green,4%); .face { background-position: 0px -80px; } } &.level-3 .col-status { background: lighten(@green,8%); .face { background-position: 0px -160px; } } &.level-4 .col-status { background: lighten(@green,12%); .face { background-position: 0px -240px; } } &.level-5 .col-status { background: lighten(@green,16%); .face { background-position: 0px -320px; } } &.level-6 .col-status { background: lighten(@green,20%); .face { background-position: 0px -400px; } } } .row-alt { background: @gray-lightest; } .support-yes { color: @green; } .support-no { color: darken(@gray-lighter, 5%); } // End } // PRICING TABLE // --------------------------------------- .pricing-table { padding-top: @t3-global-padding * 2; padding-bottom: @t3-global-padding * 5; .col { margin-bottom: @t3-global-margin * 2; @media (min-width: @screen-md) { margin-bottom: 0; } // Remove padding of the column // ---------------------------- &.no-padding { @media (min-width: 768px) { padding: 0; } } &.shadow { @media (min-width: 768px) { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2); } } // Typography's Pricing table // -------------------------- .big-number { display: inline-block; font-size: @font-size-base * 5; sup { font-size: @font-size-base * 2; top: -1em; } } .btn { font-size: @font-size-base + 6; padding: (@t3-global-padding / 2) @t3-global-padding; } // Header of column // ---------------- .col-header { background: @gray; color: @white; padding: (@t3-global-padding / 2) @t3-global-padding; } // Body of column // -------------- ul { border: 1px solid @gray-lighter; border-bottom: 0; list-style: none; margin: 0; padding: 0; li { border-bottom: 1px solid @gray-lighter; font-size: @font-size-base + 2; padding: (@t3-global-padding / 2) @t3-global-padding; text-align: center; &.row1 { background: @gray-lightest; } i { color: @green; font-size: @font-size-base + 4; } &.no i { color: @red; } &.no { color: @gray-light; text-decoration: line-through; } } } // Footer of column // ---------------- .col-footer { background: @gray-lighter; border: 1px solid darken(@gray-lighter, 10%); padding: @t3-global-padding; } } // Feature column // -------------- .col-feature { z-index: 200; // Larger margin on Tablet / Desktop @media screen and (min-width: @screen-md) { margin-top: -@t3-global-margin; } .col-header { background: @brand-primary; padding: ((@t3-global-padding / 2) + (@t3-global-margin / 2)) @t3-global-padding; } } // PRICING TABLE ( Style 2 ) // ------------------------- &.style2 { // First column .col:first-child { .col-header { border-radius: 5px 0 0 0; } .col-footer { border-radius: 0 0 0 5px; } } // Last column .col:last-child { .col-header { border-radius: 0 5px 0 0; } .col-footer { border-radius: 0 0 5px 0; } } .col-feature { border-radius: 5px; .col-header { border-radius: 5px 5px 0 0; } .col-footer { border-radius: 0 0 5px 5px; } } } } // OUR TEAM // --------------------------------------- .our-team { .lead { margin-bottom: @t3-global-margin * 3; } .thumbnail { text-align: center; border: 0; padding: 0 @t3-global-padding; .caption { padding-bottom: @t3-global-padding; } h3 { margin-bottom: 5px; } .btn { border-radius: 50%; height: 32px; line-height: 32px; margin: 0 2px; padding: 0; text-align: center; width: 32px; &:hover { background: @brand-primary; border-color: @brand-primary; color: @white; } } } } // MISC // -------------------------------------------- .control-group .controls script + .row-fluid { margin-left: 0; + .row-fluid { margin-left: 0; } } // Video Wrapper // ------------- // Use to wrap the Video and make it responsive .video-wrapper { position: relative; padding-bottom: 51%; padding-top: 30px; height: 0; // The video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }