JS - משחקי עיצוב בCSS-JS

[chagold]

בקוד הזה בתיבת חיפוש יש איזה משחק קטן עם הטקסט שבלייבל 'Search Title'.
איזה ספריה מממשת את זה? או כל מיני משחקים כאלה?
אגב הצד קליינט הנדון (אצלי) הוא ב-VUE.

תודה

[yossiz]

@chagold שם זה לא ספרייה רק קצת משחקי CSS על ה-label

    label {
      position: absolute;
      ...
      top: 8px;
      left: 12px;
      z-index: -1;
      transition: .15s all ease-in-out;
    }
    input {
      transition: .15s all ease-in-out;
      ...
      &:focus {
        ...
        transform: scale(1.05);
        & + label  {
          ...
          transform: translateY(-24px) translateX(-12px);
        }
      }
    }

[chagold]

@yossiz
לא הצלחתי לממש
https://jsfiddle.net/bot2guf7/

[yossiz]

@chagold
א. אני ממש (אבל ממש...) לא האדם הנכון לעזור בענייני CSS
ב. צריך לבחור שם את תחביר SCSS (אפשר לממש את זה ב-CSS רגיל בלי שום קושי רק שבמקרה ה-fiddle המקורי היה ב-SCSS)
ג. תוסיף כלל:

    .search-wrapper {
      position: relative;
      top: 20px;
    }

והכל על מקומו יבוא בשלום

[ש.ב.ח.]

המשחק הוא בcss פשוט
אתה מסתכל על משהו שנכתב בscss... זה לא יעבוד בcss

בעברית זה אומר כך:
את הinput והlabel נניח בתוך אזור(div) שהמיקום שלו הוא יחסי לעצמו (realetive)
הinput ראשון ואחריו הlabel
לlabel ניתן מיקום מקובע יחסי להורה האב הראשון שהוא יחסי לעצמו (בעצם זה האב הראשון שקבענו אותו realetive)
בשלב זה, הlabel נצמד לעליון שמאל של הdiv האב,
בגלל שבהיררכיה הlabel בה אחרי הinput יש לתת לו z-index של -1 כדי שהinput יכסה אותו.
עכשיו נדחוף אותו באופן כזה שיהיה מוסתר בטוח מאחורי הinput ע"י שימוש בtop וב left.
עכשיו ניצור שינוי במקרה ויש פיקוס על הinput שישנה את הסטייל של הlabel הבא אחריו בשימוש עם הסלקטור הבא:

input:focus ~label{
//הסטייל כאן
}

באותו עיצוב נגדיר שהפונט יקטן מעט, וכמו כן יזו מעט למקום שנרצה ביחס למקומו כרגע, ע"י:

transform: translateY(-24px) translateX(-12px);

או בקיצור:

transform: translate(-24px, -12px);

שים לב שlabel בא אחרי הinput ומתחתיו (ברירת המחדל בדפדפן שהוא בא על יד הinput).

הנה הדוגמא כמו במה שהראת רק בCSS