API tools faq
paste
Advertisement
Savelyev_Vyacheslav

css urgency

Savelyev_Vyacheslav
Jun 26th, 2023 (edited)
642
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.57 KB | None | 0 0
raw download clone embed print report
  1. /*data.urgencyWidgetStateAnnotation*/
  2. .state-warning-on-widget-collapsed-form-annotation {
  3.     font-size:14px;
  4.     line-height:20px;
  5.     padding-top:16px;
  6.   }
  7.   /*data.urgencyWidgetStateButton*/
  8.   .state-warning-on-widget-collapsed-form-button {
  9.     margin-top:0px;
  10.   }
  11.  
  12.  
  13.   /*data.urgencyWidgetStateAnnotation*/
  14.   .state-warning-on-widget-expanded-form-annotation {
  15.     font-size:12px;
  16.     line-height:16px;
  17.     padding-top:4px;
  18.     padding-bottom:0px;
  19.   }
  20.   /*data.urgencyWidgetStateButton*/
  21.   .state-warning-on-widget-expanded-form-button {
  22.     margin-top:16px;
  23.   }
  24. /*bp4*/
  25. @media screen and (max-width: 576px) {
  26.   /*data.urgencyWidgetStateButton*/
  27.   .state-warning-on-widget-expanded-form-button {
  28.     margin-top:16px !important;
  29.   }
  30. }
  31.   /*data.urgencyWidgetStateChoice*/
  32.   .state-warning-on-widget-expanded-form-choice {
  33.     margin-bottom:14px;
  34.   }
  35.  
  36.  
  37.   /*data.urgencyWidgetStateAnnotation*/
  38.   .state-warning-off-widget-collapsed-form-annotation {
  39.     font-size:14px;
  40.     line-height:20px;
  41.     padding-top:16px;
  42.   }
  43.   /*data.urgencyWidgetStateChange*/
  44.   @media screen and ( max-width:1201px ) {
  45.     .state-warning-off-widget-collapsed-form-change {
  46.     margin-bottom:0px;
  47.   }
  48.   }/*data.urgencyWidgetStateWarning*/
  49.   .state-warning-off-widget-collapsed-info-warning {
  50.     margin-bottom:16px;
  51.   }
  52.   /*data.urgencyWidgetStateChoice*/
  53.   .state-warning-off-widget-collapsed-form-choice {
  54.     margin-bottom:14px;
  55.   }
  56.  
  57.  
  58.   /*data.urgencyWidgetStateAnnotation*/
  59.   .state-warning-off-widget-expanded-form-annotation {
  60.     font-size:12px;
  61.     line-height:16px;
  62.     padding-top:4px;
  63.     padding-bottom:0px;
  64.   }
  65.   /*data.urgencyWidgetStateChange*/
  66.   @media screen and ( max-width:1201px ) {
  67.     .state-warning-off-widget-expanded-form-change {
  68.     margin-bottom:16px;
  69.   }
  70.   }/*data.urgencyWidgetStateWarning*/
  71.   .state-warning-off-widget-expanded-info-warning {
  72.     margin-bottom:0px;
  73.   }
  74.   /*data.urgencyWidgetStateChoice*/
  75.   .state-warning-off-widget-expanded-form-choice {
  76.     margin-bottom:12px;
  77.     margin-top:0px;
  78.   }
  79.   /*data.urgencyWidgetStateButton*/
  80.   .state-warning-off-widget-expanded-form-button {
  81.     margin-top:16px;
  82.   }
  83. /*bp4*/
  84. @media screen and (max-width: 576px) {
  85.   /*data.urgencyWidgetStateButton*/
  86.   .state-warning-off-widget-expanded-form-button {
  87.     margin-top:16px !important;
  88.   }
  89. }
  90.  
  91.  
  92. .urgency-form {
  93.     background-color:  #FFFFFF;
  94.     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 2px 4px #D3D3D3;
  95.     border-radius: 4px;
  96.     margin: 0px 0px 24px 0px;
  97.     padding: 24px;
  98. }
  99.  
  100. .urgency-form__header {
  101.     display: flex;
  102.     flex-wrap: wrap;
  103.     justify-content: space-between;
  104. }
  105.  
  106. .urgency-form-header__wrapper {
  107.     display: flex;
  108.     font-family: 'Montserrat';
  109.     font-style: normal;
  110.     font-weight: 600;
  111.     font-size: 20px;
  112.     line-height: 24px;
  113.     color: #2E3238;
  114. }
  115.  
  116. .urgency-form-header__wrapper {
  117.     padding-right: 10px;
  118.         padding-top: 5px;
  119. }
  120.  
  121. .urgency-form-tooltip__button {
  122.     float: left;
  123.     height: 0px;
  124.         margin-left: 10px;
  125.         margin-top: 2px;
  126. }
  127.  
  128. .urgency-form-content__img {
  129.     height: 14px;
  130.     margin-top: 3px;
  131.     min-width: 16px;
  132.     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.33332 13.6667C1.99999 13.6667 1.66666 13.6001 1.33332 13.4001C0.399991 12.8667 0.0666581 11.6001 0.599991 10.6667L6.26666 1.20006C6.46666 0.93339 6.66666 0.666724 6.93332 0.53339C7.39999 0.266724 7.93332 0.200057 8.46666 0.33339C8.99999 0.466724 9.39999 0.800057 9.73332 1.26672L15.3333 10.6667C15.5333 11.0001 15.6 11.3334 15.6 11.6667C15.6 12.2001 15.4 12.7334 15 13.0667C14.6667 13.4667 14.2 13.6667 13.6667 13.6667H2.33332ZM7.39999 1.93339L1.79999 11.3334C1.59999 11.6667 1.73332 12.0667 2.06666 12.2667C2.13332 12.3334 2.26666 12.3334 2.33332 12.3334H13.6C13.8 12.3334 13.9333 12.2667 14.0667 12.1334C14.2 12.0001 14.2667 11.8667 14.2667 11.6667C14.2667 11.5334 14.2667 11.4667 14.2 11.3334L8.59999 1.93339C8.39999 1.60006 7.99999 1.53339 7.66666 1.66672C7.53332 1.73339 7.46666 1.80006 7.39999 1.93339Z' fill='%23E68600'/%3e%3cpath d='M7.99999 8.33339C7.59999 8.33339 7.33332 8.06672 7.33332 7.66672V5.00006C7.33332 4.60006 7.59999 4.33339 7.99999 4.33339C8.39999 4.33339 8.66666 4.60006 8.66666 5.00006V7.66672C8.66666 8.06672 8.39999 8.33339 7.99999 8.33339Z' fill='%23E68600'/%3e%3cpath d='M8 11C8.36819 11 8.66667 10.7016 8.66667 10.3334C8.66667 9.96518 8.36819 9.66671 8 9.66671C7.63181 9.66671 7.33333 9.96518 7.33333 10.3334C7.33333 10.7016 7.63181 11 8 11Z' fill='%23E68600'/%3e%3c/svg%3e ");
  133. }
  134.  
  135. .urgency-form__hint {
  136.     height: 16px;
  137.     width: 16px;
  138.     border: none;
  139.     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM0.666667 8C0.666667 3.94991 3.94991 0.666667 8 0.666667C12.0501 0.666667 15.3333 3.94991 15.3333 8C15.3333 12.0501 12.0501 15.3333 8 15.3333C3.94991 15.3333 0.666667 12.0501 0.666667 8Z' fill='%232E3238'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 7.33333C8.36819 7.33333 8.66667 7.63181 8.66667 8V10.6667C8.66667 11.0349 8.36819 11.3333 8 11.3333C7.63181 11.3333 7.33333 11.0349 7.33333 10.6667V8C7.33333 7.63181 7.63181 7.33333 8 7.33333Z' fill='%232E3238'/%3e%3cpath d='M8.66667 5.33333C8.66667 5.70152 8.36819 6 8 6C7.63181 6 7.33333 5.70152 7.33333 5.33333C7.33333 4.96514 7.63181 4.66667 8 4.66667C8.36819 4.66667 8.66667 4.96514 8.66667 5.33333Z' fill='%232E3238'/%3e%3c/svg%3e ");
  140. }
  141.  
  142. .urgency-form__hint:hover {
  143.     padding: 2px;
  144.     border-radius: 4px;
  145.     background-color: #D5D8DD;
  146.     cursor: pointer;
  147.     padding-bottom: 0px;
  148.     padding-right: 0px;
  149.     padding-top: 0px;
  150.     padding-left: 0px;
  151.     z-index: 10;
  152. }
  153.  
  154. .urgency-form-header__tooltip {
  155.     display: block;
  156.     position: absolute;
  157.         width: 0px;
  158.         padding: 0px;
  159. }
  160.  
  161. .urgency-form-header__tooltip .urgency-form-tooltip {
  162.     padding-bottom: 0px;
  163.     padding-right: 0px;
  164.     padding-top: 0px;
  165.     padding-left: 0px;
  166. }
  167.  
  168. .urgency-form-header__tooltip:hover {
  169.     display: block;
  170.     width: 0px;
  171.     padding-bottom: 0px;
  172.     padding-top: 0px;
  173. }
  174.  
  175. .urgency-form-tooltip {
  176.     gap: 16px;
  177.     padding: 0px;
  178.     padding-top: 0px;
  179.     padding-bottom: 0px;
  180.     width: 280px;
  181. }
  182.  
  183. .urgency-form-header__tooltip .regular{
  184.     font-weight: 400;
  185. }
  186.  
  187. .urgency-form-tooltip div {
  188.     visibility: visible;
  189.     position: absolute;
  190.     z-index: 10;
  191.     top: -1em;
  192.     right: 100%;
  193.     margin-left: 1em;
  194.     opacity: 1;
  195.     transition: opacity 1s;
  196.     padding: 16px;
  197.     font-family: 'Open Sans';
  198.     font-style: normal;
  199.     font-weight: 600;
  200.     font-size: 14px;
  201.     line-height: 20px;
  202.     color: #2E3238;
  203.     background: #FFFFFF;
  204.     border-radius: 4px;
  205.     border: none;
  206.     box-shadow: 1px 1px 5px 1px rgb(222, 222, 222);
  207.     /*< подвинуть хинт*/
  208.     margin-right: -150px;
  209.     margin-top: -5px;
  210.     /* подвинуть хинт >*/
  211.     align-items: center;
  212.     text-align: left;
  213.     display: inline;
  214.     min-width: 280px;
  215. }
  216.  
  217. .urgency-form-tooltip div::after {
  218.     content: "";
  219.     position: absolute;
  220.     top: 1.5em;
  221.     right: 0%;
  222.     margin-top: -5px;
  223.     margin-right: -19px;
  224.     border-width: 13px 10px;
  225.     border-style: solid;
  226.     border-color: transparent transparent transparent #FFFFFF;
  227.     filter: drop-shadow(3px 0px 2px rgb(222, 222, 222));
  228. }
  229.  
  230. .urgency-form-content__current-urgency{
  231.         color: #2E3238;
  232.     font-size: 14px;
  233.     line-height: 20px;
  234.         padding-top: 16px;
  235. }
  236.  
  237. .urgency-form-content__annotation {
  238.     color: #2E3238;
  239.     font-family: 'Open Sans';
  240.     font-size: 12px;
  241.     line-height: 16px;
  242.     width: 100%;
  243.        padding-top: 4px;
  244. }
  245.  
  246. .urgency-form-content__choice {
  247.     font-family: 'Open Sans';
  248.     font-style: normal;
  249.     font-weight: 400;
  250.     font-size: 14px;
  251.     line-height: 20px;
  252.     margin-top: 16px;
  253.     margin-bottom: 0px;
  254. }
  255.  
  256. .urgency-form-content__choice div {
  257.     margin-top: 12px;
  258.     color: #2E3238;
  259. }
  260.  
  261. .urgency-form-content__request {
  262.     font-family: 'Open Sans';
  263.     font-style: normal;
  264.     font-weight: 400;
  265.     font-size: 14px;
  266.     line-height: 20px;
  267.     padding-left: 16px;
  268.     color: #0B0C0E;
  269.         width: 100%;
  270. }
  271.  
  272. .urgency-form-content__warning-massge {
  273.     background-color: #FFF4E5;
  274.     margin-bottom: 0px;
  275.     margin-top: 16px;
  276.     padding: 15px;
  277.     border: 1px solid #FFD599;
  278.     border-radius: 4px;
  279.     display: flex;
  280.     justify-content: center;
  281. }
  282.  
  283. .urgency-info-warning-phone {
  284.     font-family: 'Open Sans';
  285.     font-style: normal;
  286.     font-weight: 400;
  287.     font-size: 14px;
  288.     line-height: 20px;
  289.     color: #0086E5;
  290.     white-space:  nowrap;
  291. }
  292.  
  293. .urgency-form-content__button {
  294.     display: flex;
  295.     flex-direction: row-reverse;
  296.     align-self: flex-end;
  297. margin-top: 16px;
  298. }
  299.  
  300. .urgency-form-content__button div {
  301.     display: flex;
  302.     flex-direction: row-reverse;
  303.     align-self: flex-end;
  304.     margin-left: 5px
  305. }
  306.  
  307. .urgency-form-content__button button {
  308.     margin-left: 5px
  309. }
  310.  
  311. /*bp1*/
  312. @media screen and (max-width: 1200px) {
  313. .urgency-form__change {
  314.         margin-top: 0px;
  315. }
  316.     .urgency-form-content__warning-massge {
  317.         margin-top: 16px;
  318.     }
  319.  
  320.     .urgency-form-header__wrapper {
  321.         width: 100%;
  322.     }
  323.  
  324.     .urgency-form-header__wrapper {
  325.         width: 100%;
  326.       margin-bottom:0px
  327.     }
  328.  
  329.     .urgency-form__header :nth-child(1) {
  330.         order: 1;
  331.         min-width: 100% important;
  332.     }
  333.  
  334.     .urgency-form__header :nth-child(2) {
  335.         order: 3;
  336.     }
  337.  
  338.     .urgency-form__header :nth-child(3) {
  339.         order: 2;
  340.     }
  341.  
  342.     .urgency-form__hint {
  343.         margin-right: 2px;
  344.     }
  345.  
  346.     .urgency-form-content__annotation {
  347.         padding: 16px 0 16px 0;
  348.     }
  349. }
  350.  
  351.  
  352. /*bp2*/
  353. @media screen and (max-width: 992px) {
  354.     .urgency-form__hint {
  355.         margin-top: 0px;
  356.         margin-right: 0px;
  357.     }
  358.  
  359. }
  360.  
  361. /*bp3*/
  362. @media screen and (max-width: 768px) {
  363.         .urgency-form-tooltip__button {
  364.             margin-top: 5px;
  365.         }
  366. }
  367.  
  368. /*bp4*/
  369. @media screen and (max-width: 576px) {
  370.     #urgency-form {
  371.         padding: 16px;
  372.     }
  373.  
  374.     .urgency-form__hint {
  375.         margin-top: 0px;
  376.         margin-right: 4px;
  377.     }
  378.  
  379.     .urgency-form-header__wrapper {
  380.         font-size: 16px;
  381.         line-height: 20px;
  382.     }
  383.  
  384.     .urgency-form__hint {
  385.         margin-right: 0px;
  386.     }
  387.  
  388.     .urgency-form-content__button {
  389.         display: flex;
  390.         flex-direction: column;
  391.     }
  392.  
  393.     .urgency-form-content__button div {
  394.         display: flex;
  395.         flex-direction: column;
  396.     }
  397.  
  398.     .urgency-form-content__button button {
  399.         margin-left: 0px
  400.     }
  401.  
  402.     .urgency-form-content__cancel-button {
  403.         margin-left: 0px;
  404.         margin-top: 0px;
  405.         margin-bottom: 0px;
  406.         width: 100%;
  407.     }
  408.  
  409.     .urgency-form-content__save-button {
  410.         padding-top: 0px;
  411.         padding-bottom: 16px;
  412.         width: 100%;
  413.     }
  414.  
  415.     .urgency-info-warning-phone {
  416.         padding-top: 4px;
  417.     }
  418.  
  419.     .urgency-form-content__button {
  420.         margin-top: 0px;
  421.         margin-bottom: 0px;
  422.     }
  423. }
  424.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!