data-dashboard/src/web-app/+common/css/static/utility-box.less

A data-driven dashboard console for report widgets

// DataDashboard ~~ MIT License
// Constants and utilities -- Reusable values and mixins

// Custom Colors
@colorGraphite: #303030;
@colorCharcoal: #222222;
@colorTar:      #161616;

// Colors
@colorBlueBright:  cornflowerblue;
@colorBlueDark:    royalblue;
@colorBlueGrayish: steelblue;

// Layout
@layoutW:      1200px;
@mobileGutter:    8px;

// Layers for z-index
@layerDialogBox:     500;  //cream of the crop
@layerModal:         400;  //screen overlays
@layerFixedPosition: 300;  //sticky elements
@layerNavigation:    200;  //notifications, menus, and drop-downs
@layerHover:         100;  //tootips and other hover popups
@layerBackground:   -100;  //bottom of the barrel

// Character Entities
@symbolAngleRight:   "\276F";  //character: ❯
@symbolArrowDown:    "\21E9";  //character: ⇩
@symbolArrowUp:      "\21E7";  //character: ⇧
@symbolBallotXMark:  "\2718";  //character: ✘
@symbolCheckmark:    "\2714";  //character: ✔
@symbolEmDash:       "\2014";  //character: —
@symbolTriangleDown: "\25BC";  //character: ▼
@symbolTriangleUp:   "\25B2";  //character: ▲

// Tools

.MonospaceText() {
   font-family: menlo, consolas, monospace;
   font-weight: 700;
   }

.PlainLink() {
   border-bottom: none;
   &:visited {
      color: inherit;
      }
   &:hover {
      color: inherit;
      background-color: transparent;
      outline: none;
      }
   }

.Bullseye() {
   display: flex;
   justify-content: center;
   align-items: center;
   }

.EllipsisLongText(@maxWidth: 20em) {
   max-width: @maxWidth;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   }

.MobileMode(@lessRules) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
   @media (max-width: 667px) { @lessRules(); }
   }