gradient-generator/main.scss at master · sharnajh/gradient-generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
body {
    background: linear-gradient(to right, #B149FF , #00ffff );
    font-family:'Montserrat';
    height:100vh;
    margin:0;
    text-transform:uppercase;
    letter-spacing:1px;
    input[type=range]{
        width:100px;
    }
    h1 {
        text-align:center;
        color:darkslategrey;
        font-size:29px;
        margin-top:0;
    }
    h2 {
        font-size:15px;
    }
    .container {
        display:flex;
        justify-content: center;
        align-items: center;
        height:100vh;
        width:100vw;
        #main {
            width:300px;
            padding:20px;
            margin-bottom:20px;
            background-color:white;
            border-radius:25px;
            transition-duration: 0.6s;
            // box-shadow: 0px 0px 80px -20px black;
            animation: 0.6s ease-out 0s 1 slideInFromTop;
            .body {
                display:flex;
                .color {
                    width:50%;
                    text-align:center;
                }
            }
            #direction-input {
                text-align:center;
                margin-bottom:0;
            }
            .directions-container {
                width:100%;
                display:flex;
                justify-content: center;
                align-content: center;
                margin-bottom:0;
                .direction {
                    cursor:pointer;
                    border:1px solid gray;
                    border-radius:5px;
                    width: 10%;
                    height: 10%;
                }
                .direction:hover {
                    background-color: #E3EAFF;
                    transition: 0.2s;
                }
            }
            #alert {
                display:none;
                text-align:center;
            }
            #generate {
                font-family:'Montserrat';
                font-size:25px;
                padding:20px;
                padding-top:0px;
                width:100%;
                border-radius:20px;
                text-transform:uppercase;
                letter-spacing:1px;
                cursor:pointer;
                height:72px;
                overflow:hidden;
                text-align:center;
                #generate-text {
                    margin:0;
                    transition-duration: 0.2s;
                    z-index:1;
                    position:absolute;
                    margin-left:10px;
                    transform: translateY(17px);
                }
                #clipboard-alert {
                    margin:0;
                    transition-duration: 0.2s;
                    font-size:19px;
                    z-index:0;
                    position:relative;
                    transform: translateY(70px)
                }
            }
            #generate:hover #generate-text {
                transform: translateY(-30px);
                opacity:0;
            }
            #generate:hover #clipboard-alert {
                transform: translateY(10px);
            }
            #generate:hover {
                background: linear-gradient(to left, #8fffb3 0%, #00b9ff 100%);
                border:none;
                color:white;
            }
        }

        @keyframes slideInFromTop {
            0% {
              opacity:0.6;
              transform: translateY(-60px);
              box-shadow:none;
            }
            50% {
              opacity:0.8;
              transform: translateY(20px);
            }
            100% {
              opacity:1;
              transform: translateX(0);
            //   box-shadow: 0px 0px 80px -20px black;
            }
          }
    }
}