allusis

mixin input(id,name,required)
  if required == true
    # required input & label
  else
    # non-required input & label

allusis

mixin input(id,name,required)
  if required == true
    label(for= id)= name 
      small  (Required)
    input(id= id, required)&attributes(attributes)
  else
    label(for= id)= name
    input(id= id, required)&attributes(attributes)

allusis

// Text Color
--colorTextDefault: #{$text-color};
// Detail Text Color
--colorTextActionLabel: #{$gray-md};
--colorTextLabel: #{$text-color};
--colorTextPlaceholder: #{$gray};
--colorTextWeak: #{$gray-md};
// Action Color
--colorBackgroundButtonBrand: #{$brand-primary};
--colorBorderBrand: #{$brand-primary};

allusis

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
  <div id="search" class="search" aura:id="search">
    <form id="search-form" role="search">
      <label for="search-query">Search:</label>
      <input type="text" id="search-query" aura:id="search-query" name="s" value="" />
      <button id="search-submit" type="submit">Search</button>
    </form>
  </div>
  <button class="mobile-button" tabindex="-1" id="search-button" aura:id="search-button" onclick="{!c.searchMenuToggle}">Search</button>
</aura:component>

allusis

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
  <aura:attribute name="wrapperClass" type="String" default="page-controls" />
  <aura:attribute name="buttonTitle" type="String" default="Go Back" />
  <div class="{!c.wrapperClass}">
    <button class="btn-hed btn-back" onclick="{!c.redirect}">{!c.buttonTitle}</button>
  </div>
</aura:component>

allusis

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

allusis

:root {
  --color-text: #444;
  --color-background: white;
  --color-link: #1589ee;
  --color-link-active: #0b5392;
  --font-family-body: "Helvetica", sans-serif;
  --font-family-head: "Helvetica", sans-serif;
  --font-weight-body: 400;
  --font-weight-head: 400;
  --font-size-body: 14px;

allusis

@media screen and (min-width: 72em) {
  #main-room {padding: 58px 0 56px 0;}
  #main_player,#main-room .right_section,#main_player .player_header span,#browser .browser-content,#main_player .play-song-link-container .play-song-link, #main_player .play-song-link-container .play-song-link-browser {border-radius:0}
  #main-room .left_section {padding-left:32px;}
  #main_player {padding: 0;background: transparent;}
  #player-controller,#header-global,#player-controller .right, #player-controller .left {background:black}
  #player-controller .left ul li.infoContainer .infoContainerInner .progressBg,#main_player .player_sharing .player-controller-container .volume-controller-container #volume-div .ui-slider-range-min{background:#31b0d5}
  #player-controller .right ul li .dubup.voted {background:#3fad46}
  #player-controller .right ul li .dubup.voted span {color:white;}
  .dubx-chat-system.dubx-chat-system-updub {

allusis

<c:sprite />

<!-- xmlns is needed at the top-most page element -->
<div xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg class="icon stroke">
    <use xlink:href="#home"></use>
  </svg>
</div>

allusis

- var PrimaryNavItems = [{'url':'home','title':'Home','img':'nav','key':'home'},{'url':'inputs','title':'Inputs','img':'nav','key':'inputs'},{'url':'buttons','title':'Buttons','img':'nav','key':'buttons'},{'url':'cards','title':'Cards','img':'nav','key':'cards'},{'url':'icons','title':'Icons','img':'nav','key':'icons'},{'url':'collapse','title':'Collapse','img':'nav','key':'collapse'}];
  
each page,i in PrimaryNavItems
  if currentPage === page.url
    a(class="active", href= page.url + '.html')
      svg(class='nav-icon', aria-hidden="true")
        use(xlink:href= 'img/sprites/nav.svg#' + page.key, xmlns:xlink="http://www.w3.org/1999/xlink")
      span.title= page.title
  else
    a(href= page.url + '.html')