kj
/
bizfile
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Angular Web App
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
20 Révisions
1 Branche
1.7 MiB
 
 
 
 
 
 
Aborescence: 708834e81c
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '708834e81c'
${ noResults }
bizfile/src/app/register-business/register-business.component...

568 lignes
12 KiB
Brut Annotations Historique 

  1. .search-input-container {

  2.     width: 60%;

  3.     margin: 0 auto;

  4.     text-align: center;

  5. 

  6.     .search-input {

  7.         display: flex;

  8.         align-items: center;

  9.         justify-content: flex-start;

  10.         background-color: white;

  11.         border-radius: 4rem;

  12.         height: 5.5rem;

  13.         border: 1px solid var(--border-grey);

  14.         width: 80%;

  15.         margin: 4rem auto 3rem;

  16.         overflow: hidden;

  17.     

  18.         input {

  19.             border: none;

  20.             background-color: transparent;

  21.             padding: 0 3rem;

  22.             font-size: 1.5rem;

  23.             color: var(--dark-grey);        

  24.             letter-spacing: 0.5px;

  25.             flex-grow: 1;

  26.     

  27.             &::placeholder {

  28.                 font-weight: 300;

  29.             }

  30.         }

  31.     

  32.         button {

  33.             height: 100%;

  34.             border: none;

  35.             background-color: var(--highlight);

  36.             padding: 0 4rem;

  37.             color: white;

  38.             font-size: 1.6rem;

  39.             letter-spacing: 0.5px;

  40.             border-radius: 4rem;

  41.             transition: opacity 0.3s;

  42. 

  43.             &:disabled {

  44.                 opacity: 0.5;

  45.             }

  46.         }

  47.     }

  48.     

  49.     .description {

  50.         width: 75%;

  51.         margin: 4rem auto 3rem;

  52.         text-align: left;

  53.         font-size: 1.4rem;

  54.         opacity: 0.9;

  55.         color: var(--dark-grey);

  56.         letter-spacing: 0.5px;

  57.         line-height: 1.4;

  58.         font-weight: 300;

  59.         display: flex;

  60.         align-items: flex-start;

  61.         justify-content: flex-start;

  62. 

  63.         label {

  64.             cursor: pointer;

  65.         }

  66. 

  67.         input {

  68.             margin: 5px 10px;

  69.         }

  70.     }

  71. 

  72.     .form-message {

  73.         margin: 6rem auto 2rem;

  74.         line-height: 1.6;

  75. 

  76.         &.error {

  77.             p {

  78.                 color: var(--error);

  79.             }

  80.         }

  81. 

  82.         h5 {

  83.             font-size: 1.8rem;

  84.             color: var(--dark-grey);

  85.             filter: brightness(80%);

  86.             font-weight: 500;

  87.             margin-bottom: 2rem;

  88.         }

  89. 

  90.         p {

  91.             font-size: 1.8rem;

  92.             font-weight: 400;

  93.             color: var(--success);

  94.         }

  95.     }

  96. }

  97. 

  98. .form-action-buttons {

  99.     text-align: center;

  100.     margin-bottom: 2rem;

  101. 

  102.     button {

  103.         &:first-child {

  104.             margin-right: 2rem;

  105.         }

  106.     }

  107. }

  108. 

  109. .form {

  110.     display: grid;

  111.     grid-template-columns: 1fr 1fr;

  112.     width: calc(70% - 2rem);

  113.     padding: 4rem;

  114.     margin: 0 auto;

  115. 

  116.     .input-holder {

  117.         width: calc(100% - 2rem);

  118.         margin: 3.5rem 0;

  119.         position: relative;    

  120.         display: flex;

  121.         align-items: center;

  122.         justify-content: flex-start;    

  123. 

  124.         label {

  125.             font-size: 1.6rem;

  126.             color: var(--primary);

  127.             font-weight: 500;

  128.             position: absolute;

  129.             top: 0;

  130.             left: 0;

  131.             font-weight: 400;

  132.             letter-spacing: 0.5px;

  133.             transform: translate(2.5rem, -3rem);

  134.         }

  135. 

  136.         input, select {

  137.             display: block;

  138.             width: 100%;

  139.             border-radius: 4rem;

  140.             height: 5.5rem;

  141.             border: 1px solid var(--border-grey);

  142.             padding: 0 2rem;

  143.             font-size: 1.5rem;

  144.             letter-spacing: 0.5px;

  145.             color: var(--dark-grey);

  146.             background-color: white;

  147.         }

  148. 

  149.         select {

  150.             -webkit-appearance: none;

  151.             -moz-appearance: none;

  152.             text-indent: 1px;

  153.             text-overflow: '';

  154.         }

  155. 

  156.         img {

  157.             position: relative;

  158.             transform: translateX(-4rem);

  159.             pointer-events: none;

  160.             background-color: white;

  161.         }

  162.     }

  163. }

  164. 

  165. 

  166. .payment-container {

  167.     padding: 1rem;

  168.     

  169.     .payment-block {

  170.         padding: 3rem 4rem;

  171.         width: calc(40% - 2rem);

  172.         box-shadow: 0 0 10px var(--shadow-grey);

  173.         border-radius: 1rem; 

  174.         margin: 0 auto 5rem; 

  175. 

  176.         .payment-title {

  177.             font-size: 2.2rem;

  178.             color: var(--dark-grey);

  179.             filter: brightness(50%);

  180.             font-weight: 500;

  181.             margin-bottom: 0.3rem;

  182.         }

  183. 

  184.         .business-name {

  185.             font-size: 1.6rem;

  186.             color: var(--dark-grey);

  187.             font-weight: normal;

  188.             margin-bottom: 2rem;

  189.         }

  190. 

  191.         .tabs {

  192.             display: flex;

  193.             font-size: 1.4rem;

  194.             border-bottom: 2px solid var(--border-grey);

  195. 

  196.             .tab {

  197.                 padding: 0.7rem 2rem;

  198.                 margin-bottom: -2px;

  199.                 cursor: pointer;

  200. 

  201.                 &.active {

  202.                     margin-bottom: -4px;

  203.                     color: var(--highlight);

  204.                     border-bottom: 4px solid var(--highlight);

  205.                 }

  206.             }

  207.         }

  208. 

  209.         .tab-content {

  210.             color: var(--dark-grey);

  211.             font-size: 1.2rem;

  212.             line-height: 1.5;

  213.             padding: 0.8rem 0 0;

  214.             height: 7rem;

  215.             border-top: none;

  216.             margin-bottom: 2rem;

  217. 

  218.             p {

  219.                 margin-bottom: 1.5rem;

  220.             }

  221.         }

  222. 

  223.         .no-of-years-label {

  224.             font-size: 1.7rem;

  225.             color: var(--dark-grey);

  226.             filter: brightness(70%);

  227.             margin-bottom: 1rem;

  228.         }

  229. 

  230.         .select-holder {

  231.             margin-bottom: 3rem;

  232. 

  233.             select {

  234.                 -webkit-appearance: none;

  235.                 -moz-appearance: none;

  236.                 text-indent: 1px;

  237.                 text-overflow: "";

  238.                 padding: 0.7rem 1rem;

  239.                 width: 5rem;

  240.                 border: 1px solid var(--border-grey);

  241.             }

  242. 

  243.             img {

  244.                 position: relative;

  245.                 transform: translateX(-2rem);

  246.                 pointer-events: none;

  247.             }

  248.         }

  249. 

  250.         .total-price-container {

  251.             padding: 0.5rem;

  252.             font-weight: bold;

  253.             font-size: 3.5rem;

  254.             border-top: 1px solid var(--border-grey);

  255.         }

  256. 

  257.         .form-action-buttons {

  258.             margin-bottom: 0;

  259.         }

  260.     }

  261. }

  262. 

  263. .acknowledgement {

  264.     width: 100%;

  265.     margin: 0 auto;

  266.     

  267.     h2 {

  268.         font-size: 2rem;

  269.         color: var(--dark-grey);

  270.         filter: brightness(80%);

  271.         font-weight: 500;

  272.         margin: 2rem 2rem 3rem;

  273.     }

  274. 

  275.     .container {

  276.         width: calc(70% - 2rem);

  277.         margin: 2rem auto;

  278. 

  279.         @media print {

  280.             width: calc(100% - 2rem);

  281.         }

  282.     }

  283. 

  284.     .bill-container {

  285.         width: 70%;

  286.         box-shadow: 0 0 10px var(--shadow-grey);

  287.         border-radius: 1rem;   

  288.         overflow: hidden;    

  289.         margin: 0 auto 5rem; 

  290. 

  291.         @media print {

  292.             width: 100%;

  293.         }

  294.     }

  295. 

  296.     .check-icon {

  297.         display: block;

  298.         width: 58px;

  299.         height: auto;

  300.         margin: 3rem auto 2rem;

  301.     }

  302. 

  303.     h3 {

  304.         font-size: 3rem;

  305.         font-weight: normal;

  306.         text-align: center;

  307.         color: var(--success);

  308.     }

  309. 

  310.     .bill-breakup {

  311.         margin-top: 3rem;

  312.         display: grid;

  313.         grid-template-columns: 1fr 1fr;

  314.         list-style: none;

  315. 

  316.         li {

  317.             margin: 1.8rem;

  318.             width: 100%;

  319.         }

  320. 

  321.         label {

  322.             display: block;

  323.             color: var(--dark-grey);

  324.             font-size: 1.6rem;

  325.             filter: brightness(80%);

  326.         }

  327. 

  328.         .value {

  329.             display: block;

  330.             color: var(--dark-grey);

  331.             opacity: 0.8;

  332.             font-size: 1.6rem;

  333.             letter-spacing: 0.5px;

  334.             line-height: 1.6;

  335.             margin-top: 1rem;

  336. 

  337.             &.active {

  338.                 color: var(--highlight);

  339.                 font-weight: normal;

  340.             }

  341.         }

  342.     }

  343. 

  344.     .form-action-buttons {

  345.         margin: 2rem 1.5rem;

  346. 

  347.         @media print {

  348.             display: none;

  349.         }

  350.     }

  351. 

  352.     .total-amount {

  353.         text-align: center;

  354.         overflow: hidden;        

  355.         padding: 1rem;

  356.         position: relative;

  357. 

  358.         &::before {

  359.             content: '';

  360.             position: absolute;

  361.             left: 0;

  362.             top: 0;

  363.             width: 100%;

  364.             height: 100%;

  365.             background-color: var(--footer-grey);

  366.             opacity: 0.4;

  367.         }

  368. 

  369.         & > * {

  370.             position: relative;

  371.         }

  372. 

  373.         label {      

  374.             font-size: 2rem;      

  375.             color: var(--dark-grey);

  376.         }

  377. 

  378.         span {

  379.             margin-left: 1rem;

  380.             font-size: 2.4rem;

  381.             color: var(--highlight);

  382.         }

  383.     }

  384. 

  385.     .message-board {

  386.         padding: 0 2rem;

  387.         list-style: none;

  388. 

  389.         @media print {

  390.             display: none;

  391.         }

  392.         

  393.         h5 {

  394.             font-size: 1.6rem;

  395.             color: var(--dark-grey);

  396.             filter: brightness(80%);

  397.             font-weight: 500;

  398.         }

  399. 

  400.         li {

  401.             margin: 1.5rem 0;

  402.             line-height: 1.7;

  403.             letter-spacing: 0.5px;

  404.             font-size: 1.4rem;

  405.             color: var(--dark-grey);

  406.             opacity: 0.8;

  407. 

  408.             a {

  409.                 color: var(--highlight);

  410.                 font-weight: 500;

  411.             }

  412.         }

  413.     }

  414. }

  415. 

  416. .receipt {

  417.     width: calc(100% - 4rem);

  418.     margin: 0 auto;

  419.     

  420.     h2 {

  421.         font-size: 2rem;

  422.         color: var(--dark-grey);

  423.         filter: brightness(80%);

  424.         font-weight: 500;

  425.         margin: 2rem 0;

  426.     }

  427. 

  428.     .bill-breakup {

  429.         display: grid;

  430.         grid-template-columns: 1fr 1fr;

  431.         list-style: none;

  432. 

  433.         li {

  434.             margin-bottom: 1rem;

  435.             width: 100%;

  436.             display: flex;

  437.             align-items: center;

  438.             justify-content: flex-start;

  439.         }

  440. 

  441.         label {

  442.             display: block;

  443.             color: var(--dark-grey);

  444.             font-size: 1.4rem;

  445.         }

  446. 

  447.         .value {

  448.             display: block;

  449.             color: var(--dark-grey);

  450.             opacity: 0.8;

  451.             font-size: 1.6rem;

  452.             letter-spacing: 0.5px;

  453.             line-height: 1.6;

  454.             margin-left: 1rem;

  455.         }

  456.     }

  457. 

  458.     .table {

  459.         margin: 2rem auto;

  460.         width: 100%;

  461.         border-radius: 1rem;

  462.         overflow: auto;

  463.         border: 2px solid var(--border-grey);

  464.         min-height: 10rem;

  465.     

  466.         header {

  467.             background: linear-gradient(90deg, var(--secondary) 0%, var(--primary));

  468.             color: white;

  469.             font-size: 1.6rem;

  470.             display: flex;

  471.             align-items: center;

  472.             justify-content: flex-start;

  473.             height: 5.5rem;

  474.             font-weight: 300;

  475.             letter-spacing: 0.5px;

  476.         }

  477.     

  478.         .cell {

  479.             width: calc(100% / 6);

  480. 

  481.             @media print {

  482.                 word-break: break-all;

  483.             }

  484. 

  485.             &:nth-child(1) {

  486.                 text-align: center;

  487.                 width: 10rem;

  488.             }

  489. 

  490.             &:nth-child(2) {

  491.                 width: calc(20% + (10% - 10rem));

  492.             }

  493. 

  494.             &:nth-child(3) {

  495.                 width: 20%;

  496.             }

  497. 

  498.             &:nth-child(4) {

  499.                 width: 20%;

  500.             }

  501. 

  502.             &:nth-child(5) {

  503.                 width: 10%;

  504.             }

  505. 

  506.             &:nth-child(3) {

  507.                 width: 20%;

  508.             }

  509.         }

  510.     

  511.         ul {

  512.             list-style: none;        

  513.         }

  514.         

  515.         li {

  516.             display: flex;

  517.             align-items: flex-start;

  518.             justify-content: flex-start;

  519.             padding: 2rem 0;

  520.     

  521.             &:nth-child(even) {

  522.                 background-color: var(--border-grey);

  523.             }

  524.     

  525.             .cell {

  526.                 font-size: 1.4rem;

  527.                 color: var(--dark-grey);

  528.                 line-height: 1.7;                

  529.             }

  530.         }

  531.     }

  532. 

  533.     .message-board {

  534.         width: 100%;

  535.         margin: 4rem 0;

  536.         list-style: none;

  537.         

  538.         h5 {

  539.             font-size: 1.6rem;

  540.             color: var(--dark-grey);

  541.             filter: brightness(80%);

  542.             font-weight: 500;

  543.             margin-bottom: 1rem;

  544.         }

  545. 

  546.         li {

  547.             margin: 0.5rem 0;

  548.             line-height: 1.7;

  549.             letter-spacing: 0.5px;

  550.             font-size: 1.4rem;

  551.             color: var(--dark-grey);

  552.             opacity: 0.8;

  553. 

  554.             a {

  555.                 color: var(--highlight);

  556.                 font-weight: 500;

  557.             }

  558.         }

  559.     }

  560. 

  561.     .form-action-buttons {

  562.         text-align: left;

  563. 

  564.         @media print {

  565.             display: none;

  566.         }

  567.     }

  568. }