API tools faq
paste
Guest User

Untitled

a guest
Feb 17th, 2018
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.33 KB | None | 0 0
raw download clone embed print report
  1. /* CSS FOR BRP */
  2.  
  3. /***************************************************************************
  4. * PAGE TOP BAR
  5. ***************************************************************************/
  6. #pageTopbarWrapper {}
  7.  
  8. #pageTopbar {}
  9.  
  10. /*
  11. * Main Navbar
  12. * --------------------------------------------------
  13. */
  14. .navbar-main.affix {
  15. position: fixed;
  16. top: 0;
  17. width: 100%;
  18. z-index: 6000;
  19. }
  20. .navbar-main {
  21. margin-bottom: 0;
  22. border: 1px solid transparent;
  23. -webkit-border-radius: 0px;
  24. -moz-border-radius: 0px;
  25. border-radius: 0px;
  26.  
  27. background-color: #fff;
  28. border-color: #e5e5e5;
  29. background-image: none;
  30. }
  31. .navbar-main #cart_link {
  32. display: block;
  33. text-decoration: none !important;
  34. color: #333;
  35. border: 2px solid #ccc;
  36. border-radius: 4px;
  37. padding: 5px;
  38. height: 40px;
  39. margin-top: 5px;
  40. margin-bottom: 5px;
  41. }
  42. .navbar-main #cart_link .cart_icon {
  43. float: left;
  44. margin-right: 10px;
  45. }
  46. .navbar-main #cart_link .cart_info {
  47. float: left;
  48. line-height: 28px;
  49. }
  50.  
  51. .navbar-main .navbar-brand {
  52. color: #666;
  53. text-shadow: none;
  54. }
  55. .navbar-main .navbar-brand:hover,
  56. .navbar-main .navbar-brand:focus {
  57. color: #666;
  58. background-color: transparent;
  59. }
  60. .navbar-main .navbar-text {
  61. color: #666;
  62. }
  63. @media (min-width: 768px) and (max-width: 991px) {
  64. .navbar-main .nav > li > a {
  65. padding: 15px 15px;
  66. }
  67. }
  68. @media (min-width: 992px) and (max-width: 1199px) {
  69. .navbar-main .nav > li > a {
  70. padding: 15px 15px;
  71. }
  72. }
  73. @media (min-width: 1200px) {
  74. .navbar-main .nav > li > a {
  75. padding: 15px 20px;
  76. }
  77. }
  78. .navbar-main .navbar-nav > li > a {
  79. color: #666;
  80. text-shadow: none;
  81. text-transform: uppercase;
  82. font-weight: bold;
  83. }
  84. .navbar-main .navbar-nav > li > a:hover,
  85. .navbar-main .navbar-nav > li > a:focus {
  86. color: #666;
  87. border-bottom: 2px solid red;
  88. background-color: transparent;
  89. }
  90. .navbar-main .navbar-nav > .active > a,
  91. .navbar-main .navbar-nav > .active > a:hover,
  92. .navbar-main .navbar-nav > .active > a:focus {
  93. color: #666;
  94. border-bottom: 2px solid red;
  95. background-color: transparent;
  96. }
  97. .navbar-main .navbar-nav > .disabled > a,
  98. .navbar-main .navbar-nav > .disabled > a:hover,
  99. .navbar-main .navbar-nav > .disabled > a:focus {
  100. color: #ccc;
  101. border-bottom: 2px solid red;
  102. background-color: transparent;
  103. }
  104. .navbar-main .navbar-nav > .open > a,
  105. .navbar-main .navbar-nav > .open > a:hover,
  106. .navbar-main .navbar-nav > .open > a:focus {
  107. color: #666;
  108. border-bottom: 2px solid red;
  109. background-color: transparent;
  110. }
  111. .navbar-main .navbar-toggle {
  112. border-color: #3c5fa0;
  113. }
  114. .navbar-main .navbar-toggle:hover,
  115. .navbar-main .navbar-toggle:focus {
  116. background-color: transparent;
  117. border-color: #666;
  118. border-bottom: 2px solid red;
  119. }
  120. .navbar-main .navbar-toggle .icon-bar {
  121. background-color: #3c5fa0;
  122. }
  123. .navbar-main .navbar-toggle:hover .icon-bar,
  124. .navbar-main .navbar-toggle:focus .icon-bar {
  125. background-color: #666;
  126. }
  127. .navbar-main .navbar-collapse,
  128. .navbar-main .navbar-form {
  129. border-color: #e5e5e5;
  130. }
  131. .navbar-main .navbar-nav .dropdown-menu {
  132. background-color: #fff;
  133. -webkit-border-radius: 0px;
  134. -moz-border-radius: 0px;
  135. border-radius: 0px;
  136. border-color: #ccc;
  137. }
  138. .navbar-main .navbar-nav .dropdown-menu > li > a {
  139.  
  140. }
  141. .navbar-main .navbar-nav .dropdown-menu > li > a:hover,
  142. .navbar-main .navbar-nav .dropdown-menu > li > a:focus {
  143. color: #666;
  144. background-color: transparent;
  145.  
  146. background-image: none;
  147. }
  148. .navbar-main .navbar-nav .dropdown-menu > .active > a,
  149. .navbar-main .navbar-nav .dropdown-menu > .active > a:hover,
  150. .navbar-main .navbar-nav .dropdown-menu > .active > a:focus {
  151. color: #666;
  152. background-color: transparent;
  153.  
  154. }
  155. .navbar-main .navbar-nav .dropdown-menu > .open > a,
  156. .navbar-main .navbar-nav .dropdown-menu > .open > a:hover,
  157. .navbar-main .navbar-nav .dropdown-menu > .open > a:focus {
  158. color: #666;
  159. background-color: transparent;
  160.  
  161. }
  162.  
  163. @media (max-width: 767px) {
  164. .navbar-main .navbar-nav > li > a {
  165. color: #666;
  166. }
  167. .navbar-main .navbar-nav > li > a:hover,
  168. .navbar-main .navbar-nav > li > a:focus {
  169. color: #666;
  170. background-color: transparent;
  171. border-bottom: 2px solid red;
  172. }
  173. .navbar-main .navbar-nav > .active > a,
  174. .navbar-main .navbar-nav > .active > a:hover,
  175. .navbar-main .navbar-nav > .active > a:focus {
  176. color: #666;
  177. background-color: transparent;
  178. border-bottom: 2px solid red;
  179. }
  180. .navbar-main .navbar-nav > .open > a,
  181. .navbar-main .navbar-nav > .open > a:hover,
  182. .navbar-main .navbar-nav > .open > a:focus {
  183. color: #fff;
  184. background-color: #666;
  185. border-bottom: 2px solid red;
  186. }
  187. .navbar-main .navbar-nav .open .dropdown-menu {
  188. background-color: transparent;
  189. border: 0;
  190. -webkit-box-shadow: none;
  191. box-shadow: none;
  192. }
  193. .navbar-main .navbar-nav .open .dropdown-menu > li > a {
  194. color: #666;
  195. }
  196. .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover,
  197. .navbar-main .navbar-nav .open .dropdown-menu > li > a:focus {
  198. color: #666;
  199. background-color: transparent;
  200. border-bottom: 2px solid red;
  201. }
  202. .navbar-main .navbar-nav .open .dropdown-menu > .active > a,
  203. .navbar-main .navbar-nav .open .dropdown-menu > .active > a:hover,
  204. .navbar-main .navbar-nav .open .dropdown-menu > .active > a:focus {
  205. color: #666;
  206. background-color: transparent;
  207. border-bottom: 2px solid red;
  208. }
  209. .navbar-main .navbar-nav .dropdown-menu > .open > a,
  210. .navbar-main .navbar-nav .dropdown-menu > .open > a:hover,
  211. .navbar-main .navbar-nav .dropdown-menu > .open > a:focus {
  212. color: #666;
  213. background-color: transparent;
  214. border-bottom: 2px solid red;
  215. }
  216. .navbar-main .navbar-nav .open .dropdown-menu > .disabled > a,
  217. .navbar-main .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  218. .navbar-main .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  219. color: #ccc;
  220. background-color: transparent;
  221. border-bottom: 2px solid red;
  222. }
  223. }
  224. .navbar-main .navbar-link {
  225. color: #666;
  226. }
  227. .navbar-main .navbar-link:hover {
  228. color: #666;
  229. border-bottom: 2px solid red;
  230. }
  231. .navbar-main .btn-link {
  232. color: #666;
  233. }
  234. .navbar-main .btn-link:hover,
  235. .navbar-main .btn-link:focus {
  236. color: #666;
  237. border-bottom: 2px solid red;
  238.  
  239. }
  240.  
  241. /* button effects */
  242. $neon: #00FFF8;
  243.  
  244. /* Mixins */
  245. @mixin gradientBg($direction, $startColor, $endColor) {
  246. background: $startColor;
  247. background: -moz-linear-gradient($direction, $startColor 0%, $endColor 80%,$endColor 100%);
  248. background: -webkit-linear-gradient($direction, $startColor 0%, $endColor 80%,$endColor 100%);
  249. background: linear-gradient($direction, $startColor 0%, $endColor 80%,$endColor 100%);
  250. }
  251.  
  252. /* bg shortcodes */
  253. .bg-gradient1 span,
  254. .bg-gradient1:before {
  255. @include gradientBg(180deg, #fa7e29, #F6682F);
  256. }
  257. .bg-gradient2 span,
  258. .bg-gradient2:before {
  259. @include gradientBg(180deg, #39C2C9, #3FC8C9);
  260. }
  261. .pop-onhover.bg-gradient3 span,
  262. .pop-onhover.bg-gradient3:before {
  263. @include gradientBg(180deg, #B9AEF0, #ADA1EB);
  264. }
  265.  
  266. .bg-gradient4 span {
  267. @include gradientBg(180deg, #F6682F, #F6682F);
  268. }
  269. // .bg-gradient4:before {
  270. // @include gradientBg(180deg, #d2d6df, #666a73);
  271. // }
  272.  
  273. /* General */
  274. .wrapper {
  275. margin: 4% auto;
  276. text-align: center;
  277. }
  278.  
  279. h3{
  280. color: #666a73;
  281. font-weight: 300;
  282. letter-spacing: 0.06em;
  283. }
  284.  
  285. a {
  286. text-decoration: none;
  287.  
  288. &:hover,
  289. &:focus,
  290. &:active {
  291. text-decoration: none;
  292. }
  293. }
  294.  
  295. /* fancy Button */
  296. .fancy-button {
  297. display: inline-block;
  298. margin: 20px;
  299. font-family: 'Heebo', Helvetica, Arial, sans-serif;
  300. font-weight: 500;
  301. font-size: 16px;
  302. letter-spacing: 0.07em;
  303. text-transform: uppercase;
  304. line-height: 24px;
  305. color: #ffffff;
  306. position: relative;
  307.  
  308. &.bg-gradient1 {
  309. text-shadow: 0px 0px 1px #BF4C28;
  310. }
  311.  
  312. &.bg-gradient2 {
  313. text-shadow: 0px 0px 1px #227270;
  314. }
  315.  
  316. &.bg-gradient3 {
  317. text-shadow: 0 0 1px #546082;
  318. }
  319.  
  320. &:before {
  321. content: '';
  322. display: inline-block;
  323. height: 40px;
  324. position: absolute;
  325. bottom: -1px;
  326. left: 10px;
  327. right: 10px;
  328. z-index: -1;
  329. border-radius: 2em;
  330. filter: blur(14px) brightness(0.9);
  331. transform-style: preserve-3d;
  332. transition: all 0.3s ease-out;
  333. }
  334. i {
  335. margin-top: -2px;
  336. font-size: 1.265em;
  337. vertical-align: middle;
  338. }
  339. span {
  340. display: inline-block;
  341. padding: 16px 20px;
  342. border-radius: 50em;
  343. position: relative;
  344. z-index: 2;
  345. will-change: transform, filter;
  346. transform-style: preserve-3d;
  347. transition: all 0.3s ease-out;
  348. }
  349. &:focus{
  350. color: #ffffff;
  351. }
  352. &:hover {
  353. color: #ffffff;
  354.  
  355. span {
  356. filter: brightness(.9) contrast(1.2);
  357. transform: scale(0.96);
  358. }
  359. &:before {
  360. bottom: 3px;
  361. filter: blur(6px) brightness(0.8);
  362. }
  363. }
  364. &:active span {
  365. filter: brightness(.75) contrast(1.7);
  366. }
  367. &.pop-onhover {
  368. span {
  369. border-radius: 4px;
  370. }
  371. &:before {
  372. opacity: 0;
  373. bottom: 10px;
  374. }
  375. &:hover {
  376. &:before {
  377. bottom: -7px;
  378. opacity: 1;
  379. filter: blur(16px);
  380. }
  381. span {
  382. // transform: scale(1.03);
  383. transform: scale(1);
  384. }
  385. &:active {
  386. span {
  387. filter: brightness(1) contrast(1);
  388. transform: scale(1);
  389. transition: all 0.2s ease-out;
  390. }
  391. &:before {
  392. bottom: 0;
  393. filter: blur(5px) brightness(0.85);
  394. transition: all 0.2s ease-out;
  395. }
  396. }
  397. }
  398. }
  399. }
  400.  
  401. .pop-onhover.bg-gradient3 span:hover{
  402. @include gradientBg(120deg, #B9AEF0, #ADA1EB);
  403. }
  404.  
  405.  
  406. //solid to gradient
  407.  
  408. .bg-gradient4:before {
  409. bottom: 2px;
  410. opacity: 0.6;
  411. transition: all 0.3s ease-out;
  412. }
  413.  
  414. .bg-gradient4 {
  415. transition: all 1s ease;
  416. span {
  417. outline: 0px solid transparent;
  418. }
  419. &:hover span {
  420. @include gradientBg(-25deg, #FC3D7C, #F76A34);
  421. }
  422. &:focus span, &:active span{
  423. @include gradientBg(25deg, #FC3D7C, #F76A34);
  424. }
  425. &:focus span {
  426. // outline: 2px solid $neon;
  427. box-shadow: 0 0 9px $neon;
  428. }
  429. &:active span {
  430. filter: brightness(.85) contrast(1.3);
  431. }
  432. }
  433.  
  434. .bg-gradient4 span {
  435. text-transform: capitalize;
  436. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!