//// /// Copyright (c) 2016-2020 Martin Donath /// /// Permission is hereby granted, free of charge, to any person obtaining a /// copy of this software and associated documentation files (the "Software"), /// to deal in the Software without restriction, including without limitation /// the rights to use, copy, modify, merge, publish, distribute, sublicense, /// and/or sell copies of the Software, and to permit persons to whom the /// Software is furnished to do so, subject to the following conditions: /// /// The above copyright notice and this permission notice shall be included in /// all copies or substantial portions of the Software. /// /// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR /// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, /// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL /// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER /// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING /// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER /// DEALINGS //// // ---------------------------------------------------------------------------- // Keyframes // ---------------------------------------------------------------------------- // Show source facts @keyframes md-source__facts--done { 0% { height: 0; } 100% { height: px2rem(13px); } } // Show source fact @keyframes md-source__fact--done { 0% { transform: translateY(100%); opacity: 0; } 50% { opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } // ---------------------------------------------------------------------------- // Rules // ---------------------------------------------------------------------------- // Source container .md-source { display: block; font-size: px2rem(13px); line-height: 1.2; white-space: nowrap; // Hack: reduce jitter backface-visibility: hidden; transition: opacity 250ms; // Adjust for right-to-left languages [dir="rtl"] & { padding-right: initial; padding-left: px2rem(12px); } // Hovered source container &:hover { opacity: 0.7; } // Repository platform icon &__icon { display: inline-block; width: px2rem(48px); height: px2rem(48px); vertical-align: middle; // Align with margin only (as opposed to normal button alignment) svg { margin-top: px2rem(12px); margin-left: px2rem(12px); // Adjust for right-to-left languages [dir="rtl"] & { margin-right: px2rem(12px); margin-left: initial; } } // Correct alignment, if icon is present + .md-source__repository { margin-left: px2rem(-40px); padding-left: px2rem(40px); // Adjust for right-to-left languages [dir="rtl"] & { margin-right: px2rem(-40px); margin-left: initial; padding-right: px2rem(40px); padding-left: initial; } } } // Repository name &__repository { display: inline-block; max-width: calc(100% - #{px2rem(24px)}); margin-left: px2rem(12px); overflow: hidden; font-weight: 700; text-overflow: ellipsis; vertical-align: middle; } // Source facts (statistics etc.) &__facts { margin: 0; padding: 0; overflow: hidden; font-weight: 700; font-size: px2rem(11px); list-style-type: none; opacity: 0.75; // Show after the data was loaded [data-md-state="done"] & { animation: md-source__facts--done 250ms ease-in; } } // Fact &__fact { float: left; // Adjust for right-to-left languages [dir="rtl"] & { float: right; } // Show after the data was loaded [data-md-state="done"] & { animation: md-source__fact--done 400ms ease-out; } // Middle dot before fact &::before { margin: 0 px2rem(2px); content: "\00B7"; } // Remove middle dot on first fact &:first-child::before { display: none; } } }