{"version":3,"sources":["foopeople.admin.css","includes/_reset.scss","includes/_icons.scss","includes/_utilities.scss","includes/_person-item-admin.scss","includes/_breakpoints.scss","includes/_person-listing.scss","includes/_person-item.scss","includes/_theme-options.scss","includes/_variables.scss"],"names":[],"mappings":"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","file":"../foopeople.admin.css","sourcesContent":[null,".pacepeople {\r\n\tbox-sizing: border-box;\r\n\t* {\r\n\t\tbox-sizing: border-box;\r\n\t}\t\r\n}","$icomoon-font-path: \"../icons\" !default;\r\n\r\n$ppl_icon-close-thin: \"\\e90f\";\r\n$ppl_icon-close-thick: \"\\e90e\";\r\n$ppl_icon-minus-circle: \"\\e90c\";\r\n$ppl_icon-minus: \"\\e90d\";\r\n$ppl_icon-plus-circle: \"\\e900\";\r\n$ppl_icon-plus: \"\\e901\";\r\n$ppl_icon-phone: \"\\e902\";\r\n$ppl_icon-sitemap: \"\\e903\";\r\n$ppl_icon-map-marker: \"\\e904\";\r\n$ppl_icon-group: \"\\e905\";\r\n$ppl_icon-user: \"\\e906\";\r\n$ppl_icon-tags: \"\\e907\";\r\n$ppl_icon-tag: \"\\e908\";\r\n$ppl_icon-envelope-o: \"\\e909\";\r\n$ppl_icon-envelope-open: \"\\e90a\";\r\n$ppl_icon-envelope: \"\\e90b\";\r\n\r\n@font-face {\r\n  font-family: 'foopeople';\r\n  src:\r\n    url('#{$icomoon-font-path}/foopeople.ttf?s79s01') format('truetype'),\r\n    url('#{$icomoon-font-path}/foopeople.woff?s79s01') format('woff'),\r\n    url('#{$icomoon-font-path}/foopeople.svg?s79s01#foopeople') format('svg');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\n\r\n@mixin icon() {\r\n  /* use !important to prevent issues with browser extensions that change fonts */\r\n  font-family: 'foopeople' !important;\r\n  speak: none;\r\n  font-style: normal;\r\n  font-weight: normal;\r\n  font-variant: normal;\r\n  text-transform: none;\r\n  line-height: 1;\r\n  font-size: 17px;\r\n  display: inline-block;\r\n  vertical-align: top;\r\n\r\n  /* Better Font Rendering =========== */\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n[class^=\"ppl_icon-\"], [class*=\" ppl_icon-\"] {\r\n  @include icon();\r\n}\r\n\r\n.ppl_icon-close-thin {\r\n  &:before {\r\n    content: $ppl_icon-close-thin;\r\n  }\r\n}\r\n.ppl_icon-close-thick {\r\n  &:before {\r\n    content: $ppl_icon-close-thick;\r\n  }\r\n}\r\n.ppl_icon-minus-circle {\r\n  &:before {\r\n    content: $ppl_icon-minus-circle;\r\n  }\r\n}\r\n.ppl_icon-minus {\r\n  &:before {\r\n    content: $ppl_icon-minus;\r\n  }\r\n}\r\n.ppl_icon-plus-circle {\r\n  &:before {\r\n    content: $ppl_icon-plus-circle;\r\n  }\r\n}\r\n.ppl_icon-plus {\r\n  &:before {\r\n    content: $ppl_icon-plus;\r\n  }\r\n}\r\n.ppl_icon-phone {\r\n  &:before {\r\n    content: $ppl_icon-phone;\r\n  }\r\n}\r\n.ppl_icon-sitemap {\r\n  &:before {\r\n    content: $ppl_icon-sitemap;\r\n  }\r\n}\r\n.ppl_icon-map-marker {\r\n  &:before {\r\n    content: $ppl_icon-map-marker;\r\n  }\r\n}\r\n.ppl_icon-group {\r\n  &:before {\r\n    content: $ppl_icon-group;\r\n  }\r\n}\r\n.ppl_icon-user {\r\n  &:before {\r\n    content: $ppl_icon-user;\r\n  }\r\n}\r\n.ppl_icon-tags {\r\n  &:before {\r\n    content: $ppl_icon-tags;\r\n  }\r\n}\r\n.ppl_icon-tag {\r\n  &:before {\r\n    content: $ppl_icon-tag;\r\n  }\r\n}\r\n.ppl_icon-envelope-o {\r\n  &:before {\r\n    content: $ppl_icon-envelope-o;\r\n  }\r\n}\r\n.ppl_icon-envelope-open {\r\n  &:before {\r\n    content: $ppl_icon-envelope-open;\r\n  }\r\n}\r\n.ppl_icon-envelope {\r\n  &:before {\r\n    content: $ppl_icon-envelope;\r\n  }\r\n}\r\n\r\n","// Utility styles\r\n// -------------------------------------------\r\n\r\n// Spacer\r\n.ppl__item_spacer {\r\n\tmargin-right: 3px;\r\n}\r\n\r\n// Delimiters\r\n.ppl__item_delimiter {\r\n\t// white-space: nowrap;\r\n\t&:after {\r\n\t\tcontent: ' , ';\r\n\t\tdisplay: inline-block;\r\n\t}\r\n\t&:last-of-type:after {\r\n\t\tcontent: '';\r\n\t}\r\n}\r\n\r\n.ppl__item_pipe {\r\n\t// white-space: nowrap;\r\n\t&:after {\r\n\t\tcontent: ' | ';\r\n\t\tdisplay: inline-block;\r\n\t\tcolor: silver;\r\n\t}\r\n\t&:last-of-type:after {\r\n\t\tcontent: '';\r\n\t}\r\n}\r\n\r\n// Text styles\r\n.ppl_text_captitalize {\r\n\ttext-transform: capitalize;\r\n}\r\n\r\n\r\n// Make a WP admin button\r\n@mixin wordpressbutton() {\r\n\tcolor: #0071a1;\r\n    border-color: #0071a1;\r\n    background: #f3f5f6;\r\n\tvertical-align: top;\r\n\r\n\tdisplay: inline-block;\r\n    text-decoration: none;\r\n    font-size: 13px;\r\n    line-height: 2.15384615;\r\n    min-height: 30px;\r\n    margin: 0;\r\n    padding: 0 10px;\r\n    cursor: pointer;\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    -webkit-appearance: none;\r\n    border-radius: 3px;\r\n    white-space: nowrap;\r\n    box-sizing: border-box;\r\n}","// Hide the default title meta box\r\n#titlediv {\r\n\tdisplay: none;\r\n}\r\n\r\n// Remove margin at top of content editor\r\n#post-body-content  {\r\n    margin-bottom: 0;\r\n}\r\n\r\n\r\n\r\n// Remove margins from person listing item\r\n#post-ppl-preview {\r\n\tmargin: 0;\r\n\r\n\t&.js-ppl__loading {\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n#set-post-thumbnail,\r\n#remove-post-thumbnail {\r\n\t@include wordpressbutton();\r\n}\r\n\r\n// Some layout tweak to the preview item icons\r\n.ppl__card_particulars {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}","// Breakpoint viewport sizes and media queries.\r\n//\r\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\r\n//\r\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\r\n//\r\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\r\n\r\n// Name of the next breakpoint, or null for the last breakpoint.\r\n//\r\n//    >> breakpoint-next(sm)\r\n//    md\r\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\r\n//    md\r\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\r\n//    md\r\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\r\n  $n: index($breakpoint-names, $name);\r\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\r\n}\r\n\r\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\r\n//\r\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\r\n//    576px\r\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\r\n  $min: map-get($breakpoints, $name);\r\n  @return if($min != 0, $min, null);\r\n}\r\n\r\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\r\n// The maximum value is calculated as the minimum of the next one less 0.02px\r\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\r\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\r\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\r\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\r\n//\r\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\r\n//    767.98px\r\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\r\n  $next: breakpoint-next($name, $breakpoints);\r\n  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);\r\n}\r\n\r\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\r\n// Useful for making responsive utilities.\r\n//\r\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\r\n//    \"\"  (Returns a blank string)\r\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\r\n//    \"-sm\"\r\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\r\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\r\n}\r\n\r\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\r\n// Makes the @content apply to the given breakpoint and wider.\r\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\r\n  $min: breakpoint-min($name, $breakpoints);\r\n  @if $min {\r\n    @media (min-width: $min) {\r\n      @content;\r\n    }\r\n  } @else {\r\n    @content;\r\n  }\r\n}\r\n\r\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\r\n// Makes the @content apply to the given breakpoint and narrower.\r\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\r\n  $max: breakpoint-max($name, $breakpoints);\r\n  @if $max {\r\n    @media (max-width: $max) {\r\n      @content;\r\n    }\r\n  } @else {\r\n    @content;\r\n  }\r\n}\r\n\r\n// Media that spans multiple breakpoint widths.\r\n// Makes the @content apply between the min and max breakpoints\r\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\r\n  $min: breakpoint-min($lower, $breakpoints);\r\n  $max: breakpoint-max($upper, $breakpoints);\r\n\r\n  @if $min != null and $max != null {\r\n    @media (min-width: $min) and (max-width: $max) {\r\n      @content;\r\n    }\r\n  } @else if $max == null {\r\n    @include media-breakpoint-up($lower, $breakpoints) {\r\n      @content;\r\n    }\r\n  } @else if $min == null {\r\n    @include media-breakpoint-down($upper, $breakpoints) {\r\n      @content;\r\n    }\r\n  }\r\n}\r\n\r\n// Media between the breakpoint's minimum and maximum widths.\r\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\r\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\r\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\r\n  $min: breakpoint-min($name, $breakpoints);\r\n  $max: breakpoint-max($name, $breakpoints);\r\n\r\n  @if $min != null and $max != null {\r\n    @media (min-width: $min) and (max-width: $max) {\r\n      @content;\r\n    }\r\n  } @else if $max == null {\r\n    @include media-breakpoint-up($name, $breakpoints) {\r\n      @content;\r\n    }\r\n  } @else if $min == null {\r\n    @include media-breakpoint-down($name, $breakpoints) {\r\n      @content;\r\n    }\r\n  }\r\n}\r\n","$item_duration: 500ms;\r\n$details_duration: 800ms;\r\n$details_delay: 500ms;\r\n\r\n\r\n\r\n.ppl_listing {\r\n\tlist-style: none;\r\n\tmargin: 0 -$listing_gutter/2;\r\n\tmargin-bottom: $m-lg;\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n\r\n\t// Header\r\n\t// --------------------------------------------------------\r\n\t.ppl__card_header {\r\n\t\tborder-bottom: solid 1px $light;\r\n\t}\r\n\r\n\t// More details\r\n\t// --------------------------------------------------------\r\n\t.ppl__card_more-details {\r\n\t\tmax-height: 0;\r\n\t\toverflow: hidden;\r\n\t\ttransition: max-height $details_duration ease-in-out;\r\n\t\tbackground: $light;\r\n\r\n\t\t@include media-breakpoint-down(sm) {\r\n\t\t\tmargin: $m-md #{-$m-xs} #{-$m-xs} #{-$m-xs};\r\n\t\t}\r\n\r\n\t\t@include media-breakpoint-up(md) {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 100%;\r\n\t\t\tleft: -1px;\r\n\t\t\tright: -1px;\r\n\t\t\tborder: solid 1px $light;\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\t\t.ppl__card_particulars-wrapper {\r\n\t\t\tpadding: $m-sm;\r\n\t\t}\r\n}\r\n\r\n\r\n// A person item\r\n// --------------------------------------------------------\r\n.ppl__listing-item {\r\n\tposition: relative;\r\n\tz-index: 0;\r\n\tmargin: 0 $listing_gutter/2;\r\n\tmargin-bottom: $m-md;\r\n\r\n\tborder: solid 1px $light;\r\n\tfont-size: $font-base;\r\n\ttext-align: center;\r\n\tcursor: pointer;\r\n\r\n\tbackground: $white;\r\n\ttransition: $item_duration all ease-in-out;\r\n\r\n\t.ppl__button {\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t&.is-hidden {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t@include media-breakpoint-up(md) {\r\n\r\n\t\t&:hover {\r\n\t\t\t.ppl__card_portrait_thumbnail {\r\n\t\t\t\ttransform: scale(1.2);\r\n\t\t\t}\r\n\t\t}\r\n\t\t&:after {\r\n\t\t\t@include icon();\r\n\t\t\tcontent: $ppl_icon-close-thin;\r\n\t\t\tfont-size: 30px;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 10px;\r\n\t\t\tright: 10px;\r\n\t\t\topacity: 0;\r\n\t\t\ttransition: $item_duration all ease-in-out;\r\n\t\t}\r\n\r\n\t\t// Active toggle\r\n\t\t// --------------------------------------------------------\r\n\t\t&.is-active {\r\n\t\t\t// transition-delay: $item_duration;\r\n\t\t\ttransform: scale(1.2);\r\n\t\t\tz-index: 1;\r\n\t\t\t// transform-origin: top center;\r\n\t\t\tbox-shadow: 0 0 40px 10px rgba(0,0,0,0.2);\r\n\t\t\tborder-bottom-left-radius: 0;\r\n\t\t\tborder-bottom-right-radius: 0;\r\n\t\t\t.ppl__card_more-details {\r\n\t\t\t\tmax-height: 400px;\r\n\t\t\t\topacity: 1;\r\n\t\t\t\ttransition-delay: $details_delay;\r\n\t\t\t}\r\n\r\n\t\t\t&:after {\r\n\t\t\t\topacity: 1;\r\n\t\t\t\ttransition-delay: $details_delay;\r\n\t\t\t}\r\n\t\t}\r\n\t} // END media query\r\n\r\n\t@include media-breakpoint-down(md) {\r\n\t\t// Active toggle\r\n\t\t// --------------------------------------------------------\r\n\t\t&.is-active {\r\n\t\t\t.ppl__card_more-details {\r\n\t\t\t\tmax-height: 400px;\r\n\t\t\t\topacity: 1;\r\n\t\t\t}\r\n\t\t}\r\n\t} // END media query\r\n\r\n\t.ppl__card_portrait_thumbnail {\r\n\t\tmargin-top: -$portrait_box/2;\r\n\t\tmargin-bottom: $m-sm;\r\n\t\twidth: $portrait_box;\r\n\t\ttransition: $item_duration all ease-in-out;\r\n\t}\r\n}\r\n\r\n\r\n\r\n\r\n\r\n// Columns\r\n// --------------------------------------------------------\r\n.ppl_listing {\r\n\t&[data-ppl-columns=\"1\"] {\r\n\t\t.ppl__listing-item {\r\n\t\t\twidth: 100%;\r\n\t\t\tmargin-left: 0;\r\n\t\t\tmargin-right: 0;\r\n\t\t}\r\n\t}\r\n\t&[data-ppl-columns=\"2\"] {\r\n\t\t.ppl__listing-item {\r\n\t\t\twidth: calc(50% - #{$listing_gutter});\r\n\r\n\t\t\t// &:nth-of-type(2n-1) {\r\n\t\t\t// \ttransform-origin: left center;\r\n\t\t\t// }\r\n\t\t\t// &:nth-of-type(2n) {\r\n\t\t\t// \ttransform-origin: right center;\r\n\t\t\t// }\r\n\t\t}\r\n\t}\r\n\t&[data-ppl-columns=\"3\"] {\r\n\t\t.ppl__listing-item {\r\n\t\t\twidth: calc(33.333% - #{$listing_gutter});\r\n\r\n\t\t\t// &:nth-of-type(3n-2) {\r\n\t\t\t// \ttransform-origin: left center;\r\n\t\t\t// }\r\n\t\t\t// &:nth-of-type(3n) {\r\n\t\t\t// \ttransform-origin: right center;\r\n\t\t\t// }\r\n\t\t}\r\n\t}\r\n\t&[data-ppl-columns=\"4\"] {\r\n\t\t.ppl__listing-item {\r\n\t\t\twidth: calc(25% - #{$listing_gutter});\r\n\r\n\t\t\t// &:nth-of-type(4n-3) {\r\n\t\t\t// \ttransform-origin: left center;\r\n\t\t\t// }\r\n\t\t\t// &:nth-of-type(4n) {\r\n\t\t\t// \ttransform-origin: right center;\r\n\t\t\t// }\r\n\t\t}\r\n\t}\r\n\r\n\t// Mobile\r\n\t@include media-breakpoint-down(xs) {\r\n\t\t&[data-ppl-columns] .ppl__listing-item {\r\n\t\t\twidth: 100%;\r\n\t\t\tmargin-left: 0;\r\n\t\t\tmargin-right: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t// Tablet Portrait\r\n\t@include media-breakpoint-only(sm) {\r\n\t\t&[data-ppl-columns=\"3\"] .ppl__listing-item,\r\n\t\t&[data-ppl-columns=\"4\"] .ppl__listing-item {\r\n\t\t\twidth: calc(50% - #{$listing_gutter});\r\n\t\t}\r\n\t}\r\n\r\n\t// Tablet Landscape\r\n\t@include media-breakpoint-only(md) {\r\n\t\t&[data-ppl-columns=\"4\"] .ppl__listing-item {\r\n\t\t\twidth: calc(50% - #{$listing_gutter});\r\n\t\t}\r\n\t}\r\n}\r\n","// Shared styles for listing and single person views\r\n// ================================================================================\r\n\r\n// Person Header\r\n.ppl__card_header {\r\n\tbackground-color: $cover_photo_bg_color;\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-size: cover;\r\n\tmin-height: $cover_photo_height;\r\n\tbox-shadow: inset 0px -40px 100px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.ppl__card_portrait_wrapper {\r\n\tmargin: 0;\r\n}\r\n\r\n\t.ppl__card_portrait_thumbnail {\r\n\t\tmax-width: 100%;\r\n\t\tdisplay: block;\r\n\t\tmargin: 0 auto;\r\n\t\tborder: solid 1px $white;\r\n\r\n\t}\r\n\r\n.ppl__card_details {\r\n\tpadding: $m-xs;\r\n}\r\n\t.ppl__card_particulars {\r\n\t\tline-height: 1;\r\n\t\tmargin-bottom: $m-xs;\r\n\t\ttext-align: center;\r\n\t}\r\n\t\t.ppl__card_name {\r\n\t\t\tfont-size: $h2;\r\n\t\t\tmargin-bottom: $m-xs;\r\n\t\t\tline-height: 1;\r\n\t\t}\r\n\r\n\t.ppl__card_location {\r\n\t\tfont-weight: bold;\r\n\t\ttext-transform: uppercase;\r\n\t}\r\n\r\n\t.ppl__card_skills_wrapper {\r\n\r\n\t}\r\n\t\t.ppl__card_skills {\r\n\t\t\tdisplay: inline-block;\r\n\t\t}","\r\n// Theme options\r\n// ---------------------------------------\r\n.ppl-round-corners {\r\n\t.ppl__listing-item {\r\n\t\tborder-radius: $border_radius;\r\n\t}\r\n}\r\n\r\n.ppl-rounded-portraits {\r\n\t.ppl__card_portrait_thumbnail {\r\n\t\tborder-radius: $portrait_radius;\r\n\t}\t\r\n}\r\n.ppl-circle-portraits {\r\n\t.ppl__card_portrait_thumbnail {\r\n\t\tborder-radius: 50%;\r\n\t}\t\r\n}\r\n\r\n.ppl-shadows {\r\n\t.ppl__card_portrait_thumbnail {\r\n\t\tbox-shadow: 0 0 10px 0px rgba($black, .5); \r\n\t}\r\n}","// Animation\r\n// ----------------------------------------------------------------------------\r\n$transition : cubic-bezier(0.445, 0.050, 0.550, 0.950);\r\n\r\n// Colors\r\n// ----------------------------------------------------------------------------\r\n$white:    #fff;\r\n$gray-100: #f8f9fa;\r\n$gray-200: #e9ecef;\r\n$gray-300: #dee2e6;\r\n$gray-400: #ced4da;\r\n$gray-500: #adb5bd;\r\n$gray-600: #6c757d;\r\n$gray-700: #495057;\r\n$gray-800: #343a40;\r\n$gray-900: #212529;\r\n$black:    #000;\r\n\r\n$blue: \t\t#bad5e8;\r\n$cyan:      #17a2b8;\r\n$green: \t#378d5f;\r\n$indigo:    #6610f2 ;\r\n$magenta: \t#a20e32;\r\n$navy: \t\t#005280;\r\n$orange : \t#e9631b;\r\n$peach: \t#f46d71;\r\n$pink:      #e83e8c;\r\n$purple: \t#474052;\r\n$red : \t\t#eb1c23;\r\n$teal: \t\t#4eaebe;\r\n$yellow : \t#fedf9c;\r\n\r\n$dark-red: \t\tdarken($red, 10%);\r\n$dark-orange : \tdarken($orange, 10%);\r\n$dark-teal : \tdarken($teal, 10%);\r\n$dark-yellow : \tdarken($yellow, 10%);\r\n$dark-green: \tdarken($green, 10%);\r\n$dark-magenta: \tdarken($magenta, 10%);\r\n$dark-purple: \tdarken($purple, 10%);\r\n$dark-peach: \tdarken($peach, 10%);\r\n$dark-blue: \tdarken($blue, 10%);\r\n$dark-teal: \tdarken($teal, 10%);\r\n\r\n$light-red: \t\tlighten($red, 10%);\r\n$light-orange : \tlighten($orange, 10%);\r\n$light-teal : \t    lighten($teal, 10%);\r\n$light-yellow : \tlighten($yellow, 10%);\r\n$light-green: \t    lighten($green, 10%);\r\n$light-magenta: \tlighten($magenta, 10%);\r\n$light-purple: \t    lighten($purple, 10%);\r\n$light-peach: \t    lighten($peach, 10%);\r\n$light-blue: \t    lighten($blue, 10%);\r\n$light-teal: \t    lighten($teal, 10%);\r\n\r\n$primary:           $navy;\r\n$primary-alt:       $dark-blue;\r\n\r\n$secondary:         $orange;\r\n$secondary-alt: \t$dark-orange;\r\n\r\n$success:         $green;\r\n$info:            $teal;\r\n$warning:         $yellow;\r\n$danger:          $red;\r\n\r\n$light:         $gray-200;\r\n$dark:          $gray-800;\r\n\r\n\r\n// Spacers\r\n// ----------------------------------------------------------------------------\r\n$spacer: 1em;\r\n$spacers: ();\r\n$spacers: map-merge((\r\n  0: 0,\r\n  1: ($spacer * .25),\r\n  2: ($spacer * .5),\r\n  3: $spacer,\r\n  4: ($spacer * 1.5),\r\n  5: ($spacer * 3)\r\n), $spacers);\r\n\r\n$m-0  : map-get($spacers, 1);\r\n$m-xs  : map-get($spacers, 2);\r\n$m-sm :  map-get($spacers, 3);\r\n$m-md  : map-get($spacers, 4);\r\n$m-lg  : map-get($spacers, 5);\r\n\r\n\r\n// Font Sizes\r\n// ----------------------------------------------------------------------------\r\n$font-base : 1em;\r\n$h1 : 2em;\r\n$h2 : 1.5em;\r\n$h3 : 1.2em;\r\n$h4 : 1em;\r\n\r\n// People Listing\r\n// ----------------------------------------------------------------------------\r\n$listing_gutter: $m-sm;\r\n$cover_photo_height: 100px;\r\n$cover_photo_bg_color: $light;\r\n\r\n$border_radius: 5px;\r\n\r\n$portrait_radius: 20px;\r\n$portrait_border: 2px;\r\n$portrait_box: $cover_photo_height*1.3;\r\n\r\n\r\n\r\n// Grid breakpoints\r\n// ----------------------------------------------------------------------------\r\n$grid-breakpoints: (\r\n  // xs: 0,\r\n  // sm: 576px,\r\n  // md: 768px,\r\n  // lg: 992px,\r\n  // xl: 1200px\r\n  xs: 0,\r\n  sm: 768px,\r\n  md: 1024px,\r\n  lg: 1200px,\r\n  xl: 1200px\r\n);\r\n\r\n"]}