src/ApplicationBundle/Resources/views/framework/_select_entity_modal_css.html.twig line 1

Open in your IDE?
  1. {#
  2.   framework/_select_entity_modal_css.html.twig
  3.   ==========================================================================
  4.   Entity-picker modal: form header, selectize control, item rows
  6.   De-duplicated from 2 templates. Lifted VERBATIM — same rules, same order — and
  7.   each call site keeps the include AT THE POSITION its <style> occupied, so the
  8.   cascade is unchanged. This is a de-duplication, not a restyle.
  10.   The block is STATIC (no Twig interpolation), so unlike the per-company theme
  11.   block it depends on nothing in the surrounding context.
  13.   SIBLING VARIANTS EXIST: none
  14.   Those are byte-different blocks styling the same area. They are deliberately
  15.   separate: they do not share their rule blocks, so folding them into one file
  16.   would change what some pages render. Do not merge them without diffing first.
  17.   ==========================================================================
  18. #}
  19. <style>
  21.     .modal div[class*="col-md"], .modal div[class*="col-lg"], .modal div[class*="col-xs"], .modal div[class*="col-sm"] {
  22.         margin-bottom: 0px;
  23.     }
  24.     .d-flex
  25.     {
  26.         display: flex;
  27.     }
  28.     #selectEntityModal {
  30.         /*box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);*/
  31.         /*border-radius: 12px;*/
  32.     }
  34.     #selectEntityModal .modal-body {
  36.         padding: 0 1rem;
  37.     }
  39.     #selectEntityModal p {
  41.         margin-bottom: .5rem;
  42.     }
  44.     #selectEntityModal .selectize-control {
  46.         min-width: 100%;
  47.     }
  49.     #selectEntityModal .selectize-input.items {
  51.         border: 1px solid #d0d0d0;
  52.         padding: 8px 8px;
  53.         display: inline-block;
  54.         width: 100%;
  55.         overflow: hidden;
  56.         position: relative;
  57.         z-index: 1;
  58.         box-sizing: border-box;
  59.         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  60.         border-radius: 3px;
  61.     }
  63.     #selectEntityModalForm {
  64.         /*max-width: 500px;*/
  65.         background-color: #ffffff;
  66.         /*margin: 40px auto;*/
  67.         padding: 40px;
  68.         box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
  69.         /*border-radius: 12px;*/
  70.     }
  72.     #selectEntityModalForm .form-header {
  73.         gap: 5px;
  74.         text-align: center;
  75.         font-size: .9em;
  76.     }
  78.     #selectEntityModalForm .form-header .stepIndicator {
  79.         position: relative;
  80.         flex: 1;
  81.         padding-bottom: 30px;
  82.     }
  84.     #selectEntityModalForm .form-header .stepIndicator.active {
  85.         font-weight: 600;
  86.     }
  88.     #selectEntityModalForm .form-header .stepIndicator.finish {
  89.         font-weight: 600;
  90.         color: #009688;
  91.     }
  93.     #selectEntityModalForm .form-header .stepIndicator::before {
  94.         content: "";
  95.         position: absolute;
  96.         left: 50%;
  97.         bottom: 0;
  98.         transform: translateX(-50%);
  99.         z-index: 9;
  100.         width: 20px;
  101.         height: 20px;
  102.         background-color: #d5efed;
  103.         border-radius: 50%;
  104.         border: 3px solid #ecf5f4;
  105.     }
  107.     #selectEntityModalForm .form-header .stepIndicator.active::before {
  108.         background-color: #a7ede8;
  109.         border: 3px solid #d5f9f6;
  110.     }
  112.     #selectEntityModalForm .form-header .stepIndicator.finish::before {
  113.         background-color: #009688;
  114.         border: 3px solid #b7e1dd;
  115.     }
  117.     #selectEntityModalForm .form-header .stepIndicator::after {
  118.         content: "";
  119.         position: absolute;
  120.         left: 50%;
  121.         bottom: 8px;
  122.         width: 100%;
  123.         height: 3px;
  124.         background-color: #f3f3f3;
  125.     }
  127.     #selectEntityModalForm .form-header .stepIndicator.active::after {
  128.         background-color: #a7ede8;
  129.     }
  131.     #selectEntityModalForm .form-header .stepIndicator.finish::after {
  132.         background-color: #009688;
  133.     }
  135.     #selectEntityModalForm .form-header .stepIndicator:last-child:after {
  136.         display: none;
  137.     }
  139.     #selectEntityModalForm input {
  140.         padding: 15px 20px;
  141.         width: 100%;
  142.         font-size: 1em;
  143.         border: 1px solid #e3e3e3;
  144.         border-radius: 5px;
  145.     }
  147.     #selectEntityModalForm input:focus {
  148.         border: 1px solid #009688;
  149.         outline: 0;
  150.     }
  152.     #selectEntityModalForm input.invalid {
  153.         border: 1px solid #ffaba5;
  154.     }
  156.     #selectEntityModalForm .step {
  157.         display: none;
  158.     }
  160.     #selectEntityModalForm .form-footer {
  161.         overflow: auto;
  162.         gap: 20px;
  163.     }
  165.     #selectEntityModalForm .form-footer button {
  166.         background-color: #1d5b9e;
  167.         border: 1px solid #1d5b9e;
  168.         color: #ffffff;
  169.         border: none;
  170.         padding: 13px 30px;
  171.         font-size: 1em;
  172.         cursor: pointer;
  173.         border-radius: 5px;
  174.         flex: 1;
  175.         margin-top: 5px;
  176.     }
  178.     #selectEntityModalForm .form-footer button:hover {
  179.         opacity: 0.8;
  180.     }
  182.     #selectEntityModalForm .form-footer #promptInfo_prevBtn {
  183.         background-color: #fff;
  184.         color: #009688;
  185.     }
  188.     .box-selector {
  189.         padding: 10px 4px;
  190.         cursor: pointer;
  191.     }
  193.     .box-selector .inside {
  194.         padding: 5px;
  196.         border-radius: 5px;
  197.         -webkit-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  198.         -moz-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  199.         box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  201.     }
  203.     .box-selector .inside input {
  204.         cursor: pointer
  206.     }
  208.     .box-selector .inside textarea {
  209.         text-align: center;
  210.         cursor: pointer;
  211.         width: 100%;
  212.         border: none;
  213.         resize: none;
  214.         font-size: 14px;
  215.         color: #1d5b9e;
  216.         font-weight: bold;
  217.     }
  219.     .box-selector.sch_selector_mon .inside,
  220.     .box-selector.sch_selector_day .inside
  221.         /*.box-selector.sch_selector_time .inside*/
  222.     {
  223.         padding: 10px 5px;
  225.     }
  227.     .box-selector.sch_selector_time .inside {
  228.         padding: 4px 5px;
  230.     }
  232.     .step .view_if_has_schedules {
  233.         display: none;
  234.     }
  237.     .box-selector.active:not(.man_sch_selector) .inside {
  238.         border: 2px solid #1d5b9e;
  239.         -webkit-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  240.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  241.         box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  244.     }
  246.     .box-selector.active.man_sch_selector .inside {
  247.         border: 2px solid #1d5b9e;
  248.         -webkit-box-shadow: none;
  249.         -moz-box-shadow: none;
  250.         box-shadow: none;
  253.     }
  255.     .box-selector.sch_selector_mon.active .inside,
  256.     .box-selector.sch_selector_day.active .inside,
  257.     .box-selector.sch_selector_time.active .inside {
  258.         border: 2px solid #1d5b9e;
  259.         -webkit-box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  260.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  261.         box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  263.     }
  265.     .box-selector .img {
  266.         margin-left: 5px;
  269.     }
  271.     .box-selector .title {
  272.         text-align: center;
  274.         font-size: 13px;
  275.         margin-top: auto;
  276.         margin-bottom: auto;
  278.     }
  280.     .box-selector.paymentMethodSelectorBtn .title {
  281.         text-align: center;
  282.         margin-bottom: 1px;
  283.         font-size: 14px;
  285.     }
  287.     .box-selector .sub-title {
  288.         font-size: 12px;
  289.         color: grey;
  291.     }
  293.     #selectEntityModal .routineTable {
  294.         text-align: left;
  295.         vertical-align: middle;
  297.     }
  299.     #selectEntityModal .routineTable .icon-delete {
  300.         color: darkred;
  301.         font-weight: bold;
  303.     }
  305.     #selectEntityModal .routineTable .icon-delete .fa {
  306.         padding: 10px;
  307.         border-radius: 39px;
  308.         border: 1px solid #eddcdc;
  309.         width: 34px;
  310.         height: 34px;
  311.         text-align: center;
  313.     }
  315.     #selectEntityModal .routineTable .icon-check {
  316.         color: green;
  317.         font-weight: bold;
  320.     }
  322.     #selectEntityModal .routineTable .icon-check .fa {
  323.         opacity: 0.1;
  325.     }
  327.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  328.         opacity: 1;
  330.     }
  332.     #selectEntityModal .routineTable .icon-check .fa {
  333.         padding: 10px;
  334.         border-radius: 39px;
  335.         border: 1px solid #eddcdc;
  336.         width: 34px;
  337.         height: 34px;
  338.         text-align: center;
  340.     }
  342.     #selectEntityModal .routineTable {
  343.         text-align: left;
  344.         vertical-align: middle;
  346.     }
  348.     #selectEntityModal .routineTable .icon-delete {
  349.         color: darkred;
  350.         font-weight: bold;
  352.     }
  354.     #selectEntityModal .routineTable .icon-delete .fa {
  355.         padding: 10px;
  356.         border-radius: 39px;
  357.         border: 1px solid #eddcdc;
  358.         width: 34px;
  359.         height: 34px;
  360.         text-align: center;
  362.     }
  364.     #selectEntityModal .routineTable .icon-check {
  365.         color: green;
  366.         font-weight: bold;
  369.     }
  371.     #selectEntityModal .routineTable .icon-check .fa {
  372.         opacity: 0.1;
  374.     }
  376.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  377.         opacity: 1;
  379.     }
  381.     #selectEntityModal .routineTable .icon-check .fa {
  382.         padding: 10px;
  383.         border-radius: 39px;
  384.         border: 1px solid #eddcdc;
  385.         width: 34px;
  386.         height: 34px;
  387.         text-align: center;
  389.     }
  390. </style>