110swag / flashy-frontend

Download as
Browse Code ยป

Commit bdc4719aafa05b4a83903f31814748fc365359b6

Authored by Rachel Lee
1 parent c317a9f1d7
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Cleaned up flashy.css a lil

Showing 1 changed file with 64 additions and 79 deletions Side-by-side Diff

flashy.css View file @ bdc4719
... ... @@ -35,15 +35,11 @@
35 35 margin-right: 0;
36 36 }
37 37  
38   -ul.side-nav.fixed li {
39   - /*line-height: 30px;*/
40   - /*font-weight:700;*/
41   - font-size:24px;
  38 +.side-nav a {
  39 + line-height: normal;
42 40 }
43 41  
44   -ul.side-nav.fixed li a {
45   - /*line-height: 30px;*/
46   - /*font-weight:700;*/
  42 +ul.side-nav.fixed li {
47 43 font-size:24px;
48 44 }
49 45  
50 46  
51 47  
52 48  
53 49  
54 50  
55 51  
56 52  
57 53  
58 54  
59 55  
60 56  
61 57  
62 58  
63 59  
... ... @@ -52,120 +48,109 @@
52 48 height: 36px;
53 49 }
54 50  
55   -ul.side-nav.fixed li ul li {
56   - /*line-height: 30px;*/
57   - /*font-weight:700;*/
58   - margin-left:20px;
59   -}
60   -
61 51 ul.side-nav.fixed li a {
62   - /*line-height: 30px;*/
63   - /*font-weight:700;*/
64 52 font-size:24px;
65 53 }
66 54  
  55 +ul.side-nav.fixed li ul li {
  56 + margin-left:20px;
  57 +}
  58 +
67 59 /* Flashcard directive css */
68 60 .card {
69 61 word-wrap: break-word;
70 62 }
71 63  
72 64 .card.flashy {
73   - float: left;
74   - height: calc(3*5vw);
75   - margin: 6px;
76   - max-height: calc(3*60px);
77   - max-width: calc(5*60px);
78   - min-height: calc(3*50px);
79   - min-width: calc(5*50px);
80   - min-height: calc(3*50px);
81   - min-width: calc(5*50px);
82   - width: calc(5*5vw);
  65 + float: left;
  66 + height: calc(3*5vw);
  67 + margin: 6px;
  68 + max-height: calc(3*60px);
  69 + max-width: calc(5*60px);
  70 + min-height: calc(3*50px);
  71 + min-width: calc(5*50px);
  72 + min-height: calc(3*50px);
  73 + min-width: calc(5*50px);
  74 + width: calc(5*5vw);
83 75 }
84 76  
85 77 .card-overlay {
86   -/* display: none; */
87   - height: calc(3*5vw);
88   - left: 0;
89   - max-height: calc(3*60px);
90   - max-width: calc(5*60px);
91   - min-height: calc(3*50px);
92   - min-width: calc(5*50px);
93   - opacity: 0;
94   - position: absolute;
95   - top: 0;
96   - transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
97   - opacity 0.2s cubic-bezier(0,0,0.6,1);
98   - /* animation effect to appear on off-hover */
99   - visibility: hidden;
100   - width: calc(5*5vw);
  78 + height: calc(3*5vw);
  79 + left: 0;
  80 + max-height: calc(3*60px);
  81 + max-width: calc(5*60px);
  82 + min-height: calc(3*50px);
  83 + min-width: calc(5*50px);
  84 + opacity: 0;
  85 + position: absolute;
  86 + top: 0;
  87 + transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
  88 + opacity 0.2s cubic-bezier(0,0,0.6,1);
  89 + /* animation effect to appear on off-hover */
  90 + visibility: hidden;
  91 + width: calc(5*5vw);
101 92 }
102 93  
103 94 .card-overlay i {
104   - color: #FFF;
105   - left: 50%;
106   - position: absolute;
107   - top: 50%;
108   - transform: translate(-50%, -50%);
  95 + color: #FFF;
  96 + left: 50%;
  97 + position: absolute;
  98 + top: 50%;
  99 + transform: translate(-50%, -50%);
109 100 }
110 101  
111 102 .card:hover .card-overlay {
112   - opacity: 1;
113   - transition-delay: 0s; /* animation effect to appear on hover */
114   - visibility: visible;
  103 + opacity: 1;
  104 + transition-delay: 0s; /* animation effect to appear on hover */
  105 + visibility: visible;
115 106 }
116 107  
117 108 .top-box {
118   - background-color: rgba(0,10,203,0.6);
119   - height: 65%;
120   - position: relative;
121   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
122   - width: 100%;
  109 + background-color: rgba(0,10,203,0.6);
  110 + height: 65%;
  111 + position: relative;
  112 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  113 + width: 100%;
123 114 }
124 115  
125 116 .top-box:hover {
126   - background-color: rgba(0,10,203,0.7);
  117 + background-color: rgba(0,10,203,0.7);
127 118 }
128 119  
129 120 .bottom-box {
130   - height: 35%;
131   - width: 100%;
  121 + height: 35%;
  122 + width: 100%;
132 123 }
133 124  
134 125 .left-box {
135   - background-color: rgba(15,0,155,0.6);
136   - float: left;
137   - position: relative;
138   - height: 100%;
139   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
140   - width: 50%;
  126 + background-color: rgba(15,0,155,0.6);
  127 + float: left;
  128 + position: relative;
  129 + height: 100%;
  130 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  131 + width: 50%;
141 132 }
142 133  
143 134 .left-box:hover {
144   - background-color: rgba(15,0,155,0.7);
  135 + background-color: rgba(15,0,155,0.7);
145 136 }
146 137  
147 138 .right-box {
148   - background-color: rgba(0,81,189,0.6);
149   - float: right;
150   - height: 100%;
151   - position: relative;
152   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
153   - width: 50%;
  139 + background-color: rgba(0,81,189,0.6);
  140 + float: right;
  141 + height: 100%;
  142 + position: relative;
  143 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  144 + width: 50%;
154 145 }
155 146 .right-box:hover {
156   - background-color: rgba(0,81,189,0.7);
  147 + background-color: rgba(0,81,189,0.7);
157 148 }
158 149  
159 150 .center-me {
160   - margin: 0 auto;
161   - text-align: center;
162   - vertical-align: center;
163   -}
164   -
165   -.container {
166   - /*position: relative;
167   - width: 600px;
168   - height: 80px;*/
  151 + margin: 0 auto;
  152 + text-align: center;
  153 + vertical-align: center;
169 154 }
170 155  
171 156 .modal.bottom-sheet {