<commit_before>/**
    SmartNavBar component.

    A navigation bar following
    the design lines of iOS-7 adapted for 
    Loconomics App Styleguide.

    Three areas: two buttons on both sides with optional labels
    and a centered title.
    
    Supports to have an overlapping notification for casual use, so the
    full navbar area is used to display a short, timeout based, message.
    The element SmartNavBar-notification can be included all the time and will
    be hidden with display:none and the styles to make it fit the exact Navbar space,
    use javascript to toggle visibility.

    Based on code from the project: https://github.com/c2prods/Project-Tyson
**/

@import 'nib';

$SmartNavBar-borderSize = 1px
$SmartNavBar-height = $app-navbar-height;
$SmartNavBar-lateralGap = $container-padding-left; //9px;
$SmartNavBar-headerFontSize = 18px;
$SmartNavBar-buttonFontSize = 15px;
$SmartNavBar-buttonHeaderFontSize = 15px;
$SmartNavBar-buttonMaxWidth = none; // 140px;
$SmartNavBar-bgColor = White; //rgba(248, 248, 248, 0.9);
$SmartNavBar-borderColor = $gray-light; //rgb(200, 199, 204);
$SmartNavBar-buttonColor = $gray; // rgb(21, 125, 251);
$SmartNavBar-headerColor = $brand-primary; //Black;
$SmartNavBar-disabledButtonColor = $text-muted; //rgb(200, 199, 204);

.SmartNavBar {
    // IMPORTANT: A 'fixed' positioning will work perfect on Desktop, and even modern Android/Chrome (5.0+, maybe 4.4)
    // but will break on iOS (almost up to 8.3, maybe future versions too) and old Android with strange effects, not
    // fixed all the time (with keyboard open, on iOS gets moved out of screen).
    // SO: using 'absolute', to ensure its permanently fixed on top, put the scrolling context on the content
    // using the SmartNavView and SmartNavContent included in this file
    position: absolute; // fixed only good on Desktop, Android-5+
    top: 0;
    height: $SmartNavBar-height;
    line-height: $SmartNavBar-height;
    width: 100%;
    padding-top: 0;
    background-color: $SmartNavBar-bgColor;
    
    /* Problematic, for now, before confirm any problemm, go with simple border
    // Creating the bottom-border with a gradient to avoid
    // problem with Retina screens doubling the 1px border.
    background-image: linear-gradient(0deg, $SmartNavBar-borderColor, $SmartNavBar-borderColor 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    */
    border-bottom: 1px solid $SmartNavBar-borderColor;
    
    z-index: 500; // Higher even than menus
    user-select: none;
    -webkit-touch-callout: none;

    /**
        Scheme: a bar contains 2 edges (SmartNavBar-edge, .left and -right)
        and a title (h1).
        At the edges there are buttons (.SmartNavBar-btn).
        An edge can contain only buttons or be the button itself at the same time.
        Buttons can contain other elements or just text, but ensure are in-line.
        A button can contain a title text inside a H1 element, used to replace
        the title on the middle of the bar for some uses (like arrows).
    **/

    commonEdgeBtn() {
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        box-sizing: border-box;
        height: $SmartNavBar-height;
        line-height: $SmartNavBar-height;
        text-overflow: ellipsis !important; /* why so !important ? */
        white-space: nowrap;

        max-width: $SmartNavBar-buttonMaxWidth;
    }
    
    .SmartNavBar-edge {
        commonEdgeBtn();
        
        position: absolute;
        top: 0;
        z-index: 100;
    
        &.left {
            left: 0;

            &.SmartNavBar-btn,
            .SmartNavBar-btn {
                // Padding on both sides, not just the left,
                // so the button is easier to press and there is
                // a gap with the header/title in case is too big
                padding: 0 $SmartNavBar-lateralGap;
            }
        }
    
        &.right {
            right: 0;
        
            &.SmartNavBar-btn,
            .SmartNavBar-btn {
                text-align: right;
                // Padding on both sides, not just the right,
                // so the button is easier to press and there is
                // a gap with the header/title in case is too big
                padding: 0 $SmartNavBar-lateralGap;
            }
        }
    }

    .SmartNavBar-btn {
        commonEdgeBtn();

        /* Fix for Chrome and Firefox OS on button element */
        background: transparent;

        &:focus {
            outline: 0;
        }
        
        color: $SmartNavBar-buttonColor;
        font-weight: 400;
        font-size: $SmartNavBar-buttonFontSize;

        /* Makes problems on Android (persistent :active state
            after being pushed)
        &:active {
            opacity: 0.3;
        }*/

        &.bold {
            font-weight: 500;
        }

        &.disabled,
        [disabled] {
            color: $SmartNavBar-disabledButtonColor;
        }
        
        &:hover,
        &:active {
            text-decoration: none;
        }
        
        // the button can contain a title, used normally when
        // the button label content replace the centered title
        // so the style must show different on that cases
        h1 {
            color: $SmartNavBar-headerColor;
            font-size: $SmartNavBar-buttonHeaderFontSize;
            display: inline;
            // Headers here are expected to go along
            // an icon, so give some space to avoid collision
            margin: 0 .6em;
            vertical-align: middle;
        }
        
        // IMPORTANT: to fix missalignments, specially when icons needs a different
        // base size, with the h1 alignment and icons alignment:
        > span {
            vertical-align: middle;
        }
    }
        
    h1 {
        color: $SmartNavBar-headerColor;
        display: block;
        padding: 0;
        font-size: $SmartNavBar-headerFontSize;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        overflow: hidden;
        box-flex: 1;
        margin: 0 65px;
        font-weight: 700; // 500;
        line-height: $SmartNavBar-height;
    }
    
    // Support for Bootstrap menu button
    .navbar-toggle .icon-bar {
        background-color: $SmartNavBar-buttonColor;
    }
    
    // Icons well aligned (use of generic i, .icon, and Bootstrap, FontAwesone and Ion icons)
    i,
    .icon,
    .glyphicon,
    .fa,
    .ion {
        vertical-align: middle;
    }
    
    .SmartNavBar-notification {
        // Initially hidden, toggle with javascript
        display: none;
        
        // Fits the navbar space
        position: absolute;
        z-index: 110;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        text-align: center;
    }
}

// Container no-scrollable of SmartNavContent (and SmartNavBar --NOT NOW, STILL USING GLOBAL NAVBAR)
// NOTE: Views can have more elements as children, MUST go to the end after Bar and Content, and this two in 
// this strict order. The additional children usually are view overlays like local modals, ActionSheets, any
// element expected to be content -usually all the time visible and not overlapping the navbar- must go
// inside SmartNavContent.
// IMPORTANT: Currently, because of global navbar and 'Activity' class set-up, the activities elements CANNOT
// have the SmartNavView class, another element inside the activity with this class must be added.
.SmartNavView {
    
    // IMPORTANT: If some day transitions/animations are added, the SmartNavBar must be local and 
    // positioning of the View must be changed to 'fixed' since is the only way to create transition on iOS
    // (absolute too increase the scroll area and make it keep visible all the time or just flicker)
    // This 'fixed' element is not a problem on iOS since it's contanier and itself are not allowed to have
    // scroll, but the scroll goes to the 'content' element included (on uses with scroll, fixed has problems on iOS).
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 210;
    overflow: hidden;

    // IMPORTANT: temporary fix for use at desktop sizes, where the view goes inside a Bootstrap column
    @media $mediaMinSm {
        position: relative !important;
        //height: 1100px;
        overflow: visible;
        
        .SmartNavContent {
            position: relative !important;
            overflow: visible;
        }
        
        .ActionSheet[hidden] {
            display: none !important;
        }
    }  
    
    // On implementation of transitions/animations, a background must exists to avoid ugly overlays
    // now kept the inherit
    //background: white;
    
    // media-app-navbar and big
    /*top: $app-navbar-height;
    @media $media-big-navbar {
        top: $big-navbar-height;
    }*/
    .SmartNavContent {
        // Absolute rather than fixed to avoid problems on mobile.
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        // Scroll
        overflow: auto !important;
        // iOS smooth scrolling
        -webkit-overflow-scrolling: touch;
        // Android needs z-index to have scroll without problems
        z-index: 1;
    }
    
    // Gap when SmartNavBar is included inside the view (local rather than global).
    // To work, both elements must be consecutive siblings
    .SmartNavBar + .SmartNavContent {
        top: $app-navbar-height;
    }
}
<commit_msg>Changed h1 tags to h2<commit_after>/**
    SmartNavBar component.

    A navigation bar following
    the design lines of iOS-7 adapted for 
    Loconomics App Styleguide.

    Three areas: two buttons on both sides with optional labels
    and a centered title.
    
    Supports to have an overlapping notification for casual use, so the
    full navbar area is used to display a short, timeout based, message.
    The element SmartNavBar-notification can be included all the time and will
    be hidden with display:none and the styles to make it fit the exact Navbar space,
    use javascript to toggle visibility.

    Based on code from the project: https://github.com/c2prods/Project-Tyson
**/

@import 'nib';

$SmartNavBar-borderSize = 1px
$SmartNavBar-height = $app-navbar-height;
$SmartNavBar-lateralGap = $container-padding-left; //9px;
$SmartNavBar-headerFontSize = 18px;
$SmartNavBar-buttonFontSize = 15px;
$SmartNavBar-buttonHeaderFontSize = 15px;
$SmartNavBar-buttonMaxWidth = none; // 140px;
$SmartNavBar-bgColor = White; //rgba(248, 248, 248, 0.9);
$SmartNavBar-borderColor = $gray-light; //rgb(200, 199, 204);
$SmartNavBar-buttonColor = $gray; // rgb(21, 125, 251);
$SmartNavBar-headerColor = $brand-primary; //Black;
$SmartNavBar-disabledButtonColor = $text-muted; //rgb(200, 199, 204);

.SmartNavBar {
    // IMPORTANT: A 'fixed' positioning will work perfect on Desktop, and even modern Android/Chrome (5.0+, maybe 4.4)
    // but will break on iOS (almost up to 8.3, maybe future versions too) and old Android with strange effects, not
    // fixed all the time (with keyboard open, on iOS gets moved out of screen).
    // SO: using 'absolute', to ensure its permanently fixed on top, put the scrolling context on the content
    // using the SmartNavView and SmartNavContent included in this file
    position: absolute; // fixed only good on Desktop, Android-5+
    top: 0;
    height: $SmartNavBar-height;
    line-height: $SmartNavBar-height;
    width: 100%;
    padding-top: 0;
    background-color: $SmartNavBar-bgColor;
    
    /* Problematic, for now, before confirm any problemm, go with simple border
    // Creating the bottom-border with a gradient to avoid
    // problem with Retina screens doubling the 1px border.
    background-image: linear-gradient(0deg, $SmartNavBar-borderColor, $SmartNavBar-borderColor 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    */
    border-bottom: 1px solid $SmartNavBar-borderColor;
    
    z-index: 500; // Higher even than menus
    user-select: none;
    -webkit-touch-callout: none;

    /**
        Scheme: a bar contains 2 edges (SmartNavBar-edge, .left and -right)
        and a title (h1).
        At the edges there are buttons (.SmartNavBar-btn).
        An edge can contain only buttons or be the button itself at the same time.
        Buttons can contain other elements or just text, but ensure are in-line.
        A button can contain a title text inside a H1 element, used to replace
        the title on the middle of the bar for some uses (like arrows).
    **/

    commonEdgeBtn() {
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        box-sizing: border-box;
        height: $SmartNavBar-height;
        line-height: $SmartNavBar-height;
        text-overflow: ellipsis !important; /* why so !important ? */
        white-space: nowrap;

        max-width: $SmartNavBar-buttonMaxWidth;
    }
    
    .SmartNavBar-edge {
        commonEdgeBtn();
        
        position: absolute;
        top: 0;
        z-index: 100;
    
        &.left {
            left: 0;

            &.SmartNavBar-btn,
            .SmartNavBar-btn {
                // Padding on both sides, not just the left,
                // so the button is easier to press and there is
                // a gap with the header/title in case is too big
                padding: 0 $SmartNavBar-lateralGap;
            }
        }
    
        &.right {
            right: 0;
        
            &.SmartNavBar-btn,
            .SmartNavBar-btn {
                text-align: right;
                // Padding on both sides, not just the right,
                // so the button is easier to press and there is
                // a gap with the header/title in case is too big
                padding: 0 $SmartNavBar-lateralGap;
            }
        }
    }

    .SmartNavBar-btn {
        commonEdgeBtn();

        /* Fix for Chrome and Firefox OS on button element */
        background: transparent;

        &:focus {
            outline: 0;
        }
        
        color: $SmartNavBar-buttonColor;
        font-weight: 400;
        font-size: $SmartNavBar-buttonFontSize;

        /* Makes problems on Android (persistent :active state
            after being pushed)
        &:active {
            opacity: 0.3;
        }*/

        &.bold {
            font-weight: 500;
        }

        &.disabled,
        [disabled] {
            color: $SmartNavBar-disabledButtonColor;
        }
        
        &:hover,
        &:active {
            text-decoration: none;
        }
        
        // the button can contain a title, used normally when
        // the button label content replace the centered title
        // so the style must show different on that cases
        h2 {
            color: $SmartNavBar-headerColor;
            font-size: $SmartNavBar-buttonHeaderFontSize;
            display: inline;
            // Headers here are expected to go along
            // an icon, so give some space to avoid collision
            margin: 0 .6em;
            vertical-align: middle;
        }
        
        // IMPORTANT: to fix missalignments, specially when icons needs a different
        // base size, with the h1 alignment and icons alignment:
        > span {
            vertical-align: middle;
        }
    }
        
    h2 {
        color: $SmartNavBar-headerColor;
        display: block;
        padding: 0;
        font-size: $SmartNavBar-headerFontSize;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        overflow: hidden;
        box-flex: 1;
        margin: 0 65px;
        font-weight: 700; // 500;
        line-height: $SmartNavBar-height;
    }
    * > .navbar-brand {
        background-position: center;
        display: block;
    }
    
    // Support for Bootstrap menu button
    .navbar-toggle .icon-bar {
        background-color: $SmartNavBar-buttonColor;
    }
    
    // Icons well aligned (use of generic i, .icon, and Bootstrap, FontAwesone and Ion icons)
    i,
    .icon,
    .glyphicon,
    .fa,
    .ion {
        vertical-align: middle;
    }
    
    .SmartNavBar-notification {
        // Initially hidden, toggle with javascript
        display: none;
        
        // Fits the navbar space
        position: absolute;
        z-index: 110;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        text-align: center;
    }
}

// Container no-scrollable of SmartNavContent (and SmartNavBar --NOT NOW, STILL USING GLOBAL NAVBAR)
// NOTE: Views can have more elements as children, MUST go to the end after Bar and Content, and this two in 
// this strict order. The additional children usually are view overlays like local modals, ActionSheets, any
// element expected to be content -usually all the time visible and not overlapping the navbar- must go
// inside SmartNavContent.
// IMPORTANT: Currently, because of global navbar and 'Activity' class set-up, the activities elements CANNOT
// have the SmartNavView class, another element inside the activity with this class must be added.
.SmartNavView {
    
    // IMPORTANT: If some day transitions/animations are added, the SmartNavBar must be local and 
    // positioning of the View must be changed to 'fixed' since is the only way to create transition on iOS
    // (absolute too increase the scroll area and make it keep visible all the time or just flicker)
    // This 'fixed' element is not a problem on iOS since it's contanier and itself are not allowed to have
    // scroll, but the scroll goes to the 'content' element included (on uses with scroll, fixed has problems on iOS).
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 210;
    overflow: hidden;

    // IMPORTANT: temporary fix for use at desktop sizes, where the view goes inside a Bootstrap column
    @media $mediaMinSm {
        position: relative !important;
        //height: 1100px;
        overflow: visible;
        
        .SmartNavContent {
            position: relative !important;
            overflow: visible;
        }
        
        .ActionSheet[hidden] {
            display: none !important;
        }
    }  
    
    // On implementation of transitions/animations, a background must exists to avoid ugly overlays
    // now kept the inherit
    //background: white;
    
    // media-app-navbar and big
    /*top: $app-navbar-height;
    @media $media-big-navbar {
        top: $big-navbar-height;
    }*/
    .SmartNavContent {
        // Absolute rather than fixed to avoid problems on mobile.
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        // Scroll
        overflow: auto !important;
        // iOS smooth scrolling
        -webkit-overflow-scrolling: touch;
        // Android needs z-index to have scroll without problems
        z-index: 1;
    }
    
    // Gap when SmartNavBar is included inside the view (local rather than global).
    // To work, both elements must be consecutive siblings
    .SmartNavBar + .SmartNavContent {
        top: $app-navbar-height;
    }
}

{'fraction_non_alphanumeric': 0.08552126516198373, 'fraction_numerical': 0.014330313731511337, 'mean_word_length': 2.0177606177606178, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 6, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1202986', 'n_tokens_mistral': 5814, 'n_tokens_neox': 5236, 'n_words': 2015}