API tools faq
paste
Advertisement
Guest User

AMP Beginner Training Custom CSS

a guest
Jan 16th, 2019
1,748
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.76 KB | None | 0 0
raw download clone embed print report
  1. <style amp-custom>
  2.       body {
  3.         font-family: sans-serif;
  4.         line-height: 1.5rem;
  5.         min-width: 315px;
  6.       }
  7.  
  8.       .headerbar {
  9.         align-items: center;
  10.         background-color: #fff;
  11.         box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  12.         display: flex;
  13.         left: 0;
  14.         padding-left: 1rem;
  15.         position: fixed;
  16.         right: 0;
  17.         top: 0;
  18.         z-index: 999;
  19.       }
  20.  
  21.       .headerbar+:not(amp-sidebar),.headerbar+amp-sidebar+* {
  22.         margin-top: 3.5rem;
  23.       }
  24.  
  25.       h2 {
  26.         font-weight: 400;
  27.         margin: 0;
  28.         padding: 0;
  29.       }
  30.  
  31.       .h2,h2 {
  32.         font-size: 1.4rem;
  33.         line-height: 2.5rem;
  34.       }
  35.  
  36.       .sidebar .dropdown-item,.sidebar .dropdown header,.sidebar .nav-item {
  37.         margin: 0 0 2rem;
  38.       }
  39.  
  40.       .sidebar {
  41.         background-color: rgb(255, 253, 243);
  42.         min-width: 300px;
  43.         padding-left: 1.5rem;
  44.         padding-right: 1.5rem;
  45.         width: 300px;
  46.       }
  47.  
  48.       .navbar-trigger {
  49.         cursor: pointer;
  50.         font-size: 2rem;
  51.         line-height: 3.5rem;
  52.         outline: none;
  53.         padding-right: 1rem;
  54.       }
  55.  
  56.       a {
  57.         color:#000;
  58.         text-decoration: none;
  59.       }
  60.  
  61.       .label {
  62.         font-size: .875rem;
  63.         letter-spacing: .06rem;
  64.         line-height: 1.125rem;
  65.         list-style: none;
  66.         padding: 0;
  67.         text-transform: uppercase;
  68.       }
  69.  
  70.       .dropdown>section>header {
  71.         background-color:rgba(0,0,0,0);
  72.         border: 0;
  73.         outline: none;
  74.       }
  75.  
  76.       .dropdown {
  77.         min-width: 200px
  78.       }
  79.  
  80.       .dropdown.absolute {
  81.         z-index: 100
  82.       }
  83.  
  84.       .dropdown.absolute>section,.dropdown.absolute>section>header {
  85.         height: 100%
  86.       }
  87.  
  88.       .nav-dropdown .dropdown>section>header:after {
  89.         color: #003f93;
  90.         content: "+";
  91.         display: inline-block;
  92.         padding: 0 0 0 1.5rem;
  93.       }
  94.  
  95.       .nav-dropdown .dropdown>[expanded]>header:after {
  96.         content: "–";
  97.       }
  98.  
  99.       .dropdown-items {
  100.         list-style: none;
  101.         padding-left: 20px;
  102.         z-index: 200;
  103.       }
  104.  
  105.       main {
  106.         margin: 0 auto;
  107.         max-width: 700px;
  108.       }
  109.  
  110.       .main-content {
  111.         margin: 0 10px;
  112.       }
  113.  
  114.       .below-hero {
  115.         margin: 20px;
  116.       }
  117.  
  118.       .below-hero>amp-accordion>section {
  119.         margin: 30px 0;
  120.       }
  121.  
  122.       .main-heading {
  123.         font-size: 1.6rem;
  124.         font-weight: 400;
  125.         letter-spacing: .06rem;
  126.         line-height: 2.5rem;
  127.         margin-top: 2.7rem;
  128.         outline: none;
  129.         padding-top: 1rem;
  130.       }
  131.  
  132.       .below-hero>amp-accordion>section>header:after {
  133.         content: "";
  134.         position: absolute;
  135.         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23021425' stroke-width='2' stroke-miterlimit='10' d='M6.967 13.932V0M0 6.966h13.932'/%3E%3C/svg%3E");
  136.         height: 14px;
  137.         width: 14px;
  138.         right: 0px;
  139.         top: 28px;
  140.         cursor: pointer
  141.       }
  142.  
  143.       .below-hero>amp-accordion>section[expanded]>header:after {
  144.         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23021425' stroke-width='2' stroke-miterlimit='10' d='M0 6.966h13.932'/%3E%3C/svg%3E")
  145.       }
  146.  
  147.       .main-text {
  148.         margin-bottom: 2rem;
  149.       }
  150.  
  151.       /* low opacity for non-selected thumbnails */
  152.       amp-selector amp-img[option] {
  153.         opacity: 0.4;
  154.       }
  155.  
  156.       /* normal opacity for the selected thumbnail */
  157.       amp-selector amp-img[option][selected] {
  158.         opacity: 1;
  159.       }
  160.  
  161.       .thumbnail-carousel {
  162.         margin-top: .5rem;
  163.       }
  164.  
  165.       amp-youtube {
  166.         margin-top: 40px;
  167.       }
  168.  
  169.       .subscribe-card-container {
  170.         display: flex;
  171.         justify-content: center;
  172.         margin-top: 20px;
  173.       }
  174.  
  175.       .subscribe-card {
  176.         box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  177.         width: 300px;
  178.       }
  179.  
  180.       .main-form {
  181.         -ms-flex-direction: column;
  182.         -webkit-box-direction: normal;
  183.         -webkit-box-orient: vertical;
  184.         flex-direction: column;
  185.         margin-top: 10px;
  186.         padding: 1rem;
  187.       }
  188.  
  189.       .form-input-container {
  190.         -ms-flex-pack: center;
  191.         -webkit-box-pack: center;
  192.         display: -ms-flexbox;
  193.         display: -webkit-box;
  194.         display: flex;
  195.         justify-content: center;
  196.       }
  197.  
  198.       input {
  199.         font-family: sans-serif;
  200.         font-size: 100%;
  201.       }
  202.  
  203.       .input {
  204.         left: calc(50% - (230px / 2));
  205.         margin-bottom: 1.5rem;
  206.         max-width: 100%;
  207.         position: relative;
  208.         width: 230px;
  209.       }
  210.  
  211.       .input>input {
  212.         background: none;
  213.         border: 0;
  214.         border-bottom: 1px solid #4a4a4a;
  215.         border-radius: 0;
  216.         color: #4a4a4a;
  217.         line-height: 1.5rem;
  218.         margin-top: 1rem;
  219.         outline: 0;
  220.         width: 100%;
  221.       }
  222.  
  223.       .input>label {
  224.         bottom: 0;
  225.         left: 0;
  226.         line-height: 1rem;
  227.         position: absolute;
  228.         right: 0;
  229.         text-align: left;
  230.         top: 0;
  231.       }
  232.  
  233.       .btn {
  234.         background-color: #000;
  235.         border: 1px solid #fff;
  236.         color: #fff;
  237.         cursor: pointer;
  238.         font-family: inherit;
  239.         font-size: 1rem;
  240.         font-weight: inherit;
  241.         left: calc(50% - (150px / 2));
  242.         letter-spacing: .2em;
  243.         line-height: 1.125rem;
  244.         padding: .7em .8em;
  245.         position: relative;
  246.         text-decoration: none;
  247.         text-transform: uppercase;
  248.         vertical-align: middle;
  249.         white-space: nowrap;
  250.         width: 150px;
  251.         word-wrap: normal;
  252.       }
  253.  
  254.       .form-submit-response {
  255.         margin-bottom: 1rem;
  256.         margin-top: 1rem;
  257.       }
  258.  
  259.       .social-bar {
  260.         -ms-flex-pack: center;
  261.         -webkit-box-pack: center;
  262.         display: -ms-flexbox;
  263.         display: -webkit-box;
  264.         display: flex;
  265.         justify-content: center;
  266.         margin-bottom: 1rem;
  267.         margin-top: 3.5rem;
  268.       }
  269.  
  270.       amp-social-share {
  271.         border-radius: 50%;
  272.         background-size: 70%;
  273.       }
  274.       .welcome {
  275.         text-align: center;
  276.       }
  277.       .filter-sort-selectors {
  278.         display: flex;
  279.         flex-flow: row;
  280.         align-items: center;
  281.       }
  282.  
  283.       .product-selector {
  284.         margin-left: 10px;
  285.       }
  286.  
  287.       .sort-by {
  288.         margin-left: 30px;
  289.       }
  290.  
  291.       .order-selector {
  292.         margin-left: 10px;
  293.       }
  294.      
  295.       @media (max-width: 460px) {
  296.         .filter-sort-selectors {
  297.           display: flex;
  298.           flex-flow: column;
  299.           align-items: flex-start;
  300.         }
  301.         .sort-by {
  302.           margin-left: 0;
  303.         }
  304.         .order-selector {
  305.           margin-left: 10px;
  306.           margin-bottom: 16px;
  307.         }
  308.       }
  309.  
  310.       amp-list.product-list div[role="list"] {
  311.         display: grid;
  312.         grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  313.         grid-gap: 1em;
  314.       }
  315.  
  316.       .product-card {
  317.         display: flex;
  318.         flex-direction: column;
  319.         justify-content: start;
  320.         background: #fff;
  321.         min-width: 245px;
  322.         max-width: 505px;
  323.         max-height: 380px;
  324.         border: 1px solid #444
  325.       }
  326.  
  327.       .product-details {
  328.         display: flex;
  329.         flex-direction: column;
  330.         justify-content: center;
  331.         line-height: 1rem;
  332.       }
  333.  
  334.       .product-name {
  335.         height: 10px;
  336.         font-weight: bold;
  337.       }
  338.    
  339.    .top-product {
  340.         font-weight: lighter;
  341.      background-color: yellow;
  342.      text-align: center;
  343.    }
  344.  
  345.       .product-price {
  346.         font-weight: lighter;
  347.       }
  348.  
  349.       .bike-attribute {
  350.         justify-self: end;
  351.       }
  352.  
  353.       .star-rank {
  354.         width: 80px;
  355.         position: relative;
  356.         height: 10px;
  357.       }
  358.  
  359.       .ms-star-bottom, .ms-star-top {
  360.         position: absolute;
  361.         top: 0;
  362.         left: 0;
  363.         overflow: hidden;
  364.       }
  365.  
  366.       .ms-star-bottom::before {
  367.         display: inline-block;
  368.         color: #e8e8e8;
  369.         content: "★★★★★";
  370.       }
  371.  
  372.       .ms-star-top::before {
  373.         color: #F44336;
  374.         display: inline-block;
  375.         content: "★★★★★";
  376.       }
  377.  
  378.       [data-w="0.0"] {
  379.         width: 0
  380.       }
  381.  
  382.       [data-w="0.5"] {
  383.         width: 10%
  384.       }
  385.  
  386.       [data-w="1.0"] {
  387.         width: 20%
  388.       }
  389.  
  390.       [data-w="1.5"] {
  391.         width: 30%
  392.       }
  393.  
  394.       [data-w="2.0"] {
  395.         width: 40%
  396.       }
  397.  
  398.       [data-w="2.5"] {
  399.         width: 50%
  400.       }
  401.  
  402.       [data-w="3.0"] {
  403.         width: 60%
  404.       }
  405.  
  406.       [data-w="3.5"] {
  407.         width: 70%
  408.       }
  409.  
  410.       [data-w="4.0"] {
  411.         width: 80%
  412.       }
  413.  
  414.       [data-w="4.5"] {
  415.         width: 90%
  416.       }
  417.  
  418.       [data-w="5.0"] {
  419.         width: 100%
  420.       }
  421.    
  422.  
  423.         .ampTabContainer {
  424.             display: flex;
  425.             flex-wrap: wrap;
  426.             padding: 4px;
  427.         }
  428.    
  429.         .tabButton[selected] {
  430.             outline: none;
  431.             background: white;
  432.         }
  433.    
  434.         .tabButton {
  435.             list-style: none;
  436.             flex-grow: 1;
  437.             text-align: center;
  438.             cursor: pointer;
  439.         }
  440.    
  441.         .tabContent {
  442.             display: none;
  443.             width: 100%;
  444.             order: 1;
  445.             border: 0;
  446.        }
  447.    
  448.         .tabButton[selected]+.tabContent {
  449.             display: block;
  450.             overflow: hidden;
  451.         }
  452.    
  453.         amp-selector.ampTabContainer [option] {
  454.             padding: 0.7rem;
  455.             margin: 0.7rem;
  456.             outline: none;
  457.         }
  458.    
  459.         amp-selector.ampTabContainer [option][selected] {
  460.             border-bottom: 1px solid rgb(197, 0, 122);
  461.         }
  462.    
  463.        amp-lightbox {
  464.           background: rgba(0,0,0,0.8);
  465.           width: 100%;
  466.           height: 100%;
  467.           position: absolute;
  468.           display: flex;
  469.           align-items: center;
  470.           justify-content: center;
  471.           color:white;
  472.           text-align: center;
  473.         }
  474.    
  475.         amp-list.lightbox-list div[role="list"] {
  476.             display: flex;
  477.             align-items: center;
  478.             justify-content: center;
  479.             color:white;
  480.             text-align: center;
  481.         }
  482.    
  483.        .lightbox-container {
  484.          width: 60vw;
  485.        }
  486.    
  487.        .lightbox-container span {
  488.          position: absolute;
  489.          top: 20px;
  490.          right: 20px;
  491.          font-weight: bold;
  492.          font-size: 16px;
  493.        }
  494.       </style>
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!