templates/crm/includes/uiThemeSettings.html.twig line 1

Open in your IDE?
  1. <div class="ui-theme-settings">
  2.     <button type="button" id="TooltipDemo" class="btn-open-options btn btn-warning">
  3.         <i class="fa fa-cog fa-w-16 fa-spin fa-2x"></i>
  4.     </button>
  5.     <div class="theme-settings__inner">
  6.         <div class="scrollbar-container">
  7.             <div class="theme-settings__options-wrapper">
  8.                 <h3 class="themeoptions-heading">Layout Options
  9.                 </h3>
  10.                 <div class="p-3">
  11.                     <ul class="list-group">
  12.                         <li class="list-group-item">
  13.                             <div class="widget-content p-0">
  14.                                 <div class="widget-content-wrapper">
  15.                                     <div class="widget-content-left mr-3">
  16.                                         <div class="switch has-switch switch-container-class" data-class="fixed-header">
  17.                                             <div class="switch-animate switch-on">
  18.                                                 <input type="checkbox" checked data-toggle="toggle"
  19.                                                        data-onstyle="success">
  20.                                             </div>
  21.                                         </div>
  22.                                     </div>
  23.                                     <div class="widget-content-left">
  24.                                         <div class="widget-heading">Fixed Header
  25.                                         </div>
  26.                                         <div class="widget-subheading">Makes the header top fixed, always visible!
  27.                                         </div>
  28.                                     </div>
  29.                                 </div>
  30.                             </div>
  31.                         </li>
  32.                         <li class="list-group-item">
  33.                             <div class="widget-content p-0">
  34.                                 <div class="widget-content-wrapper">
  35.                                     <div class="widget-content-left mr-3">
  36.                                         <div class="switch has-switch switch-container-class"
  37.                                              data-class="fixed-sidebar">
  38.                                             <div class="switch-animate switch-on">
  39.                                                 <input type="checkbox" checked data-toggle="toggle"
  40.                                                        data-onstyle="success">
  41.                                             </div>
  42.                                         </div>
  43.                                     </div>
  44.                                     <div class="widget-content-left">
  45.                                         <div class="widget-heading">Fixed Sidebar
  46.                                         </div>
  47.                                         <div class="widget-subheading">Makes the sidebar left fixed, always visible!
  48.                                         </div>
  49.                                     </div>
  50.                                 </div>
  51.                             </div>
  52.                         </li>
  53.                         <li class="list-group-item">
  54.                             <div class="widget-content p-0">
  55.                                 <div class="widget-content-wrapper">
  56.                                     <div class="widget-content-left mr-3">
  57.                                         <div class="switch has-switch switch-container-class" data-class="fixed-footer">
  58.                                             <div class="switch-animate switch-off">
  59.                                                 <input type="checkbox" data-toggle="toggle" data-onstyle="success">
  60.                                             </div>
  61.                                         </div>
  62.                                     </div>
  63.                                     <div class="widget-content-left">
  64.                                         <div class="widget-heading">Fixed Footer
  65.                                         </div>
  66.                                         <div class="widget-subheading">Makes the app footer bottom fixed, always
  67.                                             visible!
  68.                                         </div>
  69.                                     </div>
  70.                                 </div>
  71.                             </div>
  72.                         </li>
  73.                     </ul>
  74.                 </div>
  75.                 <h3 class="themeoptions-heading">
  76.                     <div>
  77.                         Header Options
  78.                     </div>
  79.                     <button type="button"
  80.                             class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-header-cs-class"
  81.                             data-class="">
  82.                         Restore Default
  83.                     </button>
  84.                 </h3>
  85.                 <div class="p-3">
  86.                     <ul class="list-group">
  87.                         <li class="list-group-item">
  88.                             <h5 class="pb-2">Choose Color Scheme
  89.                             </h5>
  90.                             <div class="theme-settings-swatches">
  91.                                 <div class="swatch-holder bg-primary switch-header-cs-class"
  92.                                      data-class="bg-primary header-text-light">
  93.                                 </div>
  94.                                 <div class="swatch-holder bg-secondary switch-header-cs-class"
  95.                                      data-class="bg-secondary header-text-light">
  96.                                 </div>
  97.                                 <div class="swatch-holder bg-success switch-header-cs-class"
  98.                                      data-class="bg-success header-text-dark">
  99.                                 </div>
  100.                                 <div class="swatch-holder bg-info switch-header-cs-class"
  101.                                      data-class="bg-info header-text-dark">
  102.                                 </div>
  103.                                 <div class="swatch-holder bg-warning switch-header-cs-class"
  104.                                      data-class="bg-warning header-text-dark">
  105.                                 </div>
  106.                                 <div class="swatch-holder bg-danger switch-header-cs-class"
  107.                                      data-class="bg-danger header-text-light">
  108.                                 </div>
  109.                                 <div class="swatch-holder bg-light switch-header-cs-class"
  110.                                      data-class="bg-light header-text-dark">
  111.                                 </div>
  112.                                 <div class="swatch-holder bg-dark switch-header-cs-class"
  113.                                      data-class="bg-dark header-text-light">
  114.                                 </div>
  115.                                 <div class="swatch-holder bg-focus switch-header-cs-class"
  116.                                      data-class="bg-focus header-text-light">
  117.                                 </div>
  118.                                 <div class="swatch-holder bg-alternate switch-header-cs-class"
  119.                                      data-class="bg-alternate header-text-light">
  120.                                 </div>
  121.                                 <div class="divider">
  122.                                 </div>
  123.                                 <div class="swatch-holder bg-vicious-stance switch-header-cs-class"
  124.                                      data-class="bg-vicious-stance header-text-light">
  125.                                 </div>
  126.                                 <div class="swatch-holder bg-midnight-bloom switch-header-cs-class"
  127.                                      data-class="bg-midnight-bloom header-text-light">
  128.                                 </div>
  129.                                 <div class="swatch-holder bg-night-sky switch-header-cs-class"
  130.                                      data-class="bg-night-sky header-text-light">
  131.                                 </div>
  132.                                 <div class="swatch-holder bg-slick-carbon switch-header-cs-class"
  133.                                      data-class="bg-slick-carbon header-text-light">
  134.                                 </div>
  135.                                 <div class="swatch-holder bg-asteroid switch-header-cs-class"
  136.                                      data-class="bg-asteroid header-text-light">
  137.                                 </div>
  138.                                 <div class="swatch-holder bg-royal switch-header-cs-class"
  139.                                      data-class="bg-royal header-text-light">
  140.                                 </div>
  141.                                 <div class="swatch-holder bg-warm-flame switch-header-cs-class"
  142.                                      data-class="bg-warm-flame header-text-dark">
  143.                                 </div>
  144.                                 <div class="swatch-holder bg-night-fade switch-header-cs-class"
  145.                                      data-class="bg-night-fade header-text-dark">
  146.                                 </div>
  147.                                 <div class="swatch-holder bg-sunny-morning switch-header-cs-class"
  148.                                      data-class="bg-sunny-morning header-text-dark">
  149.                                 </div>
  150.                                 <div class="swatch-holder bg-tempting-azure switch-header-cs-class"
  151.                                      data-class="bg-tempting-azure header-text-dark">
  152.                                 </div>
  153.                                 <div class="swatch-holder bg-amy-crisp switch-header-cs-class"
  154.                                      data-class="bg-amy-crisp header-text-dark">
  155.                                 </div>
  156.                                 <div class="swatch-holder bg-heavy-rain switch-header-cs-class"
  157.                                      data-class="bg-heavy-rain header-text-dark">
  158.                                 </div>
  159.                                 <div class="swatch-holder bg-mean-fruit switch-header-cs-class"
  160.                                      data-class="bg-mean-fruit header-text-dark">
  161.                                 </div>
  162.                                 <div class="swatch-holder bg-malibu-beach switch-header-cs-class"
  163.                                      data-class="bg-malibu-beach header-text-light">
  164.                                 </div>
  165.                                 <div class="swatch-holder bg-deep-blue switch-header-cs-class"
  166.                                      data-class="bg-deep-blue header-text-dark">
  167.                                 </div>
  168.                                 <div class="swatch-holder bg-ripe-malin switch-header-cs-class"
  169.                                      data-class="bg-ripe-malin header-text-light">
  170.                                 </div>
  171.                                 <div class="swatch-holder bg-arielle-smile switch-header-cs-class"
  172.                                      data-class="bg-arielle-smile header-text-light">
  173.                                 </div>
  174.                                 <div class="swatch-holder bg-plum-plate switch-header-cs-class"
  175.                                      data-class="bg-plum-plate header-text-light">
  176.                                 </div>
  177.                                 <div class="swatch-holder bg-happy-fisher switch-header-cs-class"
  178.                                      data-class="bg-happy-fisher header-text-dark">
  179.                                 </div>
  180.                                 <div class="swatch-holder bg-happy-itmeo switch-header-cs-class"
  181.                                      data-class="bg-happy-itmeo header-text-light">
  182.                                 </div>
  183.                                 <div class="swatch-holder bg-mixed-hopes switch-header-cs-class"
  184.                                      data-class="bg-mixed-hopes header-text-light">
  185.                                 </div>
  186.                                 <div class="swatch-holder bg-strong-bliss switch-header-cs-class"
  187.                                      data-class="bg-strong-bliss header-text-light">
  188.                                 </div>
  189.                                 <div class="swatch-holder bg-grow-early switch-header-cs-class"
  190.                                      data-class="bg-grow-early header-text-light">
  191.                                 </div>
  192.                                 <div class="swatch-holder bg-love-kiss switch-header-cs-class"
  193.                                      data-class="bg-love-kiss header-text-light">
  194.                                 </div>
  195.                                 <div class="swatch-holder bg-premium-dark switch-header-cs-class"
  196.                                      data-class="bg-premium-dark header-text-light">
  197.                                 </div>
  198.                                 <div class="swatch-holder bg-happy-green switch-header-cs-class"
  199.                                      data-class="bg-happy-green header-text-light">
  200.                                 </div>
  201.                             </div>
  202.                         </li>
  203.                     </ul>
  204.                 </div>
  205.                 <h3 class="themeoptions-heading">
  206.                     <div>Sidebar Options</div>
  207.                     <button type="button"
  208.                             class="btn-pill btn-shadow btn-wide ml-auto btn btn-focus btn-sm switch-sidebar-cs-class"
  209.                             data-class="">
  210.                         Restore Default
  211.                     </button>
  212.                 </h3>
  213.                 <div class="p-3">
  214.                     <ul class="list-group">
  215.                         <li class="list-group-item">
  216.                             <h5 class="pb-2">Choose Color Scheme
  217.                             </h5>
  218.                             <div class="theme-settings-swatches">
  219.                                 <div class="swatch-holder bg-primary switch-sidebar-cs-class"
  220.                                      data-class="bg-primary sidebar-text-light">
  221.                                 </div>
  222.                                 <div class="swatch-holder bg-secondary switch-sidebar-cs-class"
  223.                                      data-class="bg-secondary sidebar-text-light">
  224.                                 </div>
  225.                                 <div class="swatch-holder bg-success switch-sidebar-cs-class"
  226.                                      data-class="bg-success sidebar-text-dark">
  227.                                 </div>
  228.                                 <div class="swatch-holder bg-info switch-sidebar-cs-class"
  229.                                      data-class="bg-info sidebar-text-dark">
  230.                                 </div>
  231.                                 <div class="swatch-holder bg-warning switch-sidebar-cs-class"
  232.                                      data-class="bg-warning sidebar-text-dark">
  233.                                 </div>
  234.                                 <div class="swatch-holder bg-danger switch-sidebar-cs-class"
  235.                                      data-class="bg-danger sidebar-text-light">
  236.                                 </div>
  237.                                 <div class="swatch-holder bg-light switch-sidebar-cs-class"
  238.                                      data-class="bg-light sidebar-text-dark">
  239.                                 </div>
  240.                                 <div class="swatch-holder bg-dark switch-sidebar-cs-class"
  241.                                      data-class="bg-dark sidebar-text-light">
  242.                                 </div>
  243.                                 <div class="swatch-holder bg-focus switch-sidebar-cs-class"
  244.                                      data-class="bg-focus sidebar-text-light">
  245.                                 </div>
  246.                                 <div class="swatch-holder bg-alternate switch-sidebar-cs-class"
  247.                                      data-class="bg-alternate sidebar-text-light">
  248.                                 </div>
  249.                                 <div class="divider">
  250.                                 </div>
  251.                                 <div class="swatch-holder bg-vicious-stance switch-sidebar-cs-class"
  252.                                      data-class="bg-vicious-stance sidebar-text-light">
  253.                                 </div>
  254.                                 <div class="swatch-holder bg-midnight-bloom switch-sidebar-cs-class"
  255.                                      data-class="bg-midnight-bloom sidebar-text-light">
  256.                                 </div>
  257.                                 <div class="swatch-holder bg-night-sky switch-sidebar-cs-class"
  258.                                      data-class="bg-night-sky sidebar-text-light">
  259.                                 </div>
  260.                                 <div class="swatch-holder bg-slick-carbon switch-sidebar-cs-class"
  261.                                      data-class="bg-slick-carbon sidebar-text-light">
  262.                                 </div>
  263.                                 <div class="swatch-holder bg-asteroid switch-sidebar-cs-class"
  264.                                      data-class="bg-asteroid sidebar-text-light">
  265.                                 </div>
  266.                                 <div class="swatch-holder bg-royal switch-sidebar-cs-class"
  267.                                      data-class="bg-royal sidebar-text-light">
  268.                                 </div>
  269.                                 <div class="swatch-holder bg-warm-flame switch-sidebar-cs-class"
  270.                                      data-class="bg-warm-flame sidebar-text-dark">
  271.                                 </div>
  272.                                 <div class="swatch-holder bg-night-fade switch-sidebar-cs-class"
  273.                                      data-class="bg-night-fade sidebar-text-dark">
  274.                                 </div>
  275.                                 <div class="swatch-holder bg-sunny-morning switch-sidebar-cs-class"
  276.                                      data-class="bg-sunny-morning sidebar-text-dark">
  277.                                 </div>
  278.                                 <div class="swatch-holder bg-tempting-azure switch-sidebar-cs-class"
  279.                                      data-class="bg-tempting-azure sidebar-text-dark">
  280.                                 </div>
  281.                                 <div class="swatch-holder bg-amy-crisp switch-sidebar-cs-class"
  282.                                      data-class="bg-amy-crisp sidebar-text-dark">
  283.                                 </div>
  284.                                 <div class="swatch-holder bg-heavy-rain switch-sidebar-cs-class"
  285.                                      data-class="bg-heavy-rain sidebar-text-dark">
  286.                                 </div>
  287.                                 <div class="swatch-holder bg-mean-fruit switch-sidebar-cs-class"
  288.                                      data-class="bg-mean-fruit sidebar-text-dark">
  289.                                 </div>
  290.                                 <div class="swatch-holder bg-malibu-beach switch-sidebar-cs-class"
  291.                                      data-class="bg-malibu-beach sidebar-text-light">
  292.                                 </div>
  293.                                 <div class="swatch-holder bg-deep-blue switch-sidebar-cs-class"
  294.                                      data-class="bg-deep-blue sidebar-text-dark">
  295.                                 </div>
  296.                                 <div class="swatch-holder bg-ripe-malin switch-sidebar-cs-class"
  297.                                      data-class="bg-ripe-malin sidebar-text-light">
  298.                                 </div>
  299.                                 <div class="swatch-holder bg-arielle-smile switch-sidebar-cs-class"
  300.                                      data-class="bg-arielle-smile sidebar-text-light">
  301.                                 </div>
  302.                                 <div class="swatch-holder bg-plum-plate switch-sidebar-cs-class"
  303.                                      data-class="bg-plum-plate sidebar-text-light">
  304.                                 </div>
  305.                                 <div class="swatch-holder bg-happy-fisher switch-sidebar-cs-class"
  306.                                      data-class="bg-happy-fisher sidebar-text-dark">
  307.                                 </div>
  308.                                 <div class="swatch-holder bg-happy-itmeo switch-sidebar-cs-class"
  309.                                      data-class="bg-happy-itmeo sidebar-text-light">
  310.                                 </div>
  311.                                 <div class="swatch-holder bg-mixed-hopes switch-sidebar-cs-class"
  312.                                      data-class="bg-mixed-hopes sidebar-text-light">
  313.                                 </div>
  314.                                 <div class="swatch-holder bg-strong-bliss switch-sidebar-cs-class"
  315.                                      data-class="bg-strong-bliss sidebar-text-light">
  316.                                 </div>
  317.                                 <div class="swatch-holder bg-grow-early switch-sidebar-cs-class"
  318.                                      data-class="bg-grow-early sidebar-text-light">
  319.                                 </div>
  320.                                 <div class="swatch-holder bg-love-kiss switch-sidebar-cs-class"
  321.                                      data-class="bg-love-kiss sidebar-text-light">
  322.                                 </div>
  323.                                 <div class="swatch-holder bg-premium-dark switch-sidebar-cs-class"
  324.                                      data-class="bg-premium-dark sidebar-text-light">
  325.                                 </div>
  326.                                 <div class="swatch-holder bg-happy-green switch-sidebar-cs-class"
  327.                                      data-class="bg-happy-green sidebar-text-light">
  328.                                 </div>
  329.                             </div>
  330.                         </li>
  331.                     </ul>
  332.                 </div>
  333.                 <h3 class="themeoptions-heading">
  334.                     <div>Main Content Options</div>
  335.                     <button type="button" class="btn-pill btn-shadow btn-wide ml-auto active btn btn-focus btn-sm">
  336.                         Restore Default
  337.                     </button>
  338.                 </h3>
  339.                 <div class="p-3">
  340.                     <ul class="list-group">
  341.                         <li class="list-group-item">
  342.                             <h5 class="pb-2">Page Section Tabs
  343.                             </h5>
  344.                             <div class="theme-settings-swatches">
  345.                                 <div role="group" class="mt-2 btn-group">
  346.                                     <button type="button"
  347.                                             class="btn-wide btn-shadow btn-primary btn btn-secondary switch-theme-class"
  348.                                             data-class="body-tabs-line">
  349.                                         Line
  350.                                     </button>
  351.                                     <button type="button"
  352.                                             class="btn-wide btn-shadow btn-primary active btn btn-secondary switch-theme-class"
  353.                                             data-class="body-tabs-shadow">
  354.                                         Shadow
  355.                                     </button>
  356.                                 </div>
  357.                             </div>
  358.                         </li>
  359.                     </ul>
  360.                 </div>
  361.             </div>
  362.         </div>
  363.     </div>
  364. </div>