API tools faq
paste
Advertisement
srikat

Untitled

srikat
Feb 8th, 2016
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.80 KB | None | 0 0
raw download clone embed print report
  1. .tabbed-carousel__nav {
  2. position: relative;
  3. z-index: 3;
  4. height: 100px;
  5. border: 1px solid #e5e5e5;
  6. border-radius: 3px
  7. }
  8.  
  9. @media screen and (max-width: 46.8125em) {
  10. .tabbed-carousel__nav {
  11. display:none
  12. }
  13. }
  14.  
  15. .tabbed-carousel__nav.grid-container--thirds .tabbed-carousel__nav-item {
  16. width: 33.33%
  17. }
  18.  
  19. .tabbed-carousel__nav-item {
  20. font-family: "Brandon", Helvetica, Arial, sans-serif;
  21. font-weight: 500;
  22. -webkit-font-smoothing: antialiased;
  23. -webkit-user-select: none;
  24. -moz-user-select: none;
  25. -ms-user-select: none;
  26. user-select: none;
  27. position: relative;
  28. display: inline-block;
  29. height: 98px;
  30. width: 25%;
  31. float: left;
  32. padding-top: 15px;
  33. background-color: #f9fafa;
  34. text-align: center;
  35. -webkit-transition: color 300ms ease, background-color 300ms ease;
  36. transition: color 300ms ease, background-color 300ms ease
  37. }
  38.  
  39. .tabbed-carousel__nav-item:before,.tabbed-carousel__nav-item:after {
  40. content: '';
  41. position: absolute;
  42. left: 0;
  43. top: 0;
  44. width: 0;
  45. height: 0;
  46. border-top: 49px solid transparent;
  47. border-left-width: 24px;
  48. border-left-style: solid;
  49. border-left: 24px solid #e5e5e5;
  50. border-bottom: 49px solid transparent;
  51. -webkit-transition: border-color 300ms ease;
  52. transition: border-color 300ms ease
  53. }
  54.  
  55. .tabbed-carousel__nav-item:before {
  56. border-left-color: #e5e5e5
  57. }
  58.  
  59. .tabbed-carousel__nav-item:after {
  60. left: -1px;
  61. border-left-color: #f9fafa
  62. }
  63.  
  64. .tabbed-carousel__nav-item:first-child {
  65. padding-left: 0
  66. }
  67.  
  68. .tabbed-carousel__nav-item:first-child:before,.tabbed-carousel__nav-item:first-child:after {
  69. display: none
  70. }
  71.  
  72. .tabbed-carousel__nav-item .icon {
  73. display: block;
  74. margin: 0 auto 10px;
  75. fill: #a9a9a9
  76. }
  77.  
  78. .tabbed-carousel__nav-item:focus,.tabbed-carousel__nav-item:hover,.tabbed-carousel__nav-item.js-is-active {
  79. background: #fff
  80. }
  81.  
  82. .segment-online .tabbed-carousel__nav-item:focus .icon,.segment-online .tabbed-carousel__nav-item:hover .icon,.segment-online .tabbed-carousel__nav-item.js-is-active .icon {
  83. fill: #ebb129
  84. }
  85.  
  86. .segment-pos .tabbed-carousel__nav-item:focus .icon,.segment-pos .tabbed-carousel__nav-item:hover .icon,.segment-pos .tabbed-carousel__nav-item.js-is-active .icon {
  87. fill: #368aa9
  88. }
  89.  
  90. .segment-mobile .tabbed-carousel__nav-item:focus .icon,.segment-everywhere .tabbed-carousel__nav-item:focus .icon,.segment-mobile .tabbed-carousel__nav-item:hover .icon,.segment-everywhere .tabbed-carousel__nav-item:hover .icon,.segment-mobile .tabbed-carousel__nav-item.js-is-active .icon,.segment-everywhere .tabbed-carousel__nav-item.js-is-active .icon {
  91. fill: #7ab55c
  92. }
  93.  
  94. .tabbed-carousel__nav-item:focus+.tabbed-carousel__nav-item:after,.tabbed-carousel__nav-item:hover+.tabbed-carousel__nav-item:after,.tabbed-carousel__nav-item.js-is-active+.tabbed-carousel__nav-item:after {
  95. border-left-color: #fff
  96. }
  97.  
  98. .tabbed-carousel__nav-item.js-is-active {
  99. color: #000
  100. }
  101.  
  102. .tabbed-carousel__nav-item:focus {
  103. outline: none;
  104. border-bottom: solid 1px
  105. }
  106.  
  107. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav {
  108. border-color: #a9a9a9
  109. }
  110.  
  111. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item {
  112. background-color: #2a2c2e;
  113. color: #a9a9a9
  114. }
  115.  
  116. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:before {
  117. border-left-color: #a9a9a9
  118. }
  119.  
  120. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:after {
  121. border-left-color: #2a2c2e
  122. }
  123.  
  124. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:focus,.tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:hover,.tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item.js-is-active {
  125. background: #30373b;
  126. color: #fff
  127. }
  128.  
  129. .tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:focus+.tabbed-carousel__nav-item:after,.tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item:hover+.tabbed-carousel__nav-item:after,.tabbed-carousel.page-block--lowlight .tabbed-carousel__nav-item.js-is-active+.tabbed-carousel__nav-item:after {
  130. border-left-color: #30373b
  131. }
  132.  
  133. .tabbed-carousel.page-block--lowlight .tabbed-carousel__item-text h4 {
  134. color: #fff
  135. }
  136.  
  137. .tabbed-carousel__item {
  138. -webkit-transition: opacity 300ms ease 0s;
  139. transition: opacity 300ms ease 0s
  140. }
  141.  
  142. @media screen and (min-width: 46.875em) {
  143. .tabbed-carousel__item {
  144. opacity:0;
  145. z-index: 0;
  146. display: none
  147. }
  148.  
  149. .tabbed-carousel__item:after {
  150. content: "";
  151. display: table;
  152. clear: both
  153. }
  154.  
  155. .tabbed-carousel__item .tabbed-carousel__item-header {
  156. opacity: 0;
  157. -webkit-transition: opacity 300ms ease 300ms, -webkit-transform 500ms ease 300ms;
  158. transition: opacity 300ms ease 300ms, transform 500ms ease 300ms;
  159. -webkit-transform: translateY(30px);
  160. -ms-transform: translateY(30px);
  161. transform: translateY(30px)
  162. }
  163.  
  164. .tabbed-carousel__item .tabbed-carousel__item-text {
  165. opacity: 0;
  166. -webkit-transition: opacity 300ms ease 400ms, -webkit-transform 500ms ease 400ms;
  167. transition: opacity 300ms ease 400ms, transform 500ms ease 400ms;
  168. -webkit-transform: translateY(30px);
  169. -ms-transform: translateY(30px);
  170. transform: translateY(30px)
  171. }
  172.  
  173. .tabbed-carousel__item .tabbed-carousel__item-image {
  174. opacity: 0;
  175. -webkit-transition: opacity 500ms ease 500ms;
  176. transition: opacity 500ms ease 500ms;
  177. -webkit-transition-property: opacity, -webkit-transform;
  178. transition-property: opacity, transform;
  179. -webkit-transform: translateX(20px);
  180. -ms-transform: translateX(20px);
  181. transform: translateX(20px)
  182. }
  183.  
  184. .tabbed-carousel__item.js-is-active {
  185. opacity: 1;
  186. z-index: 1;
  187. display: block
  188. }
  189.  
  190. .tabbed-carousel__item.js-is-active .tabbed-carousel__item-text {
  191. opacity: 1;
  192. -webkit-transform: translateY(0);
  193. -ms-transform: translateY(0);
  194. transform: translateY(0)
  195. }
  196.  
  197. .tabbed-carousel__item.js-is-active .tabbed-carousel__item-header {
  198. opacity: 1;
  199. -webkit-transform: translateY(0);
  200. -ms-transform: translateY(0);
  201. transform: translateY(0)
  202. }
  203.  
  204. .tabbed-carousel__item.js-is-active .tabbed-carousel__item-image {
  205. opacity: 1;
  206. -webkit-transform: translateX(0);
  207. -ms-transform: translateX(0);
  208. transform: translateX(0)
  209. }
  210. }
  211.  
  212. @media screen and (max-width: 46.8125em) {
  213. .tabbed-carousel__item {
  214. padding:15px 0 10px;
  215. margin-bottom: 0;
  216. border-top: 1px solid #e5e5e5
  217. }
  218.  
  219. .tabbed-carousel__item .tabbed-carousel__item-header {
  220. padding-right: 20px;
  221. margin-bottom: 5px
  222. }
  223. }
  224.  
  225. .segment-online .tabbed-carousel__nav-item:focus {
  226. border-bottom: solid 1px #ebb129
  227. }
  228.  
  229. .segment-pos .tabbed-carousel__nav-item:focus {
  230. border-bottom: solid 1px #368aa9
  231. }
  232.  
  233. .segment-mobile .tabbed-carousel__nav-item:focus {
  234. border-bottom: solid 1px #7ab55c
  235. }
  236.  
  237. .tabbed-carousel__item-image {
  238. z-index: 1
  239. }
  240.  
  241. .tabbed-carousel__item-content {
  242. z-index: 2
  243. }
  244.  
  245. .tabbed-carousel__mobile-image {
  246. margin: 1.875em 0
  247. }
  248.  
  249. @media screen and (max-width: 46.8125em) {
  250. .tabbed-carousel__item-text {
  251. padding-top:0.625em
  252. }
  253. }
  254.  
  255. .tabbed-carousel__item-text>p {
  256. margin-bottom: 1.5625em
  257. }
  258.  
  259. .tabbed-carousel__item-text>p:last-child {
  260. margin-bottom: 0.9375em
  261. }
  262.  
  263. .tabbed-carousel__nav-prev,.tabbed-carousel__nav-next {
  264. content: '';
  265. position: absolute;
  266. top: 50%;
  267. max-width: 64px;
  268. min-width: 64px;
  269. height: 50px;
  270. margin-top: -25px;
  271. z-index: 2;
  272. background: #000;
  273. border-radius: 3px;
  274. padding: 16px 18px;
  275. overflow: hidden;
  276. white-space: nowrap;
  277. -webkit-transition: max-width 333ms;
  278. transition: max-width 333ms
  279. }
  280.  
  281. .tabbed-carousel__nav-prev:before,.tabbed-carousel__nav-next:before {
  282. width: 24px;
  283. height: 11px;
  284. display: block;
  285. position: absolute;
  286. top: 20px;
  287. content: ''
  288. }
  289.  
  290. .tabbed-carousel__nav-prev:focus,.tabbed-carousel__nav-next:focus,.tabbed-carousel__nav-prev:hover,.tabbed-carousel__nav-next:hover {
  291. max-width: 200px
  292. }
  293.  
  294. .tabbed-carousel__nav-prev:focus .tab-label,.tabbed-carousel__nav-next:focus .tab-label,.tabbed-carousel__nav-prev:hover .tab-label,.tabbed-carousel__nav-next:hover .tab-label {
  295. opacity: 1;
  296. -webkit-transform: translateX(0);
  297. -ms-transform: translateX(0);
  298. transform: translateX(0)
  299. }
  300.  
  301. .tabbed-carousel__nav-prev .tab-label,.tabbed-carousel__nav-next .tab-label {
  302. font-family: "Brandon", Helvetica, Arial, sans-serif;
  303. font-weight: 900;
  304. -webkit-font-smoothing: antialiased;
  305. pointer-events: none;
  306. display: inline-block;
  307. opacity: 0;
  308. color: #fff;
  309. font-size: 0.75em;
  310. text-transform: uppercase;
  311. -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  312. transition: opacity 300ms, transform 300ms
  313. }
  314.  
  315. .tabbed-carousel__nav-prev {
  316. display: none
  317. }
  318.  
  319. @media screen and (min-width: 1440px) {
  320. .tabbed-carousel__nav-prev {
  321. display:inline-block;
  322. left: -265px
  323. }
  324. }
  325.  
  326. .tabbed-carousel__nav-prev:before {
  327. background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2011%22%3E%3Cpath%20fill=%22%23FFF%22%20d=%22M5.5%200c.1%200%20.3%200%20.4.1.1.2.1.6-.1.8L1.2%205.5l4.6%204.6c.2.2.2.5%200%20.7-.2.2-.5.2-.7%200l-5-5c-.1-.2-.1-.5%200-.7l5-5c.1-.1.3-.1.4-.1z%22/%3E%3Cpath%20fill=%22%23FFF%22%20d=%22M.5%205h23c.2%200%20.5.2.5.5s-.3.5-.5.5H.5C.2%206%200%205.8%200%205.5S.2%205%20.5%205z%22/%3E%3C/svg%3E");
  328. left: 18px
  329. }
  330.  
  331. .tabbed-carousel__nav-prev>span {
  332. padding-left: 32px;
  333. -webkit-transform: translateX(100%);
  334. -ms-transform: translateX(100%);
  335. transform: translateX(100%)
  336. }
  337.  
  338. .tabbed-carousel__nav-next {
  339. display: none
  340. }
  341.  
  342. @media screen and (min-width: 1440px) {
  343. .tabbed-carousel__nav-next {
  344. display:block;
  345. right: -265px
  346. }
  347. }
  348.  
  349. .tabbed-carousel__nav-next:before {
  350. background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2011%22%3E%3Cpath%20fill=%22%23FFF%22%20d=%22M18.5%2011c-.1%200-.3%200-.4-.1-.2-.2-.2-.5%200-.7l4.6-4.6L18.1%201c-.2-.2-.2-.5%200-.7.2-.2.5-.2.7%200l5%205c.2.2.2.5%200%20.7l-5%205c-.1-.1-.2%200-.3%200z%22/%3E%3Cpath%20fill=%22%23FFF%22%20d=%22M23.5%206H.5C.2%206%200%205.8%200%205.5S.2%205%20.5%205h23c.2%200%20.5.2.5.5s-.3.5-.5.5z%22/%3E%3C/svg%3E");
  351. right: 18px
  352. }
  353.  
  354. .tabbed-carousel__nav-next>span {
  355. padding-right: 32px;
  356. -webkit-transform: translateX(-100%);
  357. -ms-transform: translateX(-100%);
  358. transform: translateX(-100%)
  359. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!