Advertisement
Emanuel_Leal

produto2.css

Feb 7th, 2017
126
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.08 KB | None | 0 0
  1. /*____________________________*/
  2. img {
  3.     float: left;
  4. }
  5. /*____________________________*/
  6. .cores label:after {
  7.     content: '';
  8.     display: block;
  9.     border-radius: 50%;
  10.     width: 50px;
  11.     height: 50px;
  12.     position: absolute;
  13.     top: 30px;
  14.     border: 6px solid rgba(0,0,0,0);
  15.     transition: 1s;
  16.     -moz-box-sizing: border-box;
  17.          box-sizing: border-box;
  18. }
  19. .cores label:hover:after {
  20.     border: 6px solid rgba(0,0,0,0.1);
  21. }
  22. label[for=verde]:after {
  23.     background-color: #33CC66;
  24.     left: 0;
  25. }
  26. label[for=rosa]:after {
  27.     background-color: #FF6666;
  28.     left: 60px;
  29. }
  30. label[for=azul]:after {
  31.     background-color: #6666FF;
  32.     left: 120px;
  33. }
  34.  
  35. .cores input:checked + label:after {
  36.     border: 6px solid rgba(0,0,0,0.3);
  37. }
  38. .cores input[type=radio]{
  39.     display: none;
  40. }
  41. .cores input:not(:checked) + label img {
  42.     display: none;
  43. }
  44. .cores {
  45.     position: relative;
  46.     padding-top: 90px;
  47. }
  48.  
  49. /* FiroFox */
  50. @media (min--moz-device-pixel-ratio:0){
  51.     .cores legend {
  52.     position: absolute;
  53.     top: 0;
  54.     left: 0;
  55.     }
  56.     fieldset {
  57.         display: table-column;
  58.     }
  59. }
  60. /* FireFox */
  61.  
  62. .cores label img {
  63.     display: block;
  64.     max-width: 100%;
  65. }
  66.  
  67. .produto {
  68.     color: #333;
  69.     line-height: 1.3;
  70.     margin-top: 2em;
  71. }
  72.  
  73. .produto h1 {
  74.     font-size: 1.8em;
  75.     font-weight: bold;
  76. }
  77.  
  78. .produto p {
  79.     font-size: 1.2em;
  80.     font-style: italic;
  81.     margin-bottom: 1em;
  82. }
  83.  
  84. .produto legend {
  85.     display: block;
  86.     font: bold 0.9em/2.5 Arial;
  87.     text-transform: uppercase;
  88. }
  89.  
  90. .comprar {
  91.     background: #91BD3C;
  92.     border: none;
  93.     color: #333;
  94.     font-size: 1.4em;
  95.     text-transform:uppercase;
  96.     box-shadow: 0 1px 3px #777;
  97.     display:block;
  98.     padding: 0.5em 1em;
  99.     margin: 1em 0;
  100. }
  101.  
  102. @media (min-width: 600px){
  103.     img {
  104.         float:left;
  105.     }
  106. }
  107.  
  108. @media (min-width: 630px) {
  109.     .produto {
  110.         position:relative;
  111.         padding-left: 40%;
  112.     }
  113.     .cores {
  114.         position: static;
  115.         padding: 0;
  116.     }
  117.     .cores legend {
  118.         position: static;
  119.     }
  120.     .cores label img {
  121.         position: absolute;
  122.         top: 0;
  123.         left: 0;
  124.         max-height: 100%;
  125.         max-width: 35%;
  126.     }
  127.     .cores label:after{
  128.         position: static;
  129.         float: left;
  130.         margin-right: 10px;
  131.     }
  132.     .produto {
  133.         font-size: 1.2em;
  134.     }
  135. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement