Pages

Thursday, July 5, 2012

Adding #region to Visual Studio 2012 CSS page



I do like regions, because it seems to add an abstraction to the CSS page by the ability to collapse sections narrowing the viewing area.

This show how to wrap a region around CSS declarations:

Begin wrapping with: /*#region Fieldset Styling */

End with: /*#endregion*/

Below is CSS formatting a form section within a fieldset element:

Each HTML input element has a title label and is wrapped in a HTML div element. The HTML div element has a class attribute value equal to fields.




/*#region Fieldset Styling */

fieldset {

    margin: 8px;

    padding: 12px 0px 20px;

    font-size: 1.1em;

    background-color: #fff;

}

 

    fieldset > div {

        margin-top: 8px;

    }

 

.fields {

}

 

    .fields span {

        display: inline-block;

        text-align: right;

    }

 

        .fields span.RecoverEmail {

            width: 100%;

            text-align: left;

        }

 

        .fields span:not(:first-child) {

            font-size: 0.8em;

        }

 

        .fields span.UniqueStatus {

            display: none;

            text-align: left;

        }

 

            .fields span.UniqueStatus input {

                margin-bottom: -3px;

            }

 

            .fields span.UniqueStatus.show {

                display: inline;

            }

 

    .fields input {

        width: 50%;

        border: medium solid #c0c0c0;

        height: 24px;

        line-height: 28px;

        font-size: 13px;

    }

 

        .fields input:focus {

            border: medium solid #4d90fe;

            outline-style: none;

            outline-color: invert;

        }

 

        .fields input.smaller {

            width: 30%;

        }

 

        .fields input.medium {

            width: 40%;

        }

/*#endregion*/










These are my notes for later use.

1 comment: