Closed hudochenkov closed 8 years ago
Input:
&__itself { position: absolute; top: 100%; right: 50%; transform: translateX(50%); margin-top: -4px; z-index: 2; display: none; width: 200px; &.is-open { display: block; } &:before { position: absolute; top: 0; left: 50%; display: block; width: 12px; height: 12px; border: 1px solid #e2e2e2; background: #e2e2e2; box-shadow: 0 0 8px rgba(0, 0, 0, .1); content: ""; transform: rotate(45deg); transform-origin: 0 0; } // &:after { // content: ""; // position: absolute; // top: -2px; // left: 50%; // width: 1px; // height: 10px; // background: red; // display: block; // } }
Output:
&__itself { position: absolute; // } right: 50%; transform: translateX(50%); margin-top: -4px; z-index: 2; display: none; width: 200px; &.is-open { display: block; } &:before { position: absolute; top: 0; left: 50%; display: block; width: 12px; height: 12px; border: 1px solid #e2e2e2; background: #e2e2e2; box-shadow: 0 0 8px rgba(0, 0, 0, .1); content: ""; transform: rotate(45deg); transform-origin: 0 0; } top: 100% // content: ""; // position: absolute; // top: -2px; // left: 50%; // width: 1px; // height: 10px; // background: red; // display: block; // &:after { }
With every run it's getting worse.
Input:
Output:
With every run it's getting worse.