OwlCyberSecurity - MANAGER

Edit File: _related-projects.scss

/*----------------------------------------*\
*   $RELATED PROJECTS
\*----------------------------------------*/

/**
 *
 <section class="related-projects_container">
    <header class="related-projects_header">
       <h4 class="related-projects_title">Related projects</h4>
       <nav class="related-projects_nav">
           <ul class="related-projects_nav-list">
               <li class="related-projects_nav-item"><a href="#" class="related-projects_nav-link"><i class="icon-arrow-left"></i>Previous</a></li>
               <li class="related-projects_nav-item"><a href="#" class="related-projects_nav-link">All projects</a></li>
               <li class="related-projects_nav-item"><a href="#" class="related-projects_nav-link">Next<i class="icon-arrow-right"></i></a></li>
           </ul>
       </nav>
    </header>
    <div class="related-projects_items-list-container">
        <ul class="related-projects_items-list"><li class="related-projects_item">
              <a href="#" class="image__item-link">
                
                </a>
            </li><!--
            ...
        </ul>
    </div>
 </section>
 */

// yarpp spits an image... why????
.yarpp-related > img {
    display: none;
}

.related-projects_container{
    border-top: 2px solid #ededef;
    @include rem(margin-top, $base-spacing-unit);
    @include rem(margin-bottom, $base-spacing-unit);
    // display: none;
}

.related-projects_header{
        @extend .cf;
    }

/**
         * Title is 50% and goes left
         */

.related-projects_title{
            @include media(from hand) {
                float: left;
            }
            @extend .span-12;
            @extend .hand-span-6;

@include rem(margin, $half-spacing-unit 0);
            color: black;
        }

/**
         * Project navigation is 50% and goes right
         */
        .projects_nav{
            @extend .span-12;
            @extend .hand-span-6;
            @include rem(margin, $half-spacing-unit 0);

@include media(from hand) {
                float: right;
                text-align: right;
            }
        }

.projects_nav-list{
                @extend .nav;
                margin-bottom: 0;
            }

.projects_nav-item a{
                    @include rem(padding, 0 $half-spacing-unit);
                    font-family: $alt-font-family;
                    @include font-size(13px);
                    font-weight: 500;
                    color: $gray;
                    text-decoration: none;

.prev {
                        margin-right:3px;
                    }
                    
                    .next {
                        margin-left:3px;
                    }

&:hover {
                        color:$dark;
                    }
                }

.related-projects_items-list{
        @extend .row;
        list-style: none;
        @include rem(margin-bottom, -1 *$base-spacing-unit);
    }

.related-projects_item{
            @extend .col-12;
            @extend .small-span-6;
            @extend .lap-span-4;
            @include rem(margin-bottom, $base-spacing-unit);

.image_item-table{
                @include opacity(1);
            }

/**
             * Smaller Title for smaller space container (on smaller screens :)
             */
             @include media(to lap) {
                .image_item-title {
                    @include rem(font-size, 22px);
                }
            }

/**
             * Not enough space for project categories,
             * hiding the folder icon
             */
            .image_item-cat-icon{
                display: none !important;
            }

/**
             * Again, not enough space, everythins is
             * too crowded => no side padding
             */
            .image_item-cell{
                @include rem(padding, 10px);
            }

/**
             * When there is more than 1 category,
             * the other ones jump on a second line.
             * Vertically aligning bottom is for the like box.
             */
            .image_item-meta .grid__item{
                vertical-align: bottom;
            }

// /**
            //  * This is for obtaining a differrent image ratio
            //  * from the one in the grid.
            //  */
            // .image__item-wrapper{
            //     padding-top: 62.25%;
            // }
        }