%PDF- %PDF-
Direktori : /home/emergentqj/jugement/wp-content/plugins/td-composer/td-multi-purpose/less/ |
Current File : /home/emergentqj/jugement/wp-content/plugins/td-composer/td-multi-purpose/less/buttons.less |
// general buttons style .tdm-btn { display: inline-block; font-family: @font3; text-align: center; position: relative; pointer-events: auto !important; .tdm-btn-text { vertical-align: middle; .transition(all 0.3s); } i { vertical-align: middle; line-height: 1; .transition(all 0.3s); &:first-child { margin-right: 14px; } &:last-child { margin-left: 14px; } } } // ie text gradient fix .ie9, .ie10, .ie11 { // buttons .tdm-btn { .tdm-btn-text, i { background: transparent; } } // titles div .tdm-title { background: transparent; } // fancy text .tdm-fancy-title span { background: transparent; } // icon .tds-icon:before { background: transparent; } // numbered counter .tdm-counter-number { background: transparent; } } /* -- SIZES -- */ // Small .tdm-btn-sm { font-size: 13px; line-height: 29px; //31px; height: 31px; padding: 0 16px; } // Medium .tdm-btn-md { font-size: 13px; line-height: 39px; height: 41px; padding: 0 24px; /* responsive portrait phone */ @media (max-width: @responsive_p_phone_max) { line-height: 40px; height: 40px; padding: 0 23px; } } // Large .tdm-btn-lg { font-size: 15px; font-weight: 500; line-height: 52px; //55px; height: 55px; padding: 0 36px; /* responsive portrait tablet */ @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) { line-height: 52px; height: 52px; padding: 0 34px; } /* responsive portrait phone */ @media (max-width: @responsive_p_phone_max) { font-size: 14px; line-height: 50px; height: 50px; padding: 0 30px; } } // X-Large .tdm-btn-xlg { font-size: 17px; font-weight: 500; line-height: 68px; //75px; height: 75px; padding: 0 50px; } /*-- STYLES --*/ // Style 1 - default .tds-button1 { background-color: @td_theme_color; color: #fff; .transition(all 0.3s ease); .transform(translateZ(0)); &:before { content: ''; background-color: #222; width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: -1; opacity: 0; .transition(opacity 0.3s ease); } &:hover:before { opacity: 1; } } // Style 2 & 6 - bordered .tds-button2, .tds-button6 { position: relative; .transition(all 0.3s ease); .tdm-btn-text, i { color: @td_theme_color; } &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-color: @td_theme_color; .transition(all 0.3s); } &:hover { .tdm-btn-text, i { color: #222; } &:before { border-color: #222; } } } // Styles 3 - shadow .tds-button3 { color: #000; background-color: #fff; .transition(all 0.3s ease); z-index: 0; &:before { content: ''; background-color: #fff; width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: -1; opacity: 0; .transition(all 0.2s ease); } } // Styles 4 - 3d cube .tds-button4 { background-color: #000; display: inline-block; .tdm-btn { .transition(all 0.3s ease); background-color: #000; color: #fff; overflow: hidden; vertical-align: middle; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tdm-button-b { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } // XLarge &.tdm-btn-xlg-wrap { .transform(translateZ(0)); .tdm-button-a { transform: rotateX(0deg) translateZ(38px); } .tdm-button-b { transform: rotateX(90deg) translateZ(38px); } } // Large &.tdm-btn-lg-wrap { .transform(translateZ(0)); .tdm-button-a { transform: rotateX(0deg) translateZ(27px); } .tdm-button-b { transform: rotateX(90deg) translateZ(27px); } } // Medium &.tdm-btn-md-wrap { .transform(translateZ(0)); .tdm-button-a { transform: rotateX(0deg) translateZ(20px); } .tdm-button-b { transform: rotateX(90deg) translateZ(20px); } } // Small &.tdm-btn-sm-wrap { .transform(translateZ(0)); .tdm-button-a { transform: rotateX(0deg) translateZ(15px); } .tdm-button-b { transform: rotateX(90deg) translateZ(15px); } } // Hover effect &:hover { // XLarge &.tdm-btn-xlg-wrap { .tdm-button-a { transform: rotateX(-90deg) translateZ(38px); } .tdm-button-b { transform: rotateX(-0deg) translateZ(38px); } } // Large &.tdm-btn-lg-wrap { .tdm-button-a { transform: rotateX(-90deg) translateZ(27px); } .tdm-button-b { transform: rotateX(-0deg) translateZ(27px); } } // Medium &.tdm-btn-md-wrap { .tdm-button-a { transform: rotateX(-90deg) translateZ(20px); } .tdm-button-b { transform: rotateX(-0deg) translateZ(20px); } } // Small &.tdm-btn-sm-wrap { .tdm-button-a { transform: rotateX(-90deg) translateZ(15px); } .tdm-button-b { transform: rotateX(-0deg) translateZ(15px); } } } } .tdm-block-button-full { .tds-button4 { display: block; } } // Styles 5 - Text .tds-button5 { min-width: 0; height: auto; padding: 0; line-height: initial !important; .transition(all 0.3s ease); text-align: left; .tdm-btn-text, i { color: #000; } &:hover { .tdm-btn-text, i { color: @td_theme_color; } } } // Styles 6 - Border with shadow .tds-button6 { &:after { content: ''; position: absolute; width: 100%; height: 100%; background-color: @td_theme_color; .opacity(0.14); .transition(all 0.4s); z-index: -1; } &:hover:after { top: 0; left: 0; } }