Difference between revisions of "Template:Bilkent-UNAMBG/css"

 
Line 17: Line 17:
  
 
</style>
 
</style>
 +
.mdl-components {
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex
 +
}
 +
 +
.mdl-components-index {
 +
    box-sizing: border-box;
 +
    position: relative;
 +
    padding-top: 64px
 +
}
 +
 +
.mdl-components-index-text {
 +
    max-width: 960px;
 +
    margin: 0
 +
}
 +
 +
.mdl-components-index-text .mdl-components-dl {
 +
    -webkit-justify-content: flex-start;
 +
    -ms-flex-pack: start;
 +
    justify-content: flex-start;
 +
    margin-left: 40px
 +
}
 +
 +
.mdl-components-img {
 +
    position: absolute;
 +
    margin-top: 24px;
 +
    left: 40px;
 +
    height: 90%;
 +
    width: 90%;
 +
    max-height: 600px;
 +
    background: url('../assets/compindex_2x.png') no-repeat top left/contain
 +
}
 +
 +
.mdl-components-text {
 +
    margin: 0;
 +
    padding: 0
 +
}
 +
 +
mdl-components-dl {
 +
    padding: .5em;
 +
    width: 80%
 +
}
 +
 +
mdl-components-dt {
 +
    float: left;
 +
    clear: left;
 +
    width: 150px;
 +
    font-weight: 700
 +
}
 +
 +
mdl-components-dd {
 +
    margin: 0 0 0 150px;
 +
    padding: 0 0 .5em
 +
}
 +
 +
.mdl-components .mdl-components__nav {
 +
    display: inline-block;
 +
    background: #fff;
 +
    width: 200px;
 +
    box-sizing: border-box;
 +
    padding: 24px 0;
 +
    -webkit-flex-shrink: 0;
 +
    -ms-flex-negative: 0;
 +
    flex-shrink: 0;
 +
    z-index: 1
 +
}
 +
 +
.mdl-components .mdl-components__pages {
 +
    display: inline-block;
 +
    -webkit-flex-grow: 1;
 +
    -ms-flex-positive: 1;
 +
    flex-grow: 1;
 +
    padding-bottom: 120px
 +
}
 +
 +
.mdl-components .mdl-components__link {
 +
    margin: 16px;
 +
    font-weight: 400;
 +
    color: rgba(0, 0, 0, .66);
 +
    position: relative;
 +
    padding-left: 72px;
 +
    min-height: 48px;
 +
    display: table;
 +
    line-height: 48px
 +
}
 +
 +
.mdl-components .mdl-components__link.is-active {
 +
    font-weight: 700;
 +
    color: #98040C
 +
}
 +
 +
.content {
 +
    background: #fafafa
 +
}
 +
 +
.mdl-components .mdl-components__page {
 +
    display: none;
 +
    min-height: 1000px
 +
}
 +
 +
.mdl-components .docs-toc, .mdl-components .component-title {
 +
    margin-bottom: 60px;
 +
    margin-left: 32px
 +
}
 +
 +
.mdl-components .component-title {
 +
    margin-top: 30px
 +
}
 +
 +
.mdl-components .component-title h3 {
 +
    font-size: 16px;
 +
    font-weight: 500;
 +
    margin-top: 80px;
 +
    text-transform: uppercase
 +
}
 +
 +
.mdl-components .snippet-code pre.language-markup code {
 +
    padding-left: 40px
 +
}
 +
 +
.mdl-components .mdl-components__page.is-active {
 +
    display: block
 +
}
 +
 +
.mdl-components__link-image {
 +
    display: inline-block;
 +
    margin: 0 10px;
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
    background-color: #ddd;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: auto 48px;
 +
    border-radius: 50%;
 +
    height: 46px;
 +
    width: 46px
 +
}
 +
 +
.mdl-components__warning {
 +
    width: 100%;
 +
    max-width: 640px;
 +
    margin: 0 auto;
 +
    background-color: #FFF9C4;
 +
    padding: 16px;
 +
    border-radius: 2px;
 +
    color: #212121
 +
}
 +
 +
.mdl-components__link.is-active .mdl-components__link-image {
 +
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
 +
}
 +
 +
.docs-readme {
 +
    width: 100%;
 +
    max-width: 640px;
 +
    margin: 0 auto
 +
}
 +
 +
.docs-readme .language-markup {
 +
    width: 100%
 +
}
 +
 +
@media (max-width: 850px) {
 +
    .mdl-components .component-title, .mdl-components .docs-toc {
 +
        margin-left: 0
 +
    }
 +
 +
    .mdl-components .snippet-code pre.language-markup code {
 +
        padding-left: 8px
 +
    }
 +
 +
    .docs-layout-content {
 +
        position: relative;
 +
        height: 100%;
 +
        overflow: hidden !important
 +
    }
 +
 +
    .mdl-components .mdl-components__nav {
 +
        position: fixed;
 +
        top: 64px;
 +
        left: 0;
 +
        display: block;
 +
        -webkit-flex-wrap: nowrap;
 +
        -ms-flex-wrap: nowrap;
 +
        flex-wrap: nowrap;
 +
        width: 100%;
 +
        height: 120px;
 +
        overflow-x: auto;
 +
        overflow-y: hidden;
 +
        padding: 8px;
 +
        z-index: 100;
 +
        white-space: nowrap
 +
    }
 +
 +
    .mdl-components-index-text .mdl-components-dl {
 +
        margin: 0
 +
    }
 +
 +
    .mdl-components-img {
 +
        left: 8px
 +
    }
 +
 +
    .components .content .about-panel {
 +
        padding: 8px
 +
    }
 +
 +
    .mdl-components__nav .mdl-components__link {
 +
        display: inline-block;
 +
        vertical-align: top;
 +
        height: 100%;
 +
        width: auto;
 +
        min-width: 48px;
 +
        margin: 0 8px 0 0;
 +
        padding-left: 0;
 +
        padding-top: 10px
 +
    }
 +
 +
    .mdl-components__nav .mdl-components__link > * {
 +
        display: block;
 +
        width: auto;
 +
        margin: 0 auto;
 +
        text-align: center
 +
    }
 +
 +
    .mdl-components__nav .mdl-components__link > .mdl-components__link-image {
 +
        position: static;
 +
        width: 48px
 +
    }
 +
 +
    .content {
 +
        padding-top: 64px !important;
 +
        padding-left: 0 !important;
 +
        overflow-y: auto;
 +
        height: 100%
 +
    }
 +
}

Latest revision as of 13:49, 8 October 2018

.mdl-components { display: -webkit-flex; display: -ms-flexbox; display: flex } .mdl-components-index { box-sizing: border-box; position: relative; padding-top: 64px } .mdl-components-index-text { max-width: 960px; margin: 0 } .mdl-components-index-text .mdl-components-dl { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 40px } .mdl-components-img { position: absolute; margin-top: 24px; left: 40px; height: 90%; width: 90%; max-height: 600px; background: url('../assets/compindex_2x.png') no-repeat top left/contain } .mdl-components-text { margin: 0; padding: 0 } mdl-components-dl { padding: .5em; width: 80% } mdl-components-dt { float: left; clear: left; width: 150px; font-weight: 700 } mdl-components-dd { margin: 0 0 0 150px; padding: 0 0 .5em } .mdl-components .mdl-components__nav { display: inline-block; background: #fff; width: 200px; box-sizing: border-box; padding: 24px 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; z-index: 1 } .mdl-components .mdl-components__pages { display: inline-block; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; padding-bottom: 120px } .mdl-components .mdl-components__link { margin: 16px; font-weight: 400; color: rgba(0, 0, 0, .66); position: relative; padding-left: 72px; min-height: 48px; display: table; line-height: 48px } .mdl-components .mdl-components__link.is-active { font-weight: 700; color: #98040C } .content { background: #fafafa } .mdl-components .mdl-components__page { display: none; min-height: 1000px } .mdl-components .docs-toc, .mdl-components .component-title { margin-bottom: 60px; margin-left: 32px } .mdl-components .component-title { margin-top: 30px } .mdl-components .component-title h3 { font-size: 16px; font-weight: 500; margin-top: 80px; text-transform: uppercase } .mdl-components .snippet-code pre.language-markup code { padding-left: 40px } .mdl-components .mdl-components__page.is-active { display: block } .mdl-components__link-image { display: inline-block; margin: 0 10px; position: absolute; left: 0; top: 0; background-color: #ddd; background-position: center; background-repeat: no-repeat; background-size: auto 48px; border-radius: 50%; height: 46px; width: 46px } .mdl-components__warning { width: 100%; max-width: 640px; margin: 0 auto; background-color: #FFF9C4; padding: 16px; border-radius: 2px; color: #212121 } .mdl-components__link.is-active .mdl-components__link-image { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12) } .docs-readme { width: 100%; max-width: 640px; margin: 0 auto } .docs-readme .language-markup { width: 100% } @media (max-width: 850px) { .mdl-components .component-title, .mdl-components .docs-toc { margin-left: 0 } .mdl-components .snippet-code pre.language-markup code { padding-left: 8px } .docs-layout-content { position: relative; height: 100%; overflow: hidden !important } .mdl-components .mdl-components__nav { position: fixed; top: 64px; left: 0; display: block; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: 120px; overflow-x: auto; overflow-y: hidden; padding: 8px; z-index: 100; white-space: nowrap } .mdl-components-index-text .mdl-components-dl { margin: 0 } .mdl-components-img { left: 8px } .components .content .about-panel { padding: 8px } .mdl-components__nav .mdl-components__link { display: inline-block; vertical-align: top; height: 100%; width: auto; min-width: 48px; margin: 0 8px 0 0; padding-left: 0; padding-top: 10px } .mdl-components__nav .mdl-components__link > * { display: block; width: auto; margin: 0 auto; text-align: center } .mdl-components__nav .mdl-components__link > .mdl-components__link-image { position: static; width: 48px } .content { padding-top: 64px !important; padding-left: 0 !important; overflow-y: auto; height: 100% } }