/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Visual styles for progress bar. * * @see progress.js */ :root { /* * Color Palette. */ /* Secondary. */ /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* * Base. */ /* * Typography. */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */ /** * Spaces. */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */ /* * Common. */ /* * Inputs. */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */ /* * Details. */ /** * Buttons. */ /** * jQuery.UI dropdown. */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */ /** * jQuery.UI dialog. */ /** * Progress bar. */ /** * Tabledrag icon size. */ /* 17px */ /** * Ajax progress. */ /** * Breadcrumb. */ } .progress::after { display: table; clear: both; content: ""; } .progress--small .progress__track { height: calc(0.5rem - 2px); } .progress--small .progress__bar { width: calc(0.5rem - 2px); min-width: calc(0.5rem - 2px); height: calc(0.5rem - 2px); } .progress--small .progress__label { font-size: 0.889rem; } .progress__track { height: calc(1rem - 2px); margin-top: 0; border: 1px #8e929c solid; border-radius: 1rem; background-color: #d4d4d8; } .progress__bar { width: calc(1rem - 2px); min-width: calc(1rem - 2px); height: calc(1rem - 2px); margin-top: -1px; margin-left: -1px; /* LTR */ transition: width 0.5s ease-out; border: 1px #003cc5 solid; border-radius: 1rem; background-color: #003cc5; } [dir="rtl"] .progress__bar { margin-right: -1px; margin-left: 0; } @media screen and (-ms-high-contrast: active) { .progress__bar { background-color: windowText; } } .progress__label { margin-bottom: 0.5rem; font-size: 1rem; font-weight: bold; } .progress__description, .progress__percentage { overflow: hidden; margin-top: 0.5rem; color: #545560; font-size: 0.79rem; } @media screen and (prefers-reduced-motion: reduce) { .progress__bar { transition: none; } }