/* * UVital design language implementation: typography, grids, and form * controls. * * Typography * Use regular H1, H2.., P, etc and get suitable styling. Additional * classes: * * .uvSmall Applied to parent element to get smaller everything * .uvNegative Applied to parent element that have a dark background * to make text and controls use a light on dark color scheme. * * Grid * Apply .uvGrid on a parent and one of the .uvCol classes on the children, * e.g. .uvCol2 to have an item span two columns, or nothing for a 1 column * wide element. * * .uvGrid should be directly under which should have no horizontal * padding or margin. * * Form controls * Use regular form controls and get suitable styling. Additional classes: * * .uvSmall Same as in typography * .uvNegative Same as in typography * .uvSecondary Secondary buttons (different colours) * .uvTertiary Tertiary buttons (different colours) * .uvOutline Outline buttons * * Check boxes and radio buttons are unstyled because they're easy to get * wrong and generally have suitable styling by default. * * Links * Regular links look and work as such. The uvBack and uvForward variants * have no text decoration or colouring but a small symbol to the left. * Optional classes to apply: * * .uvBack Link with a left-pointing arrow * .uvForward Link with a right-pointing arrow. Not really the opposite * of the back button but naming is hard. * .uvSecondary Secondary link (uvForward only, different symbol colour) */ @import 'variables.css'; body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 300; line-height: 150%; color: #1e1e1e; background-color: #ffffff; } h1, h2, h3, h4 { margin: 16px 0 8px; } h1.uvSecondary, h2.uvSecondary, h3.uvSecondary, h4.uvSecondary { color: var(--purple-basic); } h1 { font-size: 46px; font-weight: 900; line-height: 115%; } h2 { font-size: 36px; font-weight: 900; line-height: 115%; } h3 { font-size: 24px; font-weight: 900; line-height: 115%; } h4 { font-size: 22px; font-weight: 300; line-height: 115%; } span.uvSecondary { color: var(--purple-basic); } p, ul { margin: 8px 0; } strong { font-weight: 500; } ul { padding-left: 20px; } ul > li::marker { color: var(--purple-basic); } .uvSmall { font-size: 16px; } .uvSmall h1, h2, h3, h4 { margin: 12px 0 6px; } .uvSmall p { margin: 6px 0; } .uvSmall h1 { font-size: 32px; } .uvSmall h2 { font-size: 26px; } .uvSmall h3 { font-size: 23px; } .uvSmall h4 { font-size: 16px; } .uvNegative { color: white; } .uvNegative h1 { color: white; } .uvGrid { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: 30px; min-width: 738px; max-width: 1140px; padding: 0 12px; margin: 0 auto; } .uvCol2 { grid-column-end: span 2; } .uvCol3 { grid-column-end: span 3; } .uvCol4 { grid-column-end: span 4; } .uvCol5 { grid-column-end: span 5; } .uvCol6 { grid-column-end: span 6; } .uvCol7 { grid-column-end: span 7; } .uvCol8 { grid-column-end: span 8; } .uvCol9 { grid-column-end: span 9; } .uvCol10 { grid-column-end: span 10; } .uvCol11 { grid-column-end: span 11; } .uvCol12 { grid-column-end: span 12; } .uvStart1 { grid-column-start: 1; } .uvStart2 { grid-column-start: 2; } .uvStart3 { grid-column-start: 3; } .uvStart4 { grid-column-start: 4; } .uvStart5 { grid-column-start: 5; } .uvStart6 { grid-column-start: 6; } .uvStart7 { grid-column-start: 7; } .uvStart8 { grid-column-start: 8; } .uvStart9 { grid-column-start: 9; } .uvStart10 { grid-column-start: 10; } .uvStart11 { grid-column-start: 11; } button { border: none; border-radius: 6px; padding: 12px; background: var(--orange-basic); /* box-shadow: 0 2px 5px 0 var(--orange-basic-transparent-35); */ color: white; font-size: 18px; font-weight: 700; line-height: 22px; cursor: pointer; transition: background-color ease-in-out 0.1s; } button:not([disabled]):hover, button:not([disabled]):active { /* background: var(--orange-dark); */ /* box-shadow: 0 2px 5px 0 var(--orange-dark-transparent-50); */ } button[disabled] { /* background: var(--orange-dark); */ /* border-radius: 6px; */ box-shadow: none; opacity: 0.4; cursor: default; } button:focus { outline: none; } button.uvSecondary[disabled] { background: var(--purple-dark); border-radius: 6px; box-shadow: none; opacity: 0.4; cursor: default; } button.uvSecondary { background: var(--purple-basic); /* box-shadow: 0 2px 5px 0 var(--purple-dark-transparent-35); */ } button.uvSecondary:not([disabled]):hover, button.uvSecondary:not([disabled]):active { background: var(--purple-dark); /* box-shadow: 0 2px 5px 0 var(--purple-dark-transparent-50); */ } button.uvSecondary[disabled] { box-shadow: none; } button.uvTertiary { color: black; background: #f2f2f2; box-shadow: 0 2px 5px 0 rgba(25, 25, 25, 0.3); } button.uvTertiary:not([disabled]):hover, button.uvTertiary:not([disabled]):active { color: black; background: #e5e5e5; box-shadow: 0 2px 5px 0 rgba(25, 25, 25, 0.3); } button.uvTertiary[disabled] { color: white; background-color: var(--purple-dark); box-shadow: none; opacity: 0.4; } button.uvOutline { color: #1e1e1e; background: transparent; border: 1px solid #4c4c4c; box-shadow: none; /* TODO shadow for outline only */ } button.uvOutline:not([disabled]):hover, button.uvOutline:not([disabled]):active { color: white; background: var(--purple-dark); box-shadow: none; } .uvSmall button { padding: 11px 15px; font-size: 16px; font-weight: 500; line-height: 19px; } .uvNegative button, .uvNegative button.uvSecondary, .uvNegative button.uvTertiary, .uvNegative button.uvOutline { color: black; background: white; } .uvNegative button:not([disabled]):hover, .uvNegative button:not([disabled]).uvSecondary:hover, .uvNegative button:not([disabled]).uvTertiary:hover, .uvNegative button:not([disabled]).uvOutline:hover { color: #1e1e1e; background-color: #e5e5e5; } .uvNegative button[disabled], .uvNegative button.uvSecondary[disabled], .uvNegative button.uvTertiary[disabled] { background-color: #e5e5e5; } a { color: var(--purple-dark); } a.uvForward, a.uvBack { color: #1e1e1e; font-size: 16px; text-decoration: none; } a.uvForward::before, a.uvBack::before { /* TODO placeholder styling */ display: inline-block; /* for transform() */ margin-right: 5px; content: '›'; color: var(--orange-basic); font-size: 20px; font-weight: 900; transition: transform ease-out 0.1s; } a.uvBack::before { color: black; content: '‹'; font-weight: 300; } a.uvSecondary::before { color: #4985b8; } .uvNegative a, .uvNegative a.uvForward::before, .uvNegative a.uvSecondary::before, .uvNegative a.uvBack::before { color: white; } .uvNegative a.uvSecondary::before { font-weight: 300; } span.MuiSlider-root { color: var(--purple-basic); } input:not([type='checkbox']):not([type='radio']), select, textarea { padding: 9px 15px; border: 1px solid #e5e5e5; border-radius: 6px; box-shadow: 0 1px 4px 0 rgba(25, 25, 25, 0.1); color: #1e1e1e; font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 300; transition: border-color ease-in-out 0.1s; } input[disabled]:not([type='checkbox']):not([type='radio']), select[disabled], textarea[disabled] { color: #8e8e8e; } input:focus:not([type='checkbox']):not([type='radio']), select:focus, textarea:focus { border-color: var(--purple-basic); outline: none; } .right { float: right; } .noBold { font-weight: normal; } /* Checkboxes */ .uvCheckboxContainer { font-size: 14px; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .uvCheckboxContainer input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .uvCheckmark { position: absolute; top: 6px; left: 0; height: 18px; width: 18px; background-color: #ffffff; border-radius: 3px; border: 1px solid #bcbbbb; box-shadow: 0 2px 30px 0 rgba(30, 30, 30, 0.15); } /* On mouse-over, add a grey background color */ .uvCheckboxContainer:hover input ~ .uvCheckmark { background-color: #e5e5e5; } /* When the checkbox is checked, add a blue background */ .uvCheckboxContainer input:checked ~ .uvCheckmark { background-color: var(--purple-basic); } /* Create the checkmark/indicator (hidden when not checked) */ .uvCheckmark:after { content: ''; position: absolute; display: none; } /* Show the checkmark when checked */ .uvCheckboxContainer input:checked ~ .uvCheckmark:after { display: block; } /* Style the checkmark/indicator */ .uvCheckboxContainer .uvCheckmark:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Diver line */ .hr.solid { border-top: 3px solid #bbb; } /* Font styling */ .textCenter { text-align: center; } /* scrollbar */ .scrollbar { overflow: auto; } .scrollbar::-webkit-scrollbar { width: 12px; } .scrollbar::-webkit-scrollbar-track { background: #ffffff; } .scrollbar::-webkit-scrollbar-thumb { background-color: #e5e5e5; border-radius: 20px; border: 3px solid #ffffff; } .uvSpinnerSvg { animation: anim-uv-spinner 2s linear infinite; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; margin: auto; width: 1rem; height: 1rem; } .uvSpinnerSvg.hidetp { opacity: 0 } .uvSpinnerSvg circle { animation: anim-uv-spinner-circle 1.5s ease-in-out infinite; stroke-dasharray: 1,200; stroke-dashoffset: 0; stroke-linecap: round; stroke: #FFF; } .uvSpinnerSvg.gray circle { stroke: #444 } @keyframes anim-uv-spinner { from{ -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes anim-uv-spinner-circle { 0%{ stroke-dasharray:1,200; stroke-dashoffset:0; } 50%{ stroke-dasharray:89,200; stroke-dashoffset:-35px; } 100%{ stroke-dasharray:89,200; stroke-dashoffset:-124px; } }