light-minimalism.scss

@import 'normalize.scss';
@import 'elevation.scss';

// containers should be ahead of components
@import 'containers/list.scss';
@import 'containers/tag.scss';
@import 'containers/table.scss';
@import 'containers/reveal.scss';
@import 'containers/mark.scss';

@import 'components/button.scss';
@import 'components/checkbox.scss';
@import 'components/radio.scss';
@import 'components/switch.scss';
@import 'components/svg.scss';
@import 'components/nav.scss';
@import 'components/inputbar.scss';
@import 'components/textarea.scss';
@import 'components/card.scss';
@import 'components/select.scss';
@import 'components/collapse.scss';
@import 'components/dialog.scss';
@import 'components/toast.scss';
@import 'components/rating.scss';

@import 'views/hmf.scss';

:root {
    font-size: 17px;
}


body, body * { 
  box-sizing: border-box; 
  font-size: inherit;
  //font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  //border: red 1px solid;

  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: transparent; /* prevent tap highlight color / shadow */
  //-webkit-user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

}

body {
    //font-family: 'Rubik', sans-serif;
    font-family: 'Montserrat', 'Rubik', sans-serif;
    background-color: #fafafa;
}

// Used by LM.modify
.modify--show {
    opacity: 1;
    transform: scale(1) !important;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}
.modify--hide {
    opacity: 0 !important;
    transform: scale(1.2) !important;
    transition: transform 0s cubic-bezier(0.23, 1, 0.32, 1) 0.1s, opacity 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}


//desktop
.landscape-only { @media (max-width: $break-width) { display: none !important; }}

//mobile
.portrait-only { @media (min-width: $break-width) { display: none !important;} }
.portrait-sticky { @media (max-width: $break-width) { position: sticky; } }
.portrait-fixed { @media (max-width: $break-width) { position: fixed; } }

// Responsive align
.responsive-max-width { 
    max-width: var(--max-width--landscape);
    @media (max-width: $break-width) { max-width: var(--max-width--portrait); } 
}
.responsive-padding { 
    padding: var(--padding--landscape);
    @media (max-width: $break-width) { padding: var(--padding--portrait); } 
}
.responsive-margin { 
    margin: var(--margin--landscape);
    @media (max-width: $break-width) { margin: var(--margin--portrait); }
}
.responsive-width { 
    width: var(--width--landscape);
    @media (max-width: $break-width) { width: var(--width--portrait); }
}
.responsive-background { 
    background: var(--background--landscape);
    @media (max-width: $break-width) { background: var(--background--portrait); } 
}
.responsive-border { 
    border: var(--border--landscape);
    @media (max-width: $break-width) { border: var(--border--portrait); }
}
// Usually we only need this
.responsive-border-width { 
    border-width: var(--border-width--landscape);
    @media (max-width: $break-width) { border-width: var(--border-width--portrait); }
}
.responsive-border-radius { 
    border-radius: var(--border-radius--landscape);
    @media (max-width: $break-width) { border-radius: var(--border-radius--portrait); }
}

.no-scrollbar {
    @include no-scrollbar;
}
// Legacy
.noscrollbar--outer {
/*
usage:
<div class="noscrollbar--outer" style="width: 100px; height: 100px;">
  <div class="noscrollbar--inner">
    <div class="noscrollbar--content" style="width: 100px: height: 100px;">
    ...
    </div>
  </div>
</div>

*/
    //user should specify height and width
    &, > .noscrollbar--inner > .noscrollbar--content {
        width: 200px;
        height: 200px;
    }
    
    //border: 1px solid purple;
    position: relative;
    overflow: hidden;

    > .noscrollbar--inner {

        position: absolute;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll; 

        &::-webkit-scrollbar { display: none; }

    }
}