css/openam/uma.less

	uma.less revision 89092dc10fe08b037266c0b4efb94b221f6fffb3
/*
 * The contents of this file are subject to the terms of the Common Development and
 * Distribution License (the License). You may not use this file except in compliance with the
 * License.
 *
 * You can obtain a copy of the License at legal/CDDLv1.0.txt. See the License for the
 * specific language governing permission and limitations under the License.
 *
 * When distributing Covered Software, include this CDDL Header Notice in each file and include
 * the License file at legal/CDDLv1.0.txt. If applicable, add the following below the CDDL
 * Header, with the fields enclosed by brackets [] replaced by your own identifying
 * information: "Portions copyright [year] [name of copyright owner]".
 *
 * Copyright 2015 ForgeRock AS.
 */

/* VARIABLES */
@table-base-color: #1f6fb1;
@cell-hover-color: #519387;
@text-base-color: #1f2223;

.webkit-text-rendering-bugfix{
    -webkit-transform: translateZ(0px);
    -webkit-backface-visibility: hidden;
}

.invalid-background(@bgcolor: #ffd4d4){
    background-color:@bgcolor;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(60, 60, 60, 0.1) 35px, rgba(60, 60, 60, 0.1) 70px);
}


span.tooltips {
    position: relative;
    display: inline;

    span {
        position: absolute;
        width: 0;
        color: #fff;
        background-color:#000;
        background-image:-webkit-linear-gradient(top, #555, #000);
        text-align: center;
        visibility: hidden;
        border-radius: 3px;
        font-size: 13px;
        padding: 6px 5px 10px;
        box-shadow: 0px 1px 3px #666;
        bottom: 25px;
        transition:bottom 200ms ease-out, opacity 100ms ease-in;
        opacity:0;

        &:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -8px;
            width: 0; height: 0;
            border-top: 8px solid #000;
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
        }
    }

    &:hover span, &:focus span {
        width: 120px;
        margin-left: -65px;
        visibility: visible;
        opacity: 0.9;
        bottom: 30px;
        left: 50%;
        z-index: 999;
    }
}

span.item-button-panel {

    > span {
        opacity:0.5;
        .transition(opacity, 200ms, linear);

        &.fa-check {
            display:none;
        }

        &:hover, &:focus {
            opacity:1;
            box-shadow: none;
        }
    }
}


.policy-header {
    padding:0 0 30px;
    margin: 0 10px;
    h1 {
        font-weight:normal;
        padding:0 0 10px;
        line-height: 32px;
        span, a{
            font-weight:bold;
            text-decoration:none;
        }
    }

    h2 {
        font-weight: normal;
        line-height: 18px;
        font-style: italic;
        font-size: 12px;

        span {
            font-weight:normal;
            color: #999;
        }
        a {
            font-weight:normal;
            text-decoration:none;
        }
    }
}

.selectize-control.multi .selectize-input {


    &.has-items {
      padding-left: 5px;
      padding-right: 5px;
    }

     > div {
         cursor: pointer;
         margin: 0 2px 2px 0;
         padding: 1px 5px 0;
         background: #A4CAE7;
         color: #095390;
         border: 1px solid #90A7BA;
         border-radius: 2px;

         &:hover, &.active{
             background: #EFB6BE;
             border: 1px solid #DD7785;
             color: #CA3232;
         }
    }
}

.selectize-dropdown-content > div{
    border-top: 1px solid #eee;

    &:first-of-type{
        border-top:none;
    }
}


.backgrid-readonly{

    .selectize-control.multi .selectize-input > div {
        &:hover, &.active{
            background: #A4CAE7;
            color: #095390;
            border: 1px solid #90A7BA;
            cursor: auto;
        }
    }

    .selectize-control.multi .selectize-input, .selectize-control.single .selectize-input{
        background: none;
        border: none;
        box-shadow: none;
    }

}


#lastFSlash, select {
    .transition(opacity, 300ms, linear);
    &.fade{
        opacity:0;
    }
}

/* XUI Overrides */
body, .modal-open {
    /* This will prevent to sudden shift of content which can sometimes occur
    * when navigating between them long views which require a scroll bar and
    * short ones which do not.
    */
    overflow-y: scroll;


    // To remove the empty space at the bottom of the footer which causes the
    // scroll bar to always be present.
    .footer .container {
        padding-bottom: 0;
    }
}


#umaShareImage.header-icon {
    display:block;
    position:relative;
    background-color:transparent;
    .transition(background-color, 200ms, linear);

    // If this img fails to load the class no-image is added to #umaShareImage
    img {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }

    &.no-image{
        background-color:#519387;
        img {
            display:none;
        }
    }
}


#uma {


    input[type="text"]:invalid:required, input[type="text"].invalid {
        .invalid-background;
        .transition(background-color, 200ms, linear);
    }

    #resourceList {
        margin-bottom:30px;
    }


    .backgrid {

        .string-cell, .uri-cell, .email-cell,  .string-cell.editor input[type=text],  .uri-cell.editor input[type=text], .email-cell.editor input[type=text], .datetime-cell {
            text-align: left;
        }

        .template-cell a {
            float:right;
        }

        td.uri-cell{

            // TODO: BOOTSTRAP: Removed due to build issues. Will need re-adding
            .transition(background, 0.1s);
            &:hover{
                background-color: @cell-hover-color;
                border-bottom-color: @cell-hover-color;

                cursor:pointer;
                a {
                    color:#f7f7f7;
                }
            }

        }

        td a:hover{
            text-decoration: none;
        }
        td:not(.uri-cell) a:hover {
            // Adds the click event to the td so that the entire cell is clickable so underline not needed
            text-decoration: underline;
        }


        th {
            text-align: left;
            font-weight: bold;
            font-size: 15px;
            vertical-align: bottom;
            background-color:transparent;

            &.colored {
                a {
                    color: @cell-hover-color;
                }
            }

            a {
                float: left;
                color: @text-base-color;
                font-size: 14px;
            }

            &.sortable a {
                padding-right:8px;
            }

            &.descending a, &.ascending a {
                padding-right:0;
            }
        }

        tbody tr {

            &.empty {
                td {
                    display: table-cell;
                    padding:10px;
                }
            }

            td {
                padding: 8px 8px;
                vertical-align: middle;

                &.fa-share-alt {
                    font-size:14px;
                    text-align:right;

                    &:hover {
                        color: @cell-hover-color;
                        cursor:pointer;
                    }
                }
            }


        }
        .ascending .sort-caret{
            border-bottom: 4px solid @cell-hover-color;
        }
        .ascending a{
            color: @cell-hover-color;
        }

        .descending a{
            color: @cell-hover-color;
        }

        .descending .sort-caret {
            border-top: 4px solid @cell-hover-color;
        }

        tbody tr.unsaved-changes {

            background-color:#fff;
            .transition(background, 0.2s, linear);

            .backgrid-revoke-cell {
                #revoke {
                    display:none;
                }

                #save, #cancel{
                    display:block;
                }
            }
        }

        .backgrid-filter input[type="search"]{
            border-radius: 0;
            padding-right: 25px;
            padding-left: 25px;
        }

        .backgrid-filter .clear{
            right: 0;
            padding-right:0;
            color:#D87482;
        }
    }

    .backgrid-container{
        width: 100%;
        overflow-x: scroll;
        border-bottom: none;
        height: auto;
        overflow: auto;

    }

    .backgrid-filter.form-search {
        margin: 5px 0 5px;
        // TODO: BOOTSTRAP: Removed due to build issues. Will need re-adding
        //.hideSearchCloseBtn;
    }

    .backgrid-revoke-cell {

        width: 64px;

        [class^="fa-"], [class*=" fa-"] {
            font-size: 12px;
            padding: 13px 10px 13px 10px;

            &:hover, &:focus{
                // TODO: BOOTSTRAP: Removed due to build issues. Will need re-adding
                //color: @color-error;
            }
        }

        #save {
            &:hover, &:focus{
                // TODO: BOOTSTRAP: Removed due to build issues. Will need re-adding
                //color: @color-success;
            }
        }

        #save, #cancel {
            display: none;
        }

    }

    #advancedView {
        overflow:hidden;
        max-height:0;
        opacity:0;
        transition: opacity 500ms ease-in-out ;
        border-bottom:none;
    }

    &.advanced-mode{

        #shareCounter, #shareCounterContainer{
            display:none;
        }

        #advancedView{
            max-height:500px;
            opacity:1;
            transition:max-height 500ms ease-out, opacity 500ms ease-in-out ;
        }

    }
}

#dialog-background.show {
    opacity: 0.5;
}