Advertisement
mushroomh3ad

consorcios

Oct 15th, 2024
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Java 8.26 KB | None | 0 0
  1. /* CUSTOMIZACAO PAGINA PRINCIPAL */
  2. .simulador-consorcios .container {
  3.     background-color: var(--verdee);
  4.     background-image: url("../../img/simuladores/simulador-main.png");
  5.     background-repeat: no-repeat;
  6.     background-size: cover;
  7.     border-radius: 16px 16px 0 0;
  8. }
  9.  
  10. .simulador-consorcios .container-title h3 span {
  11.     color: var(--branco);
  12.     display: block;
  13. }
  14.  
  15. .simulador-consorcios .card {
  16.     border-radius: 8px;
  17.     padding: 6px;
  18. }
  19.  
  20. .simulador-consorcios .card .card-header {
  21.     height: 16px;
  22.     line-height: 16px;
  23.     padding: 0;
  24. }
  25.  
  26. .simulador-consorcios .card .card-header a {
  27.     cursor: pointer;
  28. }
  29.  
  30. .simulador-consorcios .card .card-body {
  31.     padding: 6px 0 0 0;
  32. }
  33.  
  34. /* CUSTOMIZACAO PAGINA INTERNA */
  35. .simulador-consorcios .form-simulacao button {
  36.     padding: 10px 42px;
  37. }
  38.  
  39. .simulador-consorcios .form-simulacao p {
  40.     color: var(--branco);
  41.     line-height: 20.16px;
  42. }
  43.  
  44. .simulador-consorcios .form-simulacao button img {
  45.     margin-right: 8px;
  46. }
  47.  
  48. .simulador-consorcios .form-simulacao button.btn-primary.btn-custom {
  49.     background-color: var(--branco) !important;
  50.     color: #058075 !important;
  51. }
  52.  
  53. .simulador-consorcios .form-simulacao button.btn-secondary {
  54.     border-color: var(--branco) !important;
  55.     color: var(--branco) !important;
  56. }
  57.  
  58. .simulador-consorcios .form-simulacao .card .card-header a {
  59.     height: 26px;
  60.     line-height: 26px;
  61. }
  62.  
  63. .simulador-consorcios .form-simulacao .card .card-body {
  64.     padding: 16px 0 0 0;
  65. }
  66.  
  67. .simulador-consorcios .form-simulacao .card .card-header a img {
  68.     width: 26px;
  69. }
  70.  
  71. .simulador-consorcios .form-simulacao .card .card-body img {
  72.     width: 164px;
  73. }
  74.  
  75. .simulador-consorcios .form-simulacao .card .card-body h6 {
  76.     color: var(--verdee);
  77.     font-size: 31.76px !important;
  78.     line-height: 1;
  79.     margin: 0 0 8px 0;
  80. }
  81.  
  82. .simulador-consorcios .form-simulacao .qr-code {
  83.     border-radius: 8px;
  84.     margin-bottom: 58px;
  85.     margin-top: 34px;
  86.     width: 136px;
  87. }
  88.  
  89.  
  90. /* CUSTOMIZACAO DO CHECKBOX */
  91. .simulador-consorcios .form-simulacao .slider-container label {
  92.     color: var(--branco);
  93.     font-size: 22px;
  94.     font-weight: 700;
  95.     line-height: 24.64px;
  96.     margin-bottom: 0;
  97.     position: relative;
  98.     top: -4px;
  99. }
  100.  
  101. .simulador-consorcios .form-simulacao .slider-container input[type="radio"] {
  102.     -webkit-appearance: none;
  103.     appearance: none;
  104.     background-color: var(--branco);
  105.     border-radius: 50%;
  106.     border: 1px solid #C4D5D5;
  107.     display: grid;
  108.     float: left;
  109.     font: inherit;
  110.     height: 20px;
  111.     margin-top: 2px;
  112.     padding: 0;
  113.     place-content: center;
  114.     width: 20px;
  115. }
  116.  
  117. .simulador-consorcios .form-simulacao .slider-container input[type="radio"]::before {
  118.     background-color: transparent;
  119.     border-radius: 50%;
  120.     border: 4px solid var( --persian-green-600);
  121.     box-shadow: inset 1em 1em var(--branco);
  122.     content: "";
  123.     height: 20px;
  124.     transform-origin: center;
  125.     transform: scale(0);
  126.     transition: 120ms transform ease-in-out;
  127.     width: 20px;
  128. }
  129.  
  130. .simulador-consorcios .form-simulacao .slider-container input[type="radio"]:checked::before {
  131.   transform: scale(1);
  132. }
  133.  
  134. .simulador-consorcios .form-simulacao .slider-container input[type="radio"]:focus {
  135.   outline: none;
  136. }
  137.  
  138. .simulador-consorcios .form-simulacao .slider-container input[type="radio"]:disabled {
  139.   background-color: #EEEEEE !important;
  140. }
  141.  
  142. /* CUSTOMIZACAO DA SLIDER */
  143. .simulador-consorcios .form-simulacao .slider-container .slider-valor {
  144.     margin: 0 auto;
  145.     width: 72%;
  146. }
  147.  
  148. .simulador-consorcios .form-simulacao .slider-container .input-group .input-group-text {
  149.     background-color: transparent;
  150.     border: 0;
  151.     color: var(--verdec);
  152.     font-size: 22px;
  153.     font-weight: 700;
  154.     line-height: 24.64px;
  155.     padding: 0;
  156.     height: 80px;
  157. }
  158.  
  159. .simulador-consorcios .form-simulacao .slider-container .input-group .input-group-text img {
  160.     margin-left: 8px;
  161. }
  162.  
  163. .simulador-consorcios .form-simulacao .slider-container .input-group input {
  164.     border: 0;
  165.     color: var(--branco);
  166.     font-size: var(--font-size-1);
  167.     font-weight: 700;
  168.     height: 80px;
  169.     line-height: 72px;
  170.     padding: 0;
  171.     text-align: center;
  172. }
  173.  
  174. .simulador-consorcios .form-simulacao .slider-container input[type="range"] {
  175.     -webkit-appearance: none;
  176.     border-radius: 4px;
  177.     border: 0;
  178.     height: 4px;
  179.     outline: none;
  180.     transition: opacity .2s;
  181.     -webkit-transition: .2s;
  182.     width: 100%;
  183. }
  184.  
  185. .simulador-consorcios .form-simulacao .slider-container input[type="range"]::-webkit-slider-thumb {
  186.     -webkit-appearance: none;
  187.     appearance: none;
  188.     background: var(--branco);
  189.     border-radius: 50%;
  190.     cursor: pointer;
  191.     height: 26px;
  192.     margin-top: -8px;  
  193.     width: 26px;
  194. }
  195.  
  196. .simulador-consorcios .form-simulacao .slider-container input[type="range"]::-moz-range-thumb {
  197.     background: var(--branco);
  198.     border-radius: 50%;
  199.     cursor: pointer;
  200.     height: 26px;
  201.     margin-top: -8px;
  202.     width: 26px;
  203. }
  204.  
  205. .simulador-consorcios .form-simulacao .slider-container .slider-labels {
  206.     color: var( --persian-green-600);
  207.     display: flex;
  208.     font-size: 14.5px;
  209.     font-weight: 700;
  210.     justify-content: space-between;
  211.     line-height: 16.24px;
  212.     margin: 8px 0 28px 0;
  213. }
  214.  
  215. .simulador-consorcios .form-simulacao .slider-container .help-slider {
  216.     font-size: var(--font-size-xs) !important;
  217.     font-weight: 300;
  218.     line-height: 19.5px;
  219. }
  220.  
  221. .simulador-consorcios .form-simulacao .obs-valor-simulador {
  222.     font-size: 15px !important;
  223.     font-weight: 400;
  224.     line-height: 16.8px;
  225.     margin-bottom: 44px;
  226. }
  227.  
  228. .simulador-consorcios .form-simulacao .obs-valor-simulador a {
  229.     color: var(--persian-green-600);
  230. }
  231.  
  232. /* CUSTOMIZACAO DA TABELA */
  233. .simulador-consorcios .form-simulacao table.table {
  234.     border-collapse: initial;
  235.     border-spacing: 0 24px;
  236. }
  237.  
  238. .simulador-consorcios .form-simulacao table.table,
  239. .simulador-consorcios .form-simulacao table.table tr th,
  240. .simulador-consorcios .form-simulacao table.table tr td {
  241.   background-color: transparent;
  242. }
  243.  
  244. .simulador-consorcios .form-simulacao table.table tr th,
  245. .simulador-consorcios .form-simulacao table.table tr td {
  246.     border: 0;
  247.     color: var(--white);
  248.     padding: 10px;
  249.     text-align: center;
  250. }
  251.  
  252. .simulador-consorcios .form-simulacao table.table tr.font-weight-bold td {
  253.   color: var(--color-brand-main);
  254. }
  255.  
  256. .simulador-consorcios .form-simulacao table.table tr th {
  257.     font-size: 22px;
  258.     font-weight: 700;
  259.     line-height: 24.64px;
  260. }
  261.  
  262. .simulador-consorcios .form-simulacao table.table tr td {
  263.   font-size: 22px;
  264.   line-height: 24.64px;
  265. }
  266.  
  267. .simulador-consorcios .form-simulacao table.table tr td:first-child {
  268.   border-left: 3px solid var(--color-brand-main);
  269. }
  270.  
  271.  
  272. /* CUSTOMIZACAO DA SWITCH */
  273. .simulador-consorcios .form-simulacao .custom-control {
  274.   text-align: right;
  275. }
  276.  
  277. .simulador-consorcios .form-simulacao .custom-control .custom-control-label {
  278.   color: var(--white);
  279.   font-size: 22px;
  280.   line-height: 24.64px;
  281. }
  282.  
  283. .simulador-consorcios .form-simulacao .custom-control .custom-control-label::before {
  284.     background-color: var(--color-surface-support-3-medium);
  285.     border-radius: 12px;
  286.     border: 1px solid var(--color-surface-support-3-medium);
  287.     height: 24px;
  288.     left: 4px;
  289.     top: 0;
  290.     width: 40px;
  291. }
  292.  
  293. .simulador-consorcios .form-simulacao .custom-control .custom-control-input:checked ~ .custom-control-label::before {
  294.     background-color: var(--color-brand-main);
  295.     border-radius: 12px;
  296.     border: 1px solid var(--color-brand-main);
  297.     height: 24px;
  298.     width: 40px;
  299. }
  300.  
  301. .simulador-consorcios .form-simulacao .custom-control .custom-control-label::after {
  302.     border-radius: 50%;
  303.     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  304.     height: 20px;
  305.     left: 8px;
  306.     top: 2px;
  307.     width: 20px;
  308. }
  309.  
  310. /* CUSTOMIZACAO DA CARD SUMARIO */
  311. .simulador-consorcios .form-simulacao .sumario-composicao {
  312.   background: var(--white);
  313.   border-radius: 8px;
  314.   padding: 16px;
  315. }
  316.  
  317. .simulador-consorcios .form-simulacao .sumario-composicao p {
  318.     color: var(--color-brand-main);
  319.     font-size: 18px;
  320.     font-weight: 700;
  321.     line-height: 27px;
  322.     margin-top: 10px
  323. }
  324.  
  325. .simulador-consorcios .form-simulacao .sumario-composicao p a img {
  326.     cursor: pointer;
  327.     margin-right: 8px;
  328.     margin-top: -4px;
  329.     width: 24px;
  330. }
  331.  
  332. .simulador-consorcios .form-simulacao .sumario-composicao .composicao-dados label {
  333.     color: var(--verdee-600);
  334.     font-size: 16px;
  335.     font-weight: 400;
  336.     line-height: 24px;
  337.     margin: 10px 0;
  338.     padding-left: 40px;
  339.     width: 100%;
  340. }
  341.  
  342. .simulador-consorcios .form-simulacao .sumario-composicao .composicao-dados label span {
  343.     color: var(--color-surface-text-default-low);
  344.     display: block;
  345.     float: right;
  346.     width: 35%;
  347. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement